:root{
    --space400: #0B1753;
    --space600: #010930;
    --space800: #000c23;
    --space800-80a: rgb(0, 12, 35, 0.8);
    --neon: rgb(21, 234, 122);
    --neon-05a: rgb(21, 234, 122, 0.05);
    --neon-30a: rgb(21, 234, 122, 0.3);
    --light: #F4FFDC;
    --light600: #949989;
    --olive800: #011A15;
}
*{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    transition: all 0.3s ease-in;
}
html{
    scroll-padding-top: 84px;
}
body{
    font-family: "Sora", sans-serif;
    background-color: var(--space800);
    cursor: url(assets/cursor-def.png), auto;
    overflow-x: hidden;
    width: 100vw;
    height: fit-content;
}
a{
    text-decoration: none;
    cursor: url(assets/cursor-pointer.png), pointer;
}
ul{
    list-style: none;
}
.logotype{
    height: 56px;
    width: 190px;
    padding: 4px 8px;
}
#follower{
    position: absolute;
    z-index: 1;
    width: 500px;
    height: 500px;
    background-color: var(--neon-05a);
    border-radius: 50%;
    pointer-events: none;
    transform: translate(-50%, -50%);
    transition: background-color 0.2s ease;
    mix-blend-mode: color-dodge;
}
/*** WIDESCREEN ***/
    /*** NAVBAR ***/
    nav{ 
        z-index: 10;
        display: flex;
        position: sticky;
        padding: 8px 4%;
        width: 100vw;
        justify-content: space-between;
        align-items: center;
        top: 0;
        background-color: var(--space800-80a);
        -webkit-backdrop-filter: blur(10px);
        backdrop-filter: blur(10px);
    }
    nav ul{
        display: flex;
        align-items: center;
        padding: 4px;
        justify-content: center;
        gap: 8px;
    }
    nav li{
        height: fit-content;
    }
    nav li a{
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--light);
        gap: 8px;
        height: 32px;
        padding: 0px 12px;
        border-radius: 50px;
    }
    nav li figure{
        display: none;
        height: 24px;
        width: 24px;
    }
    nav li a:hover{
        color: var(--neon);
        background-color: var(--space400);
        transition: 0s !important;
    }
    nav li a:hover figure{
        display: block;
    }
    .button{
        display: flex;
        color: var(--space800);
        background-color: var(--neon);
        border: 1px solid var(--space800);
        padding: 8px 16px;
        border-radius: 50px;
        margin-left: 20px;
        align-items: center;
        gap: 4px;
        transition: all 500ms ease-in-out;
    }
    .button:hover{
        transform: scale(1.05);
    }
    /*** HERO ***/
    header{
        position: relative;
        margin: 65px 0;
        display: flex;
        flex-direction: row;
    }
    header hgroup{
        width: 30%;
        margin-left: 10%;
        z-index: 2;
    }
    header hgroup small{
        color: var(--neon);
        padding: 6px 8px;
        border: 1px solid var(--neon);
        border-radius: 4px;
    }
    header hgroup h1{
        color: var(--light);
        font-size: 4rem;
        margin-top: 24px;
        margin-bottom: 16px;
        line-height: 1.15;
    }
    header hgroup p{
        color: var(--light600);
    }
    video{
        z-index: 0;
        position: absolute;
        height: 700px;
        right: 5%;
        top: 50%;
        transform: translateY(-50%);
    }
    /*** CLIENTS ***/
    #clients{
        position: relative;
        z-index: 2;
        margin-top: -24px;
        overflow: hidden;
    }
    #clients p{
        text-align: center;
        color: var(--neon);
        font-size: 1.25rem;
        font-weight: 200;
        margin-bottom: 16px;
        text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.8);
    }
    .logos-cont{
        display: flex;
        background-color: var(--space800-80a);
        -webkit-backdrop-filter: blur(10px);
        backdrop-filter: blur(10px);
        justify-content: center;
        padding: 32px;
    }
    .logos{
        align-items: center;
        display: flex;
        gap: 32px;
        width: min-content;
    }
    .logos a{
        height: 32px;
    }
    .logos a:hover{
        opacity: 0.7;
    }
    .logos img{
        height: 100%;
    }
    /*** ABOUT ***/
    #about{
        position: relative;
        z-index: 2;
        margin: 64px 5%;
    }
    #about h2{
        color: var(--neon);
        font-size: 2rem;
        text-align: center;
        margin-bottom: 16px;
    }
    #about p{
        color: var(--light);
        text-align: center;
        font-weight: 300;
        margin-bottom: 48px;    
    }
    .aboutcards{
        display: flex;
        flex-wrap: wrap;
        gap: 24px;
        justify-content: center;
    }
    .aboutcards li{
        position: relative;
        background-color: var(--space600);
        padding: 12px;
        height: 220px;
        width: 220px;
        border-radius: 16px;
        overflow: hidden;
        border: 1px solid var(--neon-30a);
    }
    .aboutcards li:hover{
        border: 1px solid var(--neon);
    }
    .aboutcards li p{
        position: relative;
        z-index: 2;
        text-align: left !important;
        font-size: 1.2rem;
    }
    .aboutcards img{
        z-index: 1;
        position: absolute;
        height: 200px;
        bottom: -30px;
        right: -30px;
    }
    .aboutcards li:hover img{
        transform: translate(-10px,-10px)
    }
    /*** PORTFOLIO ***/
    #portfolio{
        position: relative;
        background: url(assets/bg-box.png) top/50px 50px repeat;
        padding: 48px 2%;
        justify-content: center;
    }
    #portfolio section{
        position: relative;
        z-index: 2;
    }
    #portfolio section h2{
        color: var(--neon);
        font-size: 2rem;
        text-align: center;
        margin-bottom: 16px;
    }
    #portfolio section p{
        color: var(--light);
        text-align: center;
        margin: 0 20% 32px 20%;
    }
    #portfolio blockquote{
        color: var(--light);
        width: 40%;
        margin: 16px 30% 48px 30%;
        font-weight: 300;
        text-align: center;
    }
    #portfolio blockquote cite{
        font-weight: 100;
    }
    .project{
        position: relative;
        z-index: 2;
        height: 400px;
        width: 600px;
        border-radius: 16px;
        overflow: hidden;
    }
    .project img{
        height: 100%;
        width: 100%;
        object-fit: cover;
    }
   .fig-container{
        position: absolute;
        display: flex;
        flex-direction: column;
        background-color: var(--space800-80a);
        -webkit-backdrop-filter: blur(20px);
        backdrop-filter: blur(20px);
        width: 50%;
        height: 384px;
        right: 8px;
        top: 8px;
        padding: 12px;   
        border-radius: 8px;
        justify-content: space-between;
    }
    .project h3{
        font-size: 1.5rem;
        color: var(--light);
    }
    .project hgroup p{
        color: var(--light600);
        font-size: 0.8rem;
    }
    .project hgroup{
        margin-bottom: 16px;
    }
    .project-desc{
        color: var(--light);
        margin-bottom: 32px;
        font-weight: 200;
    }
    .project h4{
        color: var(--light);
        margin-bottom: 8px;
    }
    .project ul{
        display: flex;
        gap: 4px;
        flex-wrap: wrap;
    }
    .project li{
        color: var(--light600);
        border: 0.5px solid var(--light600);
        padding: 2px 6px;
        border-radius: 4px;
        font-size: 0.725rem;
    }
    .view-btn{
        background-color: var(--neon);
        color: var(--space800);
        display: flex;
        padding: 4px 4px 4px 12px;
        justify-content: space-between;
        align-items: center;
        border-radius: 50px;
    }
    .arrow{
        background-color: var(--space800);
        width: 32px;
        height: 32px;
        padding: 4px;
        border-radius: 50%;
        justify-content: flex-end;
    }
    .arrow img{
        height: 100%;
    }
    .view-btn:hover{
        padding-left: 20px;
    }
    .view-btn:hover .arrow{
        transform: rotate(45deg);
    }
    #portfolio article{
        display: flex;
        flex-wrap: wrap;
        gap: 24px;
        justify-content: center;
    }
    /*** CONTACT ***/
    #contact{
        position: relative;
        z-index: 2;
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin: 120px 10%;
        flex-wrap: wrap;
        gap: 32px;
    }
    #contact h2{
        color: var(--neon);
        font-size: 3rem;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    #contact h2::after{
        content: '';
        position: absolute;
        height: 300px;
        width: 300px;
        background-image: url(assets/icon-hand.svg);
        background-size: cover;
        z-index: -1;
        transform: translatex(50px);
    }
    .mailme{
        width: 600px;
        background: var(--neon);
        height: 300px;
        display: flex;
        border-radius: 16px;
        overflow: hidden;
    }
    .profile-pic{
        height: 100%;
        width: 30%;
        background-image: url(assets/freakazoid.png);
        background-size: cover;
        background-position: center;
        padding: 12px;
        justify-content: center;
        align-items: self-end;
        display: flex;
    }
    .profile-pic small{
        background-color: var(--space800-80a);
        -webkit-backdrop-filter: blur(20px);
        backdrop-filter: blur(20px);
        color: var(--light);
        font-weight: 100;
        padding: 4px 8px;
        border-radius: 8px;
        text-align: center;
        width: 100%;
    }
    .sayhello{
        height: 100%;
        width: 70%;
        display: flex;
        flex-direction: column;
        text-align: center;
        padding: 16px;
        color: var(--space800);
        justify-content: space-between;
    }
    .sayhello h3{
            font-size: 1.5rem;
            margin-bottom: 16px;
    }
    .sayhello a{
        color: var(--neon);
        font-size: clamp(1rem, 1.5rem, 1.5rem);
        padding: 8px;
        border-radius: 8px;
        background-color: var(--space600);
    }
    .sayhello a:hover{
        transform: scale(1.02);
    }
    /*** TESTIMONIALS ***/
    #testimonials {
        margin: 120px 10%;
        position: relative;
        z-index: 2;
    }
    #testimonials h2{
        color: var(--neon);
        font-size: 2rem;
        text-align: center;
        margin-bottom: 16px;
    }
    #testimonials hgroup p{
        color: var(--light);
        text-align: center;
        margin: 0 20% 32px 20%;
    }
    .cards{
        display: flex;
        flex-wrap: wrap;
        gap: 24px;
        justify-content: center;
    }
    .quote{
        width: 360px;
        height: 180px;
        display: flex;
        background-color: var(--space600);
        padding: 8px;
        border-radius: 12px;
    }
    .quote img{
        height: 100%;
        width: 120px;
        object-fit: cover;
        border-radius: 4px;
    }
    .quote figcaption{
        margin-left: 12px;
    }
    .quote h4{
        color: var(--light);
        margin-bottom: 4px;
    }
    .quote p{
        color: var(--light600);
        font-weight: 200;
        font-size: 0.8rem;
        margin-bottom: 16px;
    }
    .quote blockquote{
        color: var(--light);
        font-weight: 200;
    }
    /*** FOOTER ***/
    footer{
        position: relative;
        z-index: 2;
        display: flex;
        justify-content: space-between;
        padding: 16px 5%;
        background-color: var(--space800);
        -webkit-backdrop-filter: blur(20px);
        backdrop-filter: blur(20px);
        border-top: 0.1px solid var(--neon);
        align-items: center;
        color: var(--neon);
        gap: 16px;
    }
    footer small{
        font-weight: 200;
    }
    .socials{
        display: flex;
        gap: 12px;
    }
    .socials a{
        height: 36px;
        width: 36px;
        padding: 4px;
        border-radius: 4px;
    }
    .socials img{
        height: 100%;
    }
    .socials a:hover{
        background-color: var(--space400);
    }
