/* ———————————— DEFAULTS AND BASE STYLES ———————————— */

html { /* root unit of measure for typography */
    font-size: 100%;
    scroll-behavior: smooth;
}

body { /* styles the body of the site */
    font-family: Urbanist, Arial, Helvetica, sans-serif;
    background-color: #313c8b;
    color: white;
    margin: 0;

    animation: load 1s cubic-bezier(0,1,.4,1.01) 1;
    opacity: 0;
    animation-delay: 0.5s;
    animation-fill-mode: forwards;
}

        @keyframes load {
            0% {
                opacity: 0;
                transform: scale(1.5);
            }
            100% {
                opacity: 1;
                transform: scale(1);
            }
        }

h1, h2, h3, h4, h5, h6, p {
    font-size: 100%;
}

footer { /* styles the content inside the footer */
    text-align: center;
}

footer img { /* styles the images inside the footer */
    width: 100%;
}

a:link { /* styles links. this ruleset overrides the default that links are underlined, and gives them a specific color */
    color: white;
    text-decoration: none;
    transition: ease .3s; /* this is a transition, marking how the link returns to how it looks normally */
}

a:visited { /* specifies the color of a visited link. this ruleset notes that it is kept the same color as an unvisited link. */
    color: white;
    text-decoration: none;
}

a:hover { /* creates an effect on links when the user hovers over it */
    color: #e72371;
    text-decoration: none;
    text-shadow: rgba(243, 80, 80, 0.6) 0px 7px 5px;
    transition: ease .3s; /* this is a transition, marking how the link changes when hovered over */
}

a:active { /* styles active links */
    color:#e72371;
    text-decoration: none;
}

/* ———————————— CONTAINERS AND IDS ———————————— */

.freezefest-container { /* styles the overall container. the height helps push the content farther down */
    height: 53vw;
}

.reel { /* styles the div that holds the video reel, pushing it to the background */
    position: absolute; 
    width: 100%; 
    height: auto; 
    z-index: -100;
    background-size: cover;
    overflow: hidden;
}

.flex-container1 { /* styles/makes the 1st flex container that holds the highlight reel */
    color: white;
    display: flex;
    flex-direction: row;
    height: 53%;
}

.flex-container2 { /* styles/makes the 2nd flex container that holds the main content */
    padding: 1%;
    margin-left: 15vw;
    margin-right: 15vw;
    display: flex;
    flex-direction: row;
    align-items: center;

    animation: secondload 1s cubic-bezier(0,1,.4,1.01) 1;
    opacity: 0;
    animation-delay: 1s;
    animation-fill-mode: forwards;
}

            @keyframes secondload {
                0% {
                    opacity: 0;
                    transform: scale(1.5);
                }
                100% {
                    opacity: 1;
                    transform: scale(1);
                }
            }

.flex-container2 > div { /* styles the direct children that are divs of the flex container (the flex items) */
    width: 50%;
    padding: 10px;
}

.flex-column > div { /* styles the direct children that are divs inside of the parent div class=flex-column */
    text-align: center;
}

.flex-column > div[class="button"] { /* this ruleset uses an ATTRIBUTE SELECTOR to target direct children that are divs of the parent element, flex-column, AND have the class name specified */
    /* background-color: aqua; */
    background-color: #29498F;
    font-weight: 700;
    text-align: center;
    border: 2px solid white;
    margin: 2%;
    padding: 4%;
    color: white;
    transition: ease .3s; /* this is a transition, marking how the div returns to how it looks normally */
}

.flex-column > div[class="button"]:hover { /* this ruleset uses a pseudoclass of the above ruleset for when the user hovers over these specific divs (essentially, how to make them stylistically behave like buttons) */
    background-color: #C03030;
    color: white;
    border: 2px solid #C03030;
    padding-left: 7.8%;
    font-style: italic;
    transform: translateX(20px); /* the transform selector moves the content 20px to the right */
    transition: cubic-bezier(0,1.50,.4,1.01) 0.8s; /* this is a transition, marking how the div changes when the user hovers on it */
}

.flex-item img { /* this ruleset styles images that are children of a parent element with class=flex-item */
    float: center;
    width: 100%;
}

#highlight-image {
    transition: cubic-bezier(.17,1.83,.43,1.01) 0.8s;
}

#highlight-image:hover {
    transform: scale(1.025);
    transition: cubic-bezier(.17,1.83,.43,1.01) 0.8s;
}

.flex-container3 { /* styles/makes the 3rd flex container that holds the main content */
    padding: 1%;
    margin-top: 50px;
    margin-left: 12vw;
    margin-right: 15vw;
}

.event-grid {
    display: grid;
    grid-template: 
        'event-1 event-2 event-3'
        'event-4 event-5 event-6';
    column-gap: 30px;
}

.flex-container4 {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50%;
    margin: auto;
}

.flex-container4 > div {
    align-self: center;
    width: 60%;
    margin-right: 40px;
}

.event-1 { grid-area: event-1; }
.event-2 { grid-area: event-2; }
.event-3 { grid-area: event-3; }
.event-4 { grid-area: event-4; }
.event-5 { grid-area: event-5; }
.event-6 { grid-area: event-6; }
.event-7 { grid-area: event-7; }
.event-8 { grid-area: event-8; }

.event-grid > div {
    width: 100%;
    height: auto;
    transition: cubic-bezier(.17,1.83,.43,1.01) 0.8s;
    margin-bottom: 40px;
}

.event-grid > div img {
    width: 100%;
    -webkit-filter: drop-shadow(3px 3px 0 #90BACD)
                  drop-shadow(-3px -3px 0 #90BACD);
    filter: drop-shadow(3px 3px 0 #90BACD) 
          drop-shadow(-3px -3px 0 #90BACD);
}

.ig-post {
    -webkit-filter: drop-shadow(3px 3px 0 #90BACD)
                  drop-shadow(-3px -3px 0 #90BACD);
    filter: drop-shadow(3px 3px 0 #90BACD) 
          drop-shadow(-3px -3px 0 #90BACD);
    transition: cubic-bezier(.17,1.83,.43,1.01) 0.8s;
}

.ig-post:hover {
    transform: scale(1.025);
    transition: cubic-bezier(.17,1.83,.43,1.01) 0.8s;
}

.event-grid > div:hover {
    transform: scale(1.025);
    transition: cubic-bezier(.17,1.83,.43,1.01) 0.8s;
}

.flex-container4 {
    margin-bottom: 30px;
}

/* ———————————— MEDIA QUERIES ———————————— */

@media (max-width: 768px) { /* this ruleset marks how the site looks when the viewport is 768px wide or less (notably, mobile devices) */

    .flex-container1 { /* makes the container that holds the highlight reel larger */
        height: 65%;
    }

    .flex-container2 { /* makes the flex items (children) of the 2nd flex container change from being in a row, to stack as a column */
        margin-left: .2vw;
        margin-right: .2vw;
        flex-direction: column;
    }

    .flex-container2 > div { /* makes the buttons to external sites a bit wider on mobile devices */
        width: 85%;
        padding: 10px;
    }

    .event-grid {
        grid-template: 
            'event-1'
            'event-2'
            'event-3'
            'event-4'
            'event-5'
            'event-6'
            'event-7'
            'event-8';
    }

}