/* GLOBALS */
    *{
        margin: 0;
        padding: 0;
        scroll-behavior: smooth;
    }
    html {
        font-size:62.5%;
        -webkit-font-smoothing: antialiased;
    }
    h1,h2,h3,h4,p{
        font-weight: normal;
    }
      h1,h3{
          font-family: "Josefin Slab", sans-serif;
      }
      h2,h4,p, a{
          font-family: "Quicksand", sans-serif;
      }
        h1{
            font-size: 5rem;
        }
        h2{
            font-size: 2.9rem;
        }
        h3{
            font-size: 2.5rem;
        }
        h4{
            font-size: 1.7rem;
        }
        p{
            font-size: 2rem;
        }
    a{
        text-decoration: none;
        color: #e6e6f7;
    }
    a:hover{
        color: #e6e6f7;
    }
    video {
        clip-path: inset(0.1px 0.1px);
    }
    ::selection {
        color: #e6e6f7;
        background: #0a2f4c;
    }
    ::-webkit-scrollbar {
        width: 0px;
    }

/* BODY */

    body{
        background:  url("media/gradient.png"), url("media/grid.jpg");
        background-position:center;
        background-attachment: fixed;
        background-size: cover, 80%;
        height: 100vh;
        color: #e6e6f7;
        overflow: hidden;
    }
        body > .background_media{
            position: fixed;
            width: 100%;
            height: 100vh;
            object-fit: cover;
            opacity: 0;
            transition: opacity 0.2s ease-in-out;
        }
        body > .background_media.active{
            opacity: 0.5;
        }

/* MAIN SECTION */

    main{
        z-index: 2;
        position: absolute;
        width: 90vw;
        max-width: 1400px;
        aspect-ratio: 11/4;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
        main > div.highlight,
        main > section#cards a.card{
            backdrop-filter: blur(10px) brightness(0.5);
            border-radius: 4px;
        }
        main > div.highlight{
            box-shadow: 0px 0px 0px 1px rgba(100, 100, 100, 0.02),
                        -9px 9px 9px -0.5px rgba(0, 0, 0, 0.04), 
                        -18px 18px 18px -1.5px rgba(0, 0, 0, 0.08),
                        -37px 37px 37px -3px rgba(0, 0, 0, 0.16), 
                        -75px 75px 75px -6px rgba(0, 0, 0, 0.24), 
                        -150px 150px 150px -12px rgba(0, 0, 0, 0.48);
            position: absolute;
            height: 100%;
            aspect-ratio: 1/1;
            opacity: 0;
            transition: opacity 0.2s ease-in-out, translate 0.2s ease-in-out;
            translate: 2%;
            z-index: 1;
        }
        main > div.highlight.active {
            opacity: 1;
            translate: 0%;
            z-index: 5;
        }
            main > div.highlight div#link_container{
                position: absolute;
                width: 84%;
                bottom: 8%;
                left: 50%;
                transform: translateX(-50%);
                display: flex;
                justify-content: space-between;
            }
                main > div.highlight div#link_container a{
                    height: 3rem;
                }
                    main > div.highlight div#link_container a h4,
                    main > div.highlight div#link_container a svg{
                        float: left;
                    }
                    main > div.highlight div#link_container a h4{
                        line-height: 3rem;
                        margin-left: 1rem;
                    }
                    main > div.highlight div#link_container a svg{
                        height: 100%;
                        fill: #e6e6f7;
                    }
            main > div.highlight p{
                position: absolute;
                bottom: 0%;
                margin: 0% 8% 8% 8%;
            }
            main > div.highlight > a{
                position: absolute;
                bottom: 0;
                margin: 0% 8% 8% 8%;
                visibility: hidden;
                text-decoration: underline;
                font-size: 1.5rem;
            }
            main > div.highlight h1{
                margin: 8% 8% 0 8%;
            }
            main > div.highlight h2{
                margin: 0 0 0 8%;
            }
        main > section#cards{
            float: right;
            width: 54%;
            height: 100%;
            display: grid;
            grid-gap: 4% 2.5%;
            grid-auto-rows: 1fr;
            grid-template-columns: repeat(3, 1fr);
        }
            main > section#cards > a.card{
                box-shadow: 0px 0px 0px 1px rgba(100, 100, 100, 0.02),
                        -9px 9px 9px -0.5px rgba(0, 0, 0, 0.04), 
                        -18px 18px 18px -1.5px rgba(0, 0, 0, 0.08),
                        -37px 37px 37px -3px rgba(0, 0, 0, 0.16), 
                        -75px 75px 75px -6px rgba(0, 0, 0, 0.24);
                scale: 1.005; /* Removes pixel artifact when box-shadow and backdrop-filter don't cooperate */
            }
            main > section#cards > a.card:hover{
                backdrop-filter: blur(15px) brightness(0.3);
            }
                main > section#cards a.card > h3,
                main > section#cards a.card > h4{
                    position: relative;
                    text-align: center;
                    top: 40%;
                    transform: translateY(-50%);
                }
                main > section#cards a.card > img{
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                }
                    main > section#cards a.card > div.mobile_blocker{
                        visibility: hidden;
                        position: absolute;
                        width: 100%;
                        height: 100%;
                        left: 0;
                        top: 0;
                    }
    
@media only screen and (max-width : 1200px) {
    body{
        height: auto;
        overflow-y: scroll;
    }
        body > .background_media.active{
            opacity: 0.3;
        }
    main{
        position: relative;
        width: 95vw;
        max-width: 490px;
        min-height: 1530px;
        
        left: 50%;
        transform: translate(-50%, 0%);
    }
        main > div.highlight{
            top: 3%;
            width: 100%;
            height: auto;
            min-height: 30%;
        }
            main > div.highlight p{
                bottom: 7%;
            }
            main > div.highlight > a{
                visibility: visible;
            }
        main > section#cards{
            position: absolute;
            float:none;
            width: 100%;
            height: 60%;
            bottom: 0;
            padding-bottom: 40px;
            grid-gap: 1.5% 2.5%;
            grid-auto-rows: 1fr;
            grid-template-columns: repeat(2, 1fr);
        }
                main > section#cards a.card > div.mobile_blocker{
                    visibility: visible;
                }
}
@media only screen and (max-width : 480px) {
    main{
        left: 50%;
        transform: translate(-50%, 0%);
        padding-bottom: 40px;
    }
        main > section#cards{
            grid-template-columns: 1fr;
        }
            main > section#cards a.card{
                height: 150px;
            }
                main > section#cards a.card > img{
                    object-fit: contain;
                }
}