/*** TABLET ***/
@media screen and (max-width: 1280px) {
    /***HEADER***/
    header hgroup{
        width: 40%;
        margin-left: 5%;
    }
    header video{
        opacity: 0.5;
    }
    /***ABOUT***/
    .aboutcards li{
        height: 180px;
        width: 180px;
    }
    .aboutcards img{
        height: 160px;
    }
    /***PORTFOLIO***/
    #portfolio{
        padding: 48px 2%;
    }
    #portfolio section p{
        margin: 0 10% 32px 10%;
    }
    #portfolio blockquote{
        margin: 16px 15% 48px 15%;
        width: 80%;
    }
    /***CONTACT***/
    #contact{
        margin: 120px 5%;
        justify-content: center;
    }
    /***TESTIMONIALS***/
    #testimonials {
        margin: 120px 2%;
    }
}
/***TABLET MINI***/
@media screen and (max-width: 1000px){
    /***NAVBAR***/
    nav li span{
        display: none;
    }
    nav li figure{
        display: block;
    }
    .button p{
        display: none;
    }
    /***HEADER***/
    header hgroup{
        width: 60%;
    }
    video{
        right: 0px;
        height: 500px;
    }
    /***ABOUT***/
    #about{
        margin: 64px 1%;
    }
    /***CLIENTS***/
    .logos-cont{
        justify-content: flex-start;
    }
    .logos{
        animation: slideTablet 15s linear 0.5s infinite alternate;
    }
    @keyframes slideTablet {
        0%{
            transform: translateX(0px);
        }
        100%{
            transform: translateX(-28%);
        }
    }
    /***TESTIMONIALS***/
    #testimonials {
        margin: 80px 1%;
    }
}
/***MOBILE***/
@media screen and (max-width: 440px){
    /***NAVBAR***/
    nav ul{
        display: none;
    }
    /***HEADER***/
    header hgroup{
        width: 96%;
        margin-left: 2%;
    }
    header hgroup p{
        text-align: center;
    }
    header video{
        height: 400px;
        opacity: 0.2;
    }
    /***CLIENTS***/
    .logos{
        animation: slideMobile 15s linear 0.5s infinite alternate;
    }
    @keyframes slideMobile {
        0%{
            transform: translateX(0px);
        }
        100%{
            transform: translateX(-65%);
        }
    }
    /***ABOUT***/
    .aboutcards li{
        height: 220px;
        width: 160px;
    }
    /***PORTFOLIO***/
    .fig-container{
        width: 65%;
    }
    #portfolio section p{
        margin: 0 5% 32px 5%;
    }
    #portfolio blockquote{
        margin: 16px 10% 48px 10%;
    }
    /***CONTACT***/
    #contact{
        margin: 80px 2%;
        justify-content: center;
    }
    #contact h2::after{
        height: 200px;
        width: 200px;
    }
    .mailme{
        width: 100%;
        flex-direction: column;
        height: 500px;
    }
    .profile-pic{
        width: 100%;
        height: 40%;
    }
    .sayhello{
        width: 100%;
        height: 60%;
    }
    /***FOOTER***/
    footer{
        flex-direction: column;
    }
}