:root {
    /* DEFINE CSS VARIABLES FOR COLORS */
    --main-bg-color: rgb(240, 248, 255);
}

body {
    /* ADD BACKGROUND COLOR */
    background-color: var(--main-bg-color, aliceblue);
}

h1 {
    /* ADD COLOR TO HEADING */
    color: rgb(0, 0, 139);
    /* ADD FONT TO HEADING */
    font-family: 'honk', sans-serif;
    font-size: 4em;
}

h2, h3{
    color: hsl(240, 100%, 25%);
    /* ADD COLOR TO SUBHEADING */
}

p {
    background-color: rgb(91, 240, 202); /* fallback */
}

@media (color-gamut: p3) {
    p {
        background-color: color-mix(
            in display-p3,
            color(display-p3 0.36 0.94 0.79) 50%,
            color(display-p3 0.53 0.99 0.40) 50%
        );
    }
}

/* ADD BACKGROUND COLOR FOR OKLAB GAMUT */
ol:nth-child(1) {
    background-color: color-mix(in oklab, #ba1ac0 25%, white);
}

ol:nth-child(2) {
    background-color: color-mix(in oklab, #ba1ac0 50%, white);
}

ol:nth-child(3) {
    background-color: color-mix(in oklab, #ba1ac0 75%, white);
}

html {
    font-size: 12pt;
    /* SET BASE FONT SIZE */
}

.ems ol {
    font-size: 1.25em;
    /* SET FONT SIZE TO 1.25 TIMES THE BASE SIZE */
}

/* ADD BORDER TO CONTAINERS AND PARAGRAPHS */
.container1 {
    position: static;
    display: block;
    border: 0.132cm solid rgb(197, 156, 230);
    margin: auto;
}

.addr {
    border: 5px solid rgb(197, 156, 230);
    background-color: rgb(189, 245, 255);
    padding: 10px;
}

.one {
    margin-bottom: 50px;
}

.two {
    margin-top: 30px;
}

/* ADD BORDER TO CONTAINERS AND PARAGRAPHS */
.container2 {
    display: inline-block;
    border-width: 5px;
    border-style: solid;
    border-color: rgb(197, 156, 230);
    border-radius: 0%;
    margin-top: 40px;
    margin-bottom: 40px;
    margin-left: 40px;
    margin-right: 40px;
}

.unfbus {
    border: 5px solid rgb(197, 156, 230);
    background-color: rgb(189, 245, 255);
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 10px;
    padding-right: 10px;
}

.one {
    margin-bottom: 50px;
}

.two {
    margin-top: 1rem;
}

/* ADD position for right IMAGES */
.right-image {
    position: fixed;
    top: 72px;
    right: 20px;
    width: 160px;
    height: auto;
}

/* ADD HOVER EFFECT FOR SUBMIT BUTTON */
.submit-btn {
    width: 10em;
    height: 5ex;
    background-color: rgb(106, 235, 67);
    border: 2px solid rgb(126, 69, 219);
    border-radius: 10px;
    font-weight: bold;
    color: black;
    cursor: pointer;
}


.submit-btn:hover {
    background-color: rgb(98, 226, 248);
}

/* Unvisited links */
a:link {
    color: blue;
}

/* Visited links */
a:visited {
    color: purple;
}

/* Hovered links */
a:hover {
    background: yellow;
}

/* Active links */
a:active {
    color: red;
}

/* Active paragraphs */
p:active {
    background: #eeeeee;
}

/* ADD FLEXBOX LAYOUT */
.flex-container {
    /* create a flex layout context */
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-around;
    min-width: 300px;
    max-width: 1200px;
    padding: 0;
    margin: 0 auto;
    list-style: none;
}

.flex-item {
    background: rgb(151, 238, 198);
    padding: 5px;
     width: 180px;
    min-width: 150px;
    max-width: 250px;
    height: 150px;
    margin-top: 10px;
    line-height: 150px;
    color: white;
    font-weight: bold;
    font-size: 3em;
    text-align: center;
}

/* ADD GRID LAYOUT */
.grid-container {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(3, 200px);
    grid-template-rows: auto auto;
    justify-items: center;
    align-items: center;
    background-color: rgb(240, 248, 255);
    color: #a2fafd;
}

.grid-item {
    background-color: #a2fafd;
    color: #fff;
    border-radius: 5px;
    padding: 20px;
    font-size: 150%;
}

/* ADD MEDIA QUERIES FOR RESPONSIVE DESIGN */

/* phone */
@media (max-width: 600px) {
    .flex-container {
        justify-content: center;
        gap: 10px;
    }

    .flex-item {
        width: 90%;
        min-width: 0;
        max-width: 400px;
        font-size: 2rem;
    }
}

/* tablet */
@media (min-width: 601px) and (max-width: 1023px) {
    .flex-container {
        justify-content: center;
        gap: 15px;
    }

    .flex-item {
        width: 45%;
        min-width: 150px;
        max-width: 300px;
        font-size: 2.5rem;
    }
}

/* desktop */
@media (min-width: 1024px) {
    .flex-container {
        justify-content: space-around;
        gap: 20px;
    }

    .flex-item {
        width: 200px;
        min-width: 150px;
        max-width: 250px;
        font-size: 3em;
    }
}

/* ADD STYLES FOR IMPORTANT ELEMENTS */
[data-type="important"] {
    font-weight: bold;
    color: red;
}

/* ADD BORDER TO CONTAINERS AND PARAGRAPHS */
.container2 p {
    border: 2px solid rgb(197, 156, 230);
    padding: 10px;
}

/* ADD border to list items */
ul > li {
    border: 2px solid rgb(197, 156, 230);
    padding: 10px;
}

h3 ~ p {
    border: 2px solid rgb(197, 156, 230);
    padding: 10px;
}

h3 + p {
    border: 2px solid rgb(197, 156, 230);
    padding: 10px;
}

p.addr {
    border: 2px solid rgb(197, 156, 230);
    padding: 10px;  
}

section:has(.video) {
    border: 2px solid rgb(197, 156, 230);
    padding: 10px;
}

#additional-comments {
    border: 2px solid rgb(197, 156, 230);
    padding: 10px;

    & h3 {
        margin-top: 0;
    }

    & p {
        margin-bottom: 0;
    }
}

* {
  box-sizing: border-box;
}