:root[data-theme="dark"]{
    --page-bg: #12121D;

    --header-text-name:var(--primary-text);

    --menu-toggle:var(--primary-text);
    --menu-toggle-content: var(--dot);
    --menu:var(--primary-text);
    --menu-a:#555;
    --menu-hover:var(--dot);

    --dot: #8000FF;

    --scrollbar-border:var(--primary-text);

    --switch-bg:var(--primary-text);
    --switch-circle-bg:var(--dot);
    --switch-circle-pos: 3.22rem;;
    --icon-sun:#515152;
    --icon-moon:var(--primary-text);

    --primary-text: #E6E6E6;

    --muted-text: #808080;

    --h3-hover:var(--dot);

    --scroll-down:var(--primary-text);

    --textarea:var(--dot);

    --Icons:var(--primary-text);
}

:root[data-theme="light"]{
    --page-bg: #E6E6E6;

    --header-text-name:var(--primary-text);

    --menu-toggle:var(--primary-text);
    --menu-toggle-content: var(--dot);
    --menu:var(--primary-text);
    --menu-a:rgb(186, 186, 186);
    --menu-hover:var(--dot);

    --dot: #8000FF;

    --scrollbar-border:var(--primary-text);

    --switch-bg:var(--primary-text);
    --switch-circle-bg:var(--dot);
    --switch-circle-pos: 0.44rem;
    --icon-sun:var(--primary-text);
    --icon-moon:#515152;

    --primary-text: #12121D;

    --muted-text: #171738;

    --h3-hover:var(--dot);

    --scroll-down:var(--primary-text);

    --textarea:var(--dot);

    --Icons:var(--primary-text);
}

:root{
    --heading-font: "Bebas Neue",sans-serif;
    --font:"Exo",sans-serif;
    --primary-text-heading-weight:700;
    --primary-text-weight:500;
    --muted-text-weight:300;
    --default-transition: color .5s ease-in-out, background-color .5s ease-in-out, border-color .5s ease-in-out, fill .5s 
    ease-in-out, transform .5s ease-in-out;
}

*{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    cursor: none;
}

html{
    scroll-behavior: smooth;
}

body{
    background:var(--page-bg);
    font-family: var(--heading-font);
}


@media screen and (min-width: 1025px){

    ::-moz-selection { 
        color: var(--primary-text);
        background: var(--dot);
    }
      
    ::selection {
        color:var(--primary-text);
        background:var(--dot);
    }

    .navigation{
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .menuToggle{
        top: 20px;
        position: fixed;
        width: 40px;
        height: 40px;
        background:var(--menu-toggle);
        border-radius: 50px;
        cursor: none;
        display: flex;
        justify-content: center;
        align-items: center;
        font-family: var(--default-font);
        box-shadow: 0 2px 4px 0 rgba(0,0,0,0.4);
        z-index: 1;
    }

    .menuToggle::before{
        content: ' + ';
        position: absolute;
        font-size: 30px;
        font-weight: 700;
        color:var(--menu-hover);
        transition: 1.5s;
    }

    .menuToggle.active::before{
        transform: rotate(225deg);
    }

    .menu{
        top: 20px;
        position: fixed;
        width: 30px;
        height: 30px;
        background:var(--menu);
        border-radius: 70px;
        z-index: -1;
        transition: transform 0.5s, width 0.5s, height 0.5s;
        transition-delay: 1s, 0.5s, 0.5s ;
        transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
        box-shadow: 0 2px 4px 0 rgba(0,0,0,0.4);
    }

    .menuToggle.active ~ .menu{
        width: 240px;
        height: 40px;
        z-index: 1;
        transform: translateY(50px);
        transition-delay: 0s, 0.5s, 0.5s ;
    }

    .menu::before{
        content: '';
        position: absolute;
        width: 16px;
        height: 16px;
        background:var(--menu);
        left: calc(50% - 8px);
        top: 4px;
        transform: rotate(45deg);
        border-radius: 2px;
        transition: 0.5s;
    }

    .menuToggle.active ~ .menu::before{
        transition-delay: 0.5s ;
        top: -6px
    }

    .menu ul{
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 50px;
        gap: 25px;
    }

    .menu ul li{
        list-style: none;
        cursor: none;
        opacity: 0;
        visibility: hidden;
        transform: translateY(-30px);
        transition: 0.25s;
        transition-delay: calc(0s + var(--i));
    }

    .menuToggle.active ~ .menu ul li{
        opacity: 1;
        visibility: visible;
        transform: translateY(0px);
        transition-delay: calc(0.75s + var(--i));
    }

    .menu ul li a{
        display: block;
        font-size: 2em;
        text-decoration: none;
        color:var(--menu-a);
    }

    .menu ul li:hover a{
        color:var(--menu-hover);
    }

    .holder{
        position: relative;
        width: 100%;
        height: 100vh;
        display: grid;
        grid-template-columns: repeat(50, 60px);
        grid-template-rows: repeat(50, 60px);  
        overflow: hidden;   
        z-index: -100;
    }

    .dot{
        width: 1.5px;
        height: 1.5px;
        background-color:var(--dot);
        animation-name: moveDots;
        animation-duration: 1s;
        animation-iteration-count: infinite;
        animation-direction: alternate-reverse;
        z-index: -100;
    }

    /* @keyframes moveDots {
        0%{
            transform: translate(0,0);
        }
        100%{
            transform: translate(5px,5px);
        }
    } */

    #theme-switcher{
        position: absolute;
        padding: 0.66rem;
        top: 20px;
        right: 10px;
        background:var(--switch-bg);
        border-radius: 50px;
        display: flex;
        align-items: center;
        gap: 1.33rem;
        cursor: none;
        transition: var(--default-transition);
    }

    #theme-switcher::before{
        content: '';
        position: absolute;
        width: 2.22rem;
        height: 2.22rem;
        background-color:var(--switch-circle-bg);
        border-radius: 50px;
        z-index: 0;
        left: 0;
        transform: translateX(var(--switch-circle-pos));
        transition: var(--default-transition);
    }

    #theme-switcher svg{
        z-index: 1;
        transition: var(--default-transition);
    }

    #icon-sun{
        fill:var(--icon-sun);
    }

    #icon-moon{
        fill:var(--icon-moon);
    }

    .hidden1{
        opacity: 0;
        filter: blur(5px);
        transform: translateX(200%);
        transition: all 1.5s ease-in-out;
    }

    .show1{
        opacity: 1;
        filter: blur(0);
        transform: translateX(0);
    }

    .hidden {
        opacity:0;
        filter: blur(5px);
        transform: translateX(-100%);
        transition: all 1.5s ease-in-out;
    }

    .show {
        opacity: 1;
        filter: blur(0);
        transform: translateX(0);
    }

    .card:nth-child(2){
        transition-delay: 200ms;
    }
    .card:nth-child(3){
        transition-delay: 400ms;
    }
    .card:nth-child(4){
        transition-delay: 600ms;
    }

    .card1:nth-child(2){
        transition-delay: 200ms;
    }
    .card1:nth-child(3){
        transition-delay: 400ms;
    }
    .card1:nth-child(4){
        transition-delay: 600ms;
    }

    ::-webkit-scrollbar{
        width: 15px;
        border-radius: 5px;
        border:2px solid;
        border-color: #8000FF;
    }

    ::-webkit-scrollbar-thumb{
        background-color: #8000FF;
        border-radius: 5px;
        border: 2px solid;
        border-color:var(--scrollbar-border);
    }

    .h3{
        font-family: var(--default-font);
        color:var(--header-text-name);
        font-size: 2em;
        position: absolute;
        left: 5px;
        top:16px;
    }
    

    .line p{
        color:var(--primary-text);
        font-size: 6.5vw;
        margin:0rem;
        text-transform: uppercase;

    }

    .section1 {
        position: absolute;
        display: flex;
        top: 50px;
        padding-top: 40px;
        padding-left: 30%;
        justify-content: space-between;
    }

    .line {
        display: flex;
        justify-content: space-between;
    }

    #text:has(.fancy:hover) .word:not(.fancy:hover){
        opacity: 0.2;
        transition: all 0.4s ease-out;
    }

    .fancy > .letter {
        display: inline-block;
        transition: transform 350ms ease;
    }

    .fancy:hover > .letter {
        transition-duration: 800ms;
        color:var(--h3-hover);
    }

    .fancy:hover > .letter:nth-child(1){
        transform: translate(-80%,60%) rotate(8deg);
    }
    .fancy:hover > .letter:nth-child(2){
        transform: translate(-40%,20%) rotate(4deg);
    }
    .fancy:hover > .letter:nth-child(3){
        transform: translate(-10%,60%) rotate(-6deg);
    }
    .fancy:hover > .letter:nth-child(4){
        transform: translate(0%,8%) rotate(-8deg);
    }
    .fancy:hover > .letter:nth-child(5){
        transform: translate(0%,-20%) rotate(5deg);
    }
    .fancy:hover > .letter:nth-child(6){
        transform: translate(0%,20%) rotate(-3deg);
    }
    .fancy:hover > .letter:nth-child(7){
        transform: translate(0%,-40%) rotate(-5deg);
    }
    .fancy:hover > .letter:nth-child(8){
        transform: translate(0%,15%) rotate(10deg);
    }
    .fancy:hover > .letter:nth-child(9){
        transform: translate(0%,-50%) rotate(8deg);
    }

    .contentsection2{
        display: flex;
        justify-content: center;
        text-align: center;
        align-items: center;
    }

    .contentsection2 h1{
        color:var(--primary-text);
        text-transform: uppercase;
        font-size: 7vw;
        padding-top: 80px;
    }

    .container1{
        position: relative;
        max-width: 100%;
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(300px,1fr));
        grid-template-rows: minmax(100px, auto);
        margin: 40px;
        grid-auto-flow: dense;
        grid-gap: 10px;
    }

    .container1 .box{
        padding: 20px;
        display: grid;
        font-size: 20px;
        place-items: center;
        text-align: center;
        color:var(--primary-text);
        border: 2px solid;
        border-color: #8000FF;
        border-radius: 5px;
        transition: 0.5s;
        font-family: var(--font);
        font-weight: var(--primary-text-weight);
        text-decoration: none;
    }

    .container1 .box:hover{
        background: #8000FF;
        box-shadow:  0 2px 4px 0 rgba(0,0,0,0.4);

    }

    .container1 .box img{
        position: relative;
        max-width: 100px;
        margin-bottom: 10px;
        text-decoration: none;
    }

    /* input[type="Download-CV"]{
        font-weight: var(--primary-text-weight);
        font-family: var(--font);
        padding-top: 5px;
        width: 60%;
        text-align: center;
        border:2px solid;
        border-color: #8000FF;
        padding: 5px;
        cursor: none;
        background: #8000FF;
        color: var(--page-bg);
        font-size: 18px;
        border-radius: 5px;
    }

    input[type="Download-CV"]:hover{
        color: #8000FF;
        background-color: var(--page-bg);
        border-color: #8000FF;
        transition: all 0.5s ease-out;
    } */

    .container1 .box:nth-child(1){
        grid-column: span 2;
    }
    .container1 .box:nth-child(2){
        grid-column: span 1;
        grid-row: span 2;
    }
    .container1 .box:nth-child(4){
        grid-column: span 1;
        grid-row: span 2;
    }

    .scroll-down{
        height: 50px;
        width: 30px;
        border: 2px solid var(--scroll-down);
        position: relative;
        left: 65%;
        bottom: -250px;
        border-radius: 50px;
        cursor: none;
    }

    .scroll-down::before,
    .scroll-down::after{
        content: '';
        position: absolute;
        top:20%;
        left:50%;
        border: 2px solid #8000FF;
        height: 10px;
        width: 10px;
        transform: translate(-50%,-100%) rotate(45deg);
        border-top: transparent;
        border-left: transparent;
        animation: scroll-down 1s ease-out infinite ;
    }

    .scroll-down::after{
        top:30%;
        animation-delay: .3s;
    }

    @keyframes scroll-down {
        0%{
            opacity: 0;
        }
        30%{
            opacity: 1;
        }
        60%{
            opacity: 1;
        }
        100%{
            opacity: 0;
            top: 90%;
        }
    }   

    .inner-cursor{
        position: fixed;
        left: 10px;
        width: 10px;
        height: 10px;
        transform: translate(-50%,-50%);
        background-color: #8000FF;
        mix-blend-mode: difference;
        border-radius: 50%;
        pointer-events: none;
        transition: width 0.5s, height 0.5s;
        z-index: 4;
    }

    .inner-cursor.grow {
        width: 25px;
        height: 25px;
        transition: width 0.5s, height 0.5s;
    }

    .outer-cursor {
        position: fixed;
        left: 10px;
        width: 25px;
        height: 25px;
        transform: translate(-50%,-50%);
        border: 1px solid #8000FF;
        mix-blend-mode: difference;
        border-radius: 50%;
        pointer-events: none;
        transition: 0.1s;
        z-index: 4;
    }

    #Icons{
        fill: var(--Icons);
    }

    .contentsection3{
        display: absolute;
        justify-content: center;
        text-align: center;
        align-items: center;
    }

    .contentsection3 h1{
        color:var(--primary-text);
        text-transform: uppercase;
        font-size: 7vw;
        font-family: var(--heading-font);
        padding-top: 80px;
    }

    .container5{
        margin: 20px auto;
        padding: 40px;
        width: 100%;
        font-family: var(--font);
        font-weight: var(--primary-text-weight);
    }

    .container5 ul{
        display: grid;
        grid-auto-flow: column;
        flex-flow: row wrap;
        padding: 20px;
        max-width: 100%;
        justify-content: center;
        align-items: center;
        align-content: center;
    }

    .container5 ul li{
        list-style: none;
        background: var(--page-bg);
        color: var(--primary-text);
        border: 2px solid;
        border-color: var(--dot);
        border-radius: 20px;
        padding: 8px 20px;
        margin: 5px;
        letter-spacing: 1px;
        cursor: none;
    }

    .container5 ul li.active{
        background-color: var(--dot);
        color: var(--page-bg);
        transition: 0.5s ease-out;
    }

    .container2{
        position: relative;
        max-width: 100%;
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(300px,1fr));
        grid-template-rows: minmax(100px, auto);
        margin: 40px;
        grid-auto-flow: dense;
        grid-gap: 10px;
    }

    .container2 .box1{
        padding: 20px;
        display: grid;
        font-size: 20px;
        place-items: center;
        text-align: center;
        color:var(--primary-text);
        border: 2px solid;
        border-color: #8000FF;
        border-radius: 5px;
        transition: 0.5s;
        text-decoration: none;
    }

    .container2 .box1:hover{
        background: #8000FF;
        box-shadow:  0 2px 4px 0 rgba(0,0,0,0.4);

    }

    .container2 .box1 img{
        border-radius: 10px;
        position: relative;
        max-width: 100%;
        /* margin-bottom: 10px; */
        text-decoration: none;
    }

    .container2 .box1 p{
        padding-left: 10px;
        display: grid;
        font-size: 25px;
        place-items: left;
        text-align: left;
        color:var(--primary-text);
        font-family: var(--font);
        font-weight: var(--primary-text-heading-weight);
    }

    .container2 .box1 p1{
        padding: 10px;
        display: grid;
        font-size: 18px;
        font-weight: var(--muted-text-weight);
        place-items: left;
        text-align: left;
        color:var(--muted-text);
        font-family: var(--font);
    }

    .container2 .box:nth-child(1){
        grid-column: span 1;
    }
    .container2 .box:nth-child(2){
        grid-column: span 1;
        grid-row: span 1;
    }
    .container2 .box:nth-child(3){
        grid-column: span 1.5;
        grid-row: span 1;
    }
    .container2 .box:nth-child(4){
        grid-column: span 2;
        grid-row: span 1;
    }
    .container2 .box:nth-child(5){
        grid-column: span 1;
        grid-row: span 1;
    }
    .container2 .box:nth-child(9){
        grid-column: span 1;
        grid-row: span 1;
    }
    .container2 .box:nth-child(8){
        grid-column: span 2;
        grid-row: span 1;
    }

    .contentsection4{
        display: absolute;
        justify-content: center;
        text-align: center;
        align-items: center;
    }

    .contentsection4 h1{
        color:var(--primary-text);
        text-transform: uppercase;
        font-size: 7vw;
        padding-top: 80px;
        font-family: var(--heading-font);
    }

    .contentsection4 p{
        color:var(--primary-text);
        font-size: 2vw;
        padding: 40px;
        font-weight: var(--primary-text-weight);
        font-family: var(--font);
        font-style: italic;

    }

    .float-container{
        padding: 20px;
    }

    .float-child{
        width:50%;
        float: left;
        padding: 20px;
    }

    .form{
        display: flex;
        justify-content: center;
        align-items:center ;
        
    }

    .container{
        width: 100%;
        padding: 20px;
        font-family: var(--font);
        font-weight: var(--primary-text-heading-weight);
    }

    .container .row100{
        position: relative;
        width: 100%;
        display: grid;
        grid-template-columns: repeat(auto-fit,minimax(300px,1fr));
    }

    .container .row100 .col{
        position: relative;
        width: 100%;
        padding: 0 10px;
        margin: 30px 0 10px;
        transition: 0.5s;
    }

    .container .row100 .inputBox{
        position: relative;
        width: 100%;
        height: 40px;
        color:#8000FF;
    }

    .container .row100 .inputBox input
    {
        position: absolute;
        width: 100%;
        height: 100px;
        background: transparent;
        box-shadow: none;
        border: none;
        outline: none;
        font-size: 18px;
        padding: 0 10px;
        top: -30px;
        z-index: 1;
        color: var(--primary-text);
    }

    .container .row100 .inputBox.textarea textarea
    {
        position: absolute;
        width: 100%;
        height: 100px;
        background: transparent;
        box-shadow: none;
        border: none;
        outline: none;
        font-size: 18px;
        padding: 0 10px;
        z-index: 1;
        color: var(--primary-text);
    }

    .container .row100 .inputBox .text{
        position: absolute;
        top: 0;
        left: 0;
        line-height: 40px;
        font-size: 18px;
        padding: 0 10px;
        display: block;
        transition: 0.5s;
        pointer-events: none;
    }

    .container .row100 .inputBox input:focus + .text,
    .container .row100 .inputBox input:valid + .text{
        top: -35px;
        left: -10px;
    }

    .container .row100 .inputBox .line{
        position: absolute;
        bottom: 0;
        display: block;
        width: 100%;
        height: 2px;
        background: #8000FF;
        transition: 0.5s;
        border-radius: 5px;
        pointer-events: none;
    }

    .container .row100 .inputBox input:focus ~ .line,
    .container .row100 .inputBox input:valid ~ .line{
        height: 100%;
    }

    .container .row100 .inputBox.textarea{
        position: relative;
        width: 100%;
        height: 100px;
        padding: 10px 0;
    }

    .container .row100 .inputBox.textarea textarea{
        height: 100%;
        resize: none;
    }

    .container .row100 .inputBox textarea:focus + .text,
    .container .row100 .inputBox textarea:valid + .text{
        top: -35px;
        left: -10px;
    }

    .container .row100 .inputBox textarea:focus ~ .line,
    .container .row100 .inputBox textarea:valid ~ .line{
        height: 100%;
    }

    input[type="submit"]{
        font-family: var(--font);
        border:2px solid;
        border-color: #8000FF;
        padding: 7px 35px;
        cursor: none;
        background: #8000FF;
        color: var(--primary-text);
        font-size: 18px;
        border-radius: 5px;
    }

    input[type="submit"]:hover{
        color: var(--dot);
        background-color: var(--page-bg);
        border-color: var(--dot);
        transition: all 0.5s ease-out;
    }

    .container4{
        position: relative;
        max-width: 100%;
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(200px,1fr));
        grid-template-rows: minmax(50px, auto);
        margin: 40px;
        grid-auto-flow: dense;
        grid-gap: 10px;
    }

    .container4 .box{
        padding: 20px;
        display: grid;
        font-size: 20px;
        place-items: center;
        text-align: center;
        color:var(--primary-text);
        border: 2px solid;
        border-color: #8000FF;
        border-radius: 5px;
        transition: 0.5s;
        font-family: var(--font);
        font-weight: var(--muted-text-weight);
        text-decoration: none;
    }

    .container4 .box:hover{
        background: #8000FF;
        box-shadow:  0 2px 4px 0 rgba(0,0,0,0.4);

    }

    .container4 .box img{
        border-radius: 10px;
        position: relative;
        max-width: 100px;
        margin-bottom: 10px;
        text-decoration: none;
    }

    .container4 .box p{
        padding-left: 10px;
        display: grid;
        font-size: 25px;
        place-items: left;
        text-align: left;
        color:var(--primary-text);
    }

    footer{
        font-size: 3vh;
        display: grid;
        flex-flow: row wrap;
        align-items: center;
        text-align: center;
        max-width: 100%;
        align-content: center;
        padding: 50px;
        color: var(--primary-text);
        background: var(--dot);
    }

    footer p{
        text-align: center;
        padding: 20px;
    }

    footer ul{
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 50px;
        gap: 25px;
    }

    footer ul li{
        list-style: none;
        cursor: none;
        transition: 0.25s;
    }

    footer ul li a{
        text-decoration: none;
        color: var(--primary-text);
    }

    footer ul li a:hover{
        color: var(--page-bg);
        transition: 0.2s;
    }
}

@media screen and (min-width: 103px) and (max-width:539px) {


    ::-moz-selection { 
        color: var(--primary-text);
        background: var(--dot);
    }
      
    ::selection {
        color:var(--primary-text);
        background:var(--dot);
    }

    .navigation{
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .menuToggle{
        top: 20px;
        position: fixed;
        width: 40px;
        height: 40px;
        background:var(--menu-toggle);
        border-radius: 50px;
        cursor: none;
        display: flex;
        justify-content: center;
        align-items: center;
        font-family: var(--default-font);
        box-shadow: 0 2px 4px 0 rgba(0,0,0,0.4);
        z-index: 1;
    }

    .menuToggle::before{
        content: ' + ';
        position: absolute;
        font-size: 30px;
        font-weight: 700;
        color:var(--menu-hover);
        transition: 1.5s;
    }

    .menuToggle.active::before{
        transform: rotate(225deg);
    }

    .menu{
        top: 20px;
        position: fixed;
        width: 30px;
        height: 30px;
        background:var(--menu);
        border-radius: 70px;
        z-index: -1;
        transition: transform 0.5s, width 0.5s, height 0.5s;
        transition-delay: 1s, 0.5s, 0.5s ;
        transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
        box-shadow: 0 2px 4px 0 rgba(0,0,0,0.4);
    }

    .menuToggle.active ~ .menu{
        width: 240px;
        height: 40px;
        z-index: 1;
        transform: translateY(50px);
        transition-delay: 0s, 0.5s, 0.5s ;
    }

    .menu::before{
        content: '';
        position: absolute;
        width: 16px;
        height: 16px;
        background:var(--menu);
        left: calc(50% - 8px);
        top: 4px;
        transform: rotate(45deg);
        border-radius: 2px;
        transition: 0.5s;
    }

    .menuToggle.active ~ .menu::before{
        transition-delay: 0.5s ;
        top: -6px
    }

    .menu ul{
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 50px;
        gap: 25px;
    }

    .menu ul li{
        list-style: none;
        cursor: none;
        opacity: 0;
        visibility: hidden;
        transform: translateY(-30px);
        transition: 0.25s;
        transition-delay: calc(0s + var(--i));
    }

    .menuToggle.active ~ .menu ul li{
        opacity: 1;
        visibility: visible;
        transform: translateY(0px);
        transition-delay: calc(0.75s + var(--i));
    }

    .menu ul li a{
        display: block;
        font-size: 2em;
        text-decoration: none;
        color:var(--menu-a);
    }

    .menu ul li:hover a{
        color:var(--menu-hover);
    }

    .holder{
        position: relative;
        width: 100%;
        height: 100vh;
        display: grid;
        grid-template-columns: repeat(50, 60px);
        grid-template-rows: repeat(50, 60px);  
        overflow: hidden;   
        z-index: -100;
    }

    .dot{
        width: 1.5px;
        height: 1.5px;
        background-color:var(--dot);
        animation-name: moveDots;
        animation-duration: 1s;
        animation-iteration-count: infinite;
        animation-direction: alternate-reverse;
        z-index: -100;
    }

    /* @keyframes moveDots {
        0%{
            transform: translate(0,0);
        }
        100%{
            transform: translate(5px,5px);
        }
    } */

    #theme-switcher{
        position: absolute;
        padding: 0.66rem;
        top: 20px;
        right: 10px;
        background:var(--switch-bg);
        border-radius: 50px;
        display: flex;
        align-items: center;
        gap: 1.33rem;
        cursor: none;
        transition: var(--default-transition);
    }

    #theme-switcher::before{
        content: '';
        position: absolute;
        width: 2.22rem;
        height: 2.22rem;
        background-color:var(--switch-circle-bg);
        border-radius: 50px;
        z-index: 0;
        left: 0;
        transform: translateX(var(--switch-circle-pos));
        transition: var(--default-transition);
    }

    #theme-switcher svg{
        z-index: 1;
        transition: var(--default-transition);
    }

    #icon-sun{
        fill:var(--icon-sun);
    }

    #icon-moon{
        fill:var(--icon-moon);
    }

    .hidden1{
        opacity: 0;
        filter: blur(5px);
        transform: translateX(200%);
        transition: all 1.5s ease-in-out;
    }

    .show1{
        opacity: 1;
        filter: blur(0);
        transform: translateX(0);
    }

    .hidden {
        opacity:0;
        filter: blur(5px);
        transform: translateX(-100%);
        transition: all 1.5s ease-in-out;
    }

    .show {
        opacity: 1;
        filter: blur(0);
        transform: translateX(0);
    }

    .card:nth-child(2){
        transition-delay: 200ms;
    }
    .card:nth-child(3){
        transition-delay: 400ms;
    }
    .card:nth-child(4){
        transition-delay: 600ms;
    }

    .card1:nth-child(2){
        transition-delay: 200ms;
    }
    .card1:nth-child(3){
        transition-delay: 400ms;
    }
    .card1:nth-child(4){
        transition-delay: 600ms;
    }

    ::-webkit-scrollbar{
        width: 15px;
        border-radius: 5px;
        border:2px solid;
        border-color: #8000FF;
    }

    ::-webkit-scrollbar-thumb{
        background-color: #8000FF;
        border-radius: 5px;
        border: 2px solid;
        border-color:var(--scrollbar-border);
    }

    .h3{
        font-family: var(--default-font);
        color:var(--header-text-name);
        font-size: 2em;
        position: absolute;
        left: 5px;
        top:16px;
    }
    

    .line p{
        color:var(--primary-text);
        font-size: 3.5em;
        margin:0rem;
        text-transform: uppercase;

    }

    .section1 {
        position: absolute;
        display: flex;
        top: 150px;
        padding-top: 40px;
        padding-left: 7%;
        justify-content: space-between;
    }

    .line {
        display: flex;
        justify-content: space-between;
    }

    #text:has(.fancy:hover) .word:not(.fancy:hover){
        opacity: 0.2;
        transition: all 0.4s ease-out;
    }

    .fancy > .letter {
        display: inline-block;
        transition: transform 350ms ease;
    }

    .fancy:hover > .letter {
        transition-duration: 800ms;
        color:var(--h3-hover);
    }

    .fancy:hover > .letter:nth-child(1){
        transform: translate(-80%,60%) rotate(8deg);
    }
    .fancy:hover > .letter:nth-child(2){
        transform: translate(-40%,20%) rotate(4deg);
    }
    .fancy:hover > .letter:nth-child(3){
        transform: translate(-10%,60%) rotate(-6deg);
    }
    .fancy:hover > .letter:nth-child(4){
        transform: translate(0%,8%) rotate(-8deg);
    }
    .fancy:hover > .letter:nth-child(5){
        transform: translate(0%,-20%) rotate(5deg);
    }
    .fancy:hover > .letter:nth-child(6){
        transform: translate(0%,20%) rotate(-3deg);
    }
    .fancy:hover > .letter:nth-child(7){
        transform: translate(0%,-40%) rotate(-5deg);
    }
    .fancy:hover > .letter:nth-child(8){
        transform: translate(0%,15%) rotate(10deg);
    }
    .fancy:hover > .letter:nth-child(9){
        transform: translate(0%,-50%) rotate(8deg);
    }

    .contentsection2{
        display: flex;
        justify-content: center;
        text-align: center;
        align-items: center;
    }

    .contentsection2 h1{
        color:var(--primary-text);
        text-transform: uppercase;
        font-size: 3.5rem;
        padding-top: 80px;
    }

    .container1{
        position: relative;
        max-width: 100%;
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(300px,1fr));
        grid-template-rows: minmax(100px, auto);
        margin: 40px;
        grid-auto-flow: dense;
        grid-gap: 10px;
    }

    .container1 .box{
        padding: 20px;
        display: grid;
        font-size: 20px;
        place-items: center;
        text-align: center;
        color:var(--primary-text);
        border: 2px solid;
        border-color: #8000FF;
        border-radius: 5px;
        transition: 0.5s;
        font-family: var(--font);
        font-weight: var(--primary-text-weight);
        text-decoration: none;
    }

    .container1 .box:hover{
        background: #8000FF;
        box-shadow:  0 2px 4px 0 rgba(0,0,0,0.4);

    }

    .container1 .box img{
        position: relative;
        max-width: 100px;
        margin-bottom: 10px;
        text-decoration: none;
    }

    /* input[type="Download-CV"]{
        font-weight: var(--primary-text-weight);
        font-family: var(--font);
        padding-top: 5px;
        width: 60%;
        text-align: center;
        border:2px solid;
        border-color: #8000FF;
        padding: 5px;
        cursor: none;
        background: #8000FF;
        color: var(--page-bg);
        font-size: 18px;
        border-radius: 5px;
    }

    input[type="Download-CV"]:hover{
        color: #8000FF;
        background-color: var(--page-bg);
        border-color: #8000FF;
        transition: all 0.5s ease-out;
    } */

    .scroll-down{
        height: 40px;
        width: 20px;
        border: 2px solid var(--scroll-down);
        position: relative;
        left: 65%;
        bottom: -250px;
        border-radius: 50px;
        cursor: none;
    }

    .scroll-down::before,
    .scroll-down::after{
        content: '';
        position: absolute;
        top:20%;
        left:50%;
        border: 2px solid #8000FF;
        height: 10px;
        width: 10px;
        transform: translate(-50%,-100%) rotate(45deg);
        border-top: transparent;
        border-left: transparent;
        animation: scroll-down 1s ease-out infinite ;
    }

    .scroll-down::after{
        top:30%;
        animation-delay: .3s;
    }

    @keyframes scroll-down {
        0%{
            opacity: 0;
        }
        30%{
            opacity: 1;
        }
        60%{
            opacity: 1;
        }
        100%{
            opacity: 0;
            top: 90%;
        }
    }   

    .inner-cursor{
        position: fixed;
        left: 10px;
        width: 10px;
        height: 10px;
        transform: translate(-50%,-50%);
        background-color: #8000FF;
        mix-blend-mode: difference;
        border-radius: 50%;
        pointer-events: none;
        transition: width 0.5s, height 0.5s;
        z-index: 4;
        opacity: 0;
    }

    .inner-cursor.grow {
        width: 25px;
        height: 25px;
        transition: width 0.5s, height 0.5s;
        opacity: 0;
    }

    .outer-cursor {
        position: fixed;
        left: 10px;
        width: 25px;
        height: 25px;
        transform: translate(-50%,-50%);
        border: 1px solid #8000FF;
        mix-blend-mode: difference;
        border-radius: 50%;
        pointer-events: none;
        transition: 0.1s;
        z-index: 4;
        opacity: 0;
    }

    #Icons{
        fill: var(--Icons);
    }

    .contentsection3{
        display: absolute;
        justify-content: center;
        text-align: center;
        align-items: center;
    }

    .contentsection3 h1{
        color:var(--primary-text);
        text-transform: uppercase;
        font-size: 4.5em;
        font-family: var(--heading-font);
        padding-top: 80px;
    }

    .container5{
        margin: 10px auto;
        padding: 20px;
        width: 100%;
        font-family: var(--font);
        font-weight: var(--primary-text-weight);
    }

    .container5 ul{
        display: grid;
        grid-auto-flow: column;
        flex-flow: row wrap;
        padding: 20px;
        max-width: 100%;
        justify-content: center;
        align-items: center;
        align-content: center;
    }

    .container5 ul li{
        list-style: none;
        background: var(--page-bg);
        color: var(--primary-text);
        border: 2px solid;
        border-color: var(--dot);
        border-radius: 10px;
        padding: 5px 10px;
        margin: 5px;
        letter-spacing: 0px;
        cursor: none;
    }

    .container5 ul li.active{
        background-color: var(--dot);
        color: var(--page-bg);
        transition: 0.5s ease-out;
    }

    .container2{
        position: relative;
        max-width: 100%;
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(300px,1fr));
        grid-template-rows: minmax(100px, auto);
        margin: 40px;
        grid-auto-flow: dense;
        grid-gap: 10px;
    }

    .container2 .box1{
        padding: 20px;
        display: grid;
        font-size: 20px;
        place-items: center;
        text-align: center;
        color:var(--primary-text);
        border: 2px solid;
        border-color: #8000FF;
        border-radius: 5px;
        transition: 0.5s;
        text-decoration: none;
    }

    .container2 .box1:hover{
        background: #8000FF;
        box-shadow:  0 2px 4px 0 rgba(0,0,0,0.4);

    }

    .container2 .box1 img{
        border-radius: 10px;
        position: relative;
        max-width: 100%;
        /* margin-bottom: 10px; */
        text-decoration: none;
    }

    .container2 .box1 p{
        padding-left: 10px;
        display: grid;
        font-size: 25px;
        place-items: left;
        text-align: left;
        color:var(--primary-text);
        font-family: var(--font);
        font-weight: var(--primary-text-heading-weight);
    }

    .container2 .box1 p1{
        padding: 10px;
        display: grid;
        font-size: 18px;
        font-weight: var(--muted-text-weight);
        place-items: left;
        text-align: left;
        color:var(--muted-text);
        font-family: var(--font);
    }

    .contentsection4{
        display: absolute;
        justify-content: center;
        text-align: center;
        align-items: center;
    }

    .contentsection4 h1{
        color:var(--primary-text);
        text-transform: uppercase;
        font-size: 5em;
        padding-top: 80px;
        font-family: var(--heading-font);
    }

    .contentsection4 p{
        color:var(--primary-text);
        font-size: 2em;
        padding: 40px;
        font-weight: var(--primary-text-weight);
        font-family: var(--font);
        font-style: italic;

    }

    .float-container{
        padding: 10px;
    }

    .float-child{
        width:100%;
        float: left;
        padding: 20px;
    }

    .form{
        display: flex;
        justify-content: center;
        align-items:center ;
        
    }

    .container{
        width: 100%;
        padding: 20px;
        font-family: var(--font);
        font-weight: var(--primary-text-heading-weight);
    }

    .container .row100{
        position: relative;
        width: 100%;
        display: grid;
        grid-template-columns: repeat(auto-fit,minimax(300px,1fr));
    }

    .container .row100 .col{
        position: relative;
        width: 100%;
        padding: 0 10px;
        margin: 30px 0 10px;
        transition: 0.5s;
    }

    .container .row100 .inputBox{
        position: relative;
        width: 100%;
        height: 40px;
        color:#8000FF;
    }

    .container .row100 .inputBox input
    {
        position: absolute;
        width: 100%;
        height: 100px;
        background: transparent;
        box-shadow: none;
        border: none;
        outline: none;
        font-size: 18px;
        padding: 0 10px;
        top: -30px;
        z-index: 1;
        color: var(--primary-text);
    }

    .container .row100 .inputBox.textarea textarea
    {
        position: absolute;
        width: 100%;
        height: 100px;
        background: transparent;
        box-shadow: none;
        border: none;
        outline: none;
        font-size: 18px;
        padding: 0 10px;
        z-index: 1;
        color: var(--primary-text);
    }

    .container .row100 .inputBox .text{
        position: absolute;
        top: 0;
        left: 0;
        line-height: 40px;
        font-size: 18px;
        padding: 0 10px;
        display: block;
        transition: 0.5s;
        pointer-events: none;
    }

    .container .row100 .inputBox input:focus + .text,
    .container .row100 .inputBox input:valid + .text{
        top: -35px;
        left: -10px;
    }

    .container .row100 .inputBox .line{
        position: absolute;
        bottom: 0;
        display: block;
        width: 100%;
        height: 2px;
        background: #8000FF;
        transition: 0.5s;
        border-radius: 5px;
        pointer-events: none;
    }

    .container .row100 .inputBox input:focus ~ .line,
    .container .row100 .inputBox input:valid ~ .line{
        height: 100%;
    }

    .container .row100 .inputBox.textarea{
        position: relative;
        width: 100%;
        height: 100px;
        padding: 10px 0;
    }

    .container .row100 .inputBox.textarea textarea{
        height: 100%;
        resize: none;
    }

    .container .row100 .inputBox textarea:focus + .text,
    .container .row100 .inputBox textarea:valid + .text{
        top: -35px;
        left: -10px;
    }

    .container .row100 .inputBox textarea:focus ~ .line,
    .container .row100 .inputBox textarea:valid ~ .line{
        height: 100%;
    }

    input[type="submit"]{
        font-family: var(--font);
        border:2px solid;
        border-color: #8000FF;
        padding: 7px 35px;
        cursor: none;
        background: #8000FF;
        color: var(--primary-text);
        font-size: 18px;
        border-radius: 5px;
    }

    input[type="submit"]:hover{
        color: var(--dot);
        background-color: var(--page-bg);
        border-color: var(--dot);
        transition: all 0.5s ease-out;
    }

    .container4{
        position: relative;
        max-width: 100%;
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(200px,1fr));
        grid-template-rows: minmax(50px, auto);
        margin: 40px;
        grid-auto-flow: dense;
        grid-gap: 10px;
    }

    .container4 .box{
        padding: 20px;
        display: grid;
        font-size: 20px;
        place-items: center;
        text-align: center;
        color:var(--primary-text);
        border: 2px solid;
        border-color: #8000FF;
        border-radius: 5px;
        transition: 0.5s;
        font-family: var(--font);
        font-weight: var(--muted-text-weight);
        text-decoration: none;
    }

    .container4 .box:hover{
        background: #8000FF;
        box-shadow:  0 2px 4px 0 rgba(0,0,0,0.4);

    }

    .container4 .box img{
        border-radius: 10px;
        position: relative;
        max-width: 100px;
        margin-bottom: 10px;
        text-decoration: none;
    }

    .container4 .box p{
        padding-left: 10px;
        display: grid;
        font-size: 25px;
        place-items: left;
        text-align: left;
        color:var(--primary-text);
    }

    footer{
        font-size: 17px;
        display: grid;
        flex-flow: row wrap;
        align-items: center;
        text-align: center;
        max-width: 100%;
        align-content: center;
        padding: 30px;
        color: var(--primary-text);
        background: var(--dot);
    }

    footer p{
        text-align: center;
        padding: 0px;
    }

    footer ul{
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 50px;
        gap: 15px;
    }

    footer ul li{
        list-style: none;
        cursor: none;
        transition: 0.25s;
    }

    footer ul li a{
        text-decoration: none;
        color: var(--primary-text);
    }

    footer ul li a:hover{
        color: var(--page-bg);
        transition: 0.2s;
    }
}

@media screen and (min-width: 540px) and (max-width:1025px){

    ::-moz-selection { 
        color: var(--primary-text);
        background: var(--dot);
    }
      
    ::selection {
        color:var(--primary-text);
        background:var(--dot);
    }

    .navigation{
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .menuToggle{
        top: 20px;
        position: fixed;
        width: 40px;
        height: 40px;
        background:var(--menu-toggle);
        border-radius: 50px;
        cursor: none;
        display: flex;
        justify-content: center;
        align-items: center;
        font-family: var(--default-font);
        box-shadow: 0 2px 4px 0 rgba(0,0,0,0.4);
        z-index: 1;
    }

    .menuToggle::before{
        content: ' + ';
        position: absolute;
        font-size: 30px;
        font-weight: 700;
        color:var(--menu-hover);
        transition: 1.5s;
    }

    .menuToggle.active::before{
        transform: rotate(225deg);
    }

    .menu{
        top: 20px;
        position: fixed;
        width: 30px;
        height: 30px;
        background:var(--menu);
        border-radius: 70px;
        z-index: -1;
        transition: transform 0.5s, width 0.5s, height 0.5s;
        transition-delay: 1s, 0.5s, 0.5s ;
        transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
        box-shadow: 0 2px 4px 0 rgba(0,0,0,0.4);
    }

    .menuToggle.active ~ .menu{
        width: 240px;
        height: 40px;
        z-index: 1;
        transform: translateY(50px);
        transition-delay: 0s, 0.5s, 0.5s ;
    }

    .menu::before{
        content: '';
        position: absolute;
        width: 16px;
        height: 16px;
        background:var(--menu);
        left: calc(50% - 8px);
        top: 4px;
        transform: rotate(45deg);
        border-radius: 2px;
        transition: 0.5s;
    }

    .menuToggle.active ~ .menu::before{
        transition-delay: 0.5s ;
        top: -6px
    }

    .menu ul{
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 50px;
        gap: 25px;
    }

    .menu ul li{
        list-style: none;
        cursor: none;
        opacity: 0;
        visibility: hidden;
        transform: translateY(-30px);
        transition: 0.25s;
        transition-delay: calc(0s + var(--i));
    }

    .menuToggle.active ~ .menu ul li{
        opacity: 1;
        visibility: visible;
        transform: translateY(0px);
        transition-delay: calc(0.75s + var(--i));
    }

    .menu ul li a{
        display: block;
        font-size: 2em;
        text-decoration: none;
        color:var(--menu-a);
    }

    .menu ul li:hover a{
        color:var(--menu-hover);
    }

    .holder{
        position: relative;
        width: 100%;
        height: 100vh;
        display: grid;
        grid-template-columns: repeat(50, 60px);
        grid-template-rows: repeat(50, 60px);  
        overflow: hidden;   
        z-index: -100;
    }

    .dot{
        width: 1.5px;
        height: 1.5px;
        background-color:var(--dot);
        animation-name: moveDots;
        animation-duration: 1s;
        animation-iteration-count: infinite;
        animation-direction: alternate-reverse;
        z-index: -100;
    }

    @keyframes moveDots {
        0%{
            transform: translate(0,0);
        }
        100%{
            transform: translate(5px,5px);
        }
    }

    #theme-switcher{
        position: absolute;
        padding: 0.66rem;
        top: 20px;
        right: 10px;
        background:var(--switch-bg);
        border-radius: 50px;
        display: flex;
        align-items: center;
        gap: 1.33rem;
        cursor: none;
        transition: var(--default-transition);
    }

    #theme-switcher::before{
        content: '';
        position: absolute;
        width: 2.22rem;
        height: 2.22rem;
        background-color:var(--switch-circle-bg);
        border-radius: 50px;
        z-index: 0;
        left: 0;
        transform: translateX(var(--switch-circle-pos));
        transition: var(--default-transition);
    }

    #theme-switcher svg{
        z-index: 1;
        transition: var(--default-transition);
    }

    #icon-sun{
        fill:var(--icon-sun);
    }

    #icon-moon{
        fill:var(--icon-moon);
    }

    .hidden1{
        opacity: 0;
        filter: blur(5px);
        transform: translateX(200%);
        transition: all 1.5s ease-in-out;
    }

    .show1{
        opacity: 1;
        filter: blur(0);
        transform: translateX(0);
    }

    .hidden {
        opacity:0;
        filter: blur(5px);
        transform: translateX(-100%);
        transition: all 1.5s ease-in-out;
    }

    .show {
        opacity: 1;
        filter: blur(0);
        transform: translateX(0);
    }

    .card:nth-child(2){
        transition-delay: 200ms;
    }
    .card:nth-child(3){
        transition-delay: 400ms;
    }
    .card:nth-child(4){
        transition-delay: 600ms;
    }

    .card1:nth-child(2){
        transition-delay: 200ms;
    }
    .card1:nth-child(3){
        transition-delay: 400ms;
    }
    .card1:nth-child(4){
        transition-delay: 600ms;
    }

    ::-webkit-scrollbar{
        width: 15px;
        border-radius: 5px;
        border:2px solid;
        border-color: #8000FF;
    }

    ::-webkit-scrollbar-thumb{
        background-color: #8000FF;
        border-radius: 5px;
        border: 2px solid;
        border-color:var(--scrollbar-border);
    }

    .h3{
        font-family: var(--default-font);
        color:var(--header-text-name);
        font-size: 2em;
        position: absolute;
        left: 5px;
        top:16px;
    }
    

    .line p{
        color:var(--primary-text);
        font-size: 13vw;
        margin:0rem;
        text-transform: uppercase;

    }

    .section1 {
        position: absolute;
        display: flex;
        top: 50px;
        padding-top: 40px;
        padding-left: 14%;
        justify-content: space-between;
    }

    .line {
        display: flex;
        justify-content: space-between;
    }

    #text:has(.fancy:hover) .word:not(.fancy:hover){
        opacity: 0.2;
        transition: all 0.4s ease-out;
    }

    .fancy > .letter {
        display: inline-block;
        transition: transform 350ms ease;
    }

    .fancy:hover > .letter {
        transition-duration: 800ms;
        color:var(--h3-hover);
    }

    .fancy:hover > .letter:nth-child(1){
        transform: translate(-80%,60%) rotate(8deg);
    }
    .fancy:hover > .letter:nth-child(2){
        transform: translate(-40%,20%) rotate(4deg);
    }
    .fancy:hover > .letter:nth-child(3){
        transform: translate(-10%,60%) rotate(-6deg);
    }
    .fancy:hover > .letter:nth-child(4){
        transform: translate(0%,8%) rotate(-8deg);
    }
    .fancy:hover > .letter:nth-child(5){
        transform: translate(0%,-20%) rotate(5deg);
    }
    .fancy:hover > .letter:nth-child(6){
        transform: translate(0%,20%) rotate(-3deg);
    }
    .fancy:hover > .letter:nth-child(7){
        transform: translate(0%,-40%) rotate(-5deg);
    }
    .fancy:hover > .letter:nth-child(8){
        transform: translate(0%,15%) rotate(10deg);
    }
    .fancy:hover > .letter:nth-child(9){
        transform: translate(0%,-50%) rotate(8deg);
    }

    .contentsection2{
        display: flex;
        justify-content: center;
        text-align: center;
        align-items: center;
    }

    .contentsection2 h1{
        color:var(--primary-text);
        text-transform: uppercase;
        font-size: 13vw;
        padding-top: 80px;
    }

    .container1{
        position: relative;
        max-width: 100%;
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(300px,1fr));
        grid-template-rows: minmax(100px, auto);
        margin: 40px;
        grid-auto-flow: dense;
        grid-gap: 10px;
    }

    .container1 .box{
        padding: 20px;
        display: grid;
        font-size: 20px;
        place-items: center;
        text-align: center;
        color:var(--primary-text);
        border: 2px solid;
        border-color: #8000FF;
        border-radius: 5px;
        transition: 0.5s;
        font-family: var(--font);
        font-weight: var(--primary-text-weight);
        text-decoration: none;
    }

    .container1 .box:hover{
        background: #8000FF;
        box-shadow:  0 2px 4px 0 rgba(0,0,0,0.4);

    }

    .container1 .box img{
        position: relative;
        max-width: 100px;
        margin-bottom: 10px;
        text-decoration: none;
    }

    /* input[type="Download-CV"]{
        font-weight: var(--primary-text-weight);
        font-family: var(--font);
        padding-top: 5px;
        width: 60%;
        text-align: center;
        border:2px solid;
        border-color: #8000FF;
        padding: 5px;
        cursor: none;
        background: #8000FF;
        color: var(--page-bg);
        font-size: 18px;
        border-radius: 5px;
    }

    input[type="Download-CV"]:hover{
        color: #8000FF;
        background-color: var(--page-bg);
        border-color: #8000FF;
        transition: all 0.5s ease-out;
    } */

    .container1 .box:nth-child(1){
        grid-column: span 2;
    }
    .container1 .box:nth-child(2){
        grid-column: span 1;
        grid-row: span 2;
    }
    .container1 .box:nth-child(4){
        grid-column: span 1;
        grid-row: span 2;
    }

    .scroll-down{
        height: 50px;
        width: 30px;
        border: 2px solid var(--scroll-down);
        position: relative;
        left: 65%;
        bottom: -250px;
        border-radius: 50px;
        cursor: none;
    }

    .scroll-down::before,
    .scroll-down::after{
        content: '';
        position: absolute;
        top:20%;
        left:50%;
        border: 2px solid #8000FF;
        height: 10px;
        width: 10px;
        transform: translate(-50%,-100%) rotate(45deg);
        border-top: transparent;
        border-left: transparent;
        animation: scroll-down 1s ease-out infinite ;
    }

    .scroll-down::after{
        top:30%;
        animation-delay: .3s;
    }

    @keyframes scroll-down {
        0%{
            opacity: 0;
        }
        30%{
            opacity: 1;
        }
        60%{
            opacity: 1;
        }
        100%{
            opacity: 0;
            top: 90%;
        }
    }   

    .inner-cursor{
        position: fixed;
        left: 10px;
        width: 10px;
        height: 10px;
        transform: translate(-50%,-50%);
        background-color: #8000FF;
        mix-blend-mode: difference;
        border-radius: 50%;
        pointer-events: none;
        transition: width 0.5s, height 0.5s;
        z-index: 4;
        /* opacity: 0; */
    }

    .inner-cursor.grow {
        width: 25px;
        height: 25px;
        transition: width 0.5s, height 0.5s;
        /* opacity: 0; */
    }

    .outer-cursor {
        position: fixed;
        left: 10px;
        width: 25px;
        height: 25px;
        transform: translate(-50%,-50%);
        border: 1px solid #8000FF;
        mix-blend-mode: difference;
        border-radius: 50%;
        pointer-events: none;
        transition: 0.1s;
        z-index: 4;
        opacity: 0;
    }

    #Icons{
        fill: var(--Icons);
    }

    .contentsection3{
        display: absolute;
        justify-content: center;
        text-align: center;
        align-items: center;
    }

    .contentsection3 h1{
        color:var(--primary-text);
        text-transform: uppercase;
        font-size: 13   vw;
        font-family: var(--heading-font);
        padding-top: 80px;
    }

    .container5{
        margin: 20px auto;
        padding: 40px;
        width: 100%;
        font-family: var(--font);
        font-weight: var(--primary-text-weight);
    }

    .container5 ul{
        display: grid;
        grid-auto-flow: column;
        flex-flow: row wrap;
        padding: 20px;
        max-width: 100%;
        justify-content: center;
        align-items: center;
        align-content: center;
    }

    .container5 ul li{
        list-style: none;
        background: var(--page-bg);
        color: var(--primary-text);
        border: 2px solid;
        border-color: var(--dot);
        border-radius: 20px;
        padding: 8px 20px;
        margin: 5px;
        letter-spacing: 1px;
        cursor: none;
    }

    .container5 ul li.active{
        background-color: var(--dot);
        color: var(--page-bg);
        transition: 0.5s ease-out;
    }

    .container2{
        position: relative;
        max-width: 100%;
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(300px,1fr));
        grid-template-rows: minmax(100px, auto);
        margin: 40px;
        grid-auto-flow: dense;
        grid-gap: 10px;
    }

    .container2 .box1{
        padding: 20px;
        display: grid;
        font-size: 20px;
        place-items: center;
        text-align: center;
        color:var(--primary-text);
        border: 2px solid;
        border-color: #8000FF;
        border-radius: 5px;
        transition: 0.5s;
        text-decoration: none;
    }

    .container2 .box1:hover{
        background: #8000FF;
        box-shadow:  0 2px 4px 0 rgba(0,0,0,0.4);

    }

    .container2 .box1 img{
        border-radius: 10px;
        position: relative;
        max-width: 100%;
        /* margin-bottom: 10px; */
        text-decoration: none;
    }

    .container2 .box1 p{
        padding-left: 10px;
        display: grid;
        font-size: 25px;
        place-items: left;
        text-align: left;
        color:var(--primary-text);
        font-family: var(--font);
        font-weight: var(--primary-text-heading-weight);
    }

    .container2 .box1 p1{
        padding: 10px;
        display: grid;
        font-size: 18px;
        font-weight: var(--muted-text-weight);
        place-items: left;
        text-align: left;
        color:var(--muted-text);
        font-family: var(--font);
    }

    .container2 .box:nth-child(1){
        grid-column: span 1;
    }
    .container2 .box:nth-child(2){
        grid-column: span 1;
        grid-row: span 1;
    }
    .container2 .box:nth-child(3){
        grid-column: span 1.5;
        grid-row: span 1;
    }
    .container2 .box:nth-child(4){
        grid-column: span 2;
        grid-row: span 1;
    }
    .container2 .box:nth-child(5){
        grid-column: span 1;
        grid-row: span 1;
    }
    .container2 .box:nth-child(9){
        grid-column: span 1;
        grid-row: span 1;
    }
    .container2 .box:nth-child(8){
        grid-column: span 2;
        grid-row: span 1;
    }

    .contentsection4{
        display: absolute;
        justify-content: center;
        text-align: center;
        align-items: center;
    }

    .contentsection4 h1{
        color:var(--primary-text);
        text-transform: uppercase;
        font-size: 13vw;
        padding-top: 80px;
        font-family: var(--heading-font);
    }

    .contentsection4 p{
        color:var(--primary-text);
        font-size: 5vw;
        padding: 40px;
        font-weight: var(--primary-text-weight);
        font-family: var(--font);
        font-style: italic;

    }

    .float-container{
        padding: 20px;
    }

    .float-child{
        width:50%;
        float: left;
        padding: 20px;
    }

    .form{
        display: flex;
        justify-content: center;
        align-items:center ;
        
    }

    .container{
        width: 100%;
        padding: 20px;
        font-family: var(--font);
        font-weight: var(--primary-text-heading-weight);
    }

    .container .row100{
        position: relative;
        width: 100%;
        display: grid;
        grid-template-columns: repeat(auto-fit,minimax(300px,1fr));
    }

    .container .row100 .col{
        position: relative;
        width: 100%;
        padding: 0 10px;
        margin: 30px 0 10px;
        transition: 0.5s;
    }

    .container .row100 .inputBox{
        position: relative;
        width: 100%;
        height: 40px;
        color:#8000FF;
    }

    .container .row100 .inputBox input
    {
        position: absolute;
        width: 100%;
        height: 100px;
        background: transparent;
        box-shadow: none;
        border: none;
        outline: none;
        font-size: 18px;
        padding: 0 10px;
        top: -30px;
        z-index: 1;
        color: var(--primary-text);
    }

    .container .row100 .inputBox.textarea textarea
    {
        position: absolute;
        width: 100%;
        height: 100px;
        background: transparent;
        box-shadow: none;
        border: none;
        outline: none;
        font-size: 18px;
        padding: 0 10px;
        z-index: 1;
        color: var(--primary-text);
    }

    .container .row100 .inputBox .text{
        position: absolute;
        top: 0;
        left: 0;
        line-height: 40px;
        font-size: 18px;
        padding: 0 10px;
        display: block;
        transition: 0.5s;
        pointer-events: none;
    }

    .container .row100 .inputBox input:focus + .text,
    .container .row100 .inputBox input:valid + .text{
        top: -35px;
        left: -10px;
    }

    .container .row100 .inputBox .line{
        position: absolute;
        bottom: 0;
        display: block;
        width: 100%;
        height: 2px;
        background: #8000FF;
        transition: 0.5s;
        border-radius: 5px;
        pointer-events: none;
    }

    .container .row100 .inputBox input:focus ~ .line,
    .container .row100 .inputBox input:valid ~ .line{
        height: 100%;
    }

    .container .row100 .inputBox.textarea{
        position: relative;
        width: 100%;
        height: 100px;
        padding: 10px 0;
    }

    .container .row100 .inputBox.textarea textarea{
        height: 100%;
        resize: none;
    }

    .container .row100 .inputBox textarea:focus + .text,
    .container .row100 .inputBox textarea:valid + .text{
        top: -35px;
        left: -10px;
    }

    .container .row100 .inputBox textarea:focus ~ .line,
    .container .row100 .inputBox textarea:valid ~ .line{
        height: 100%;
    }

    input[type="submit"]{
        font-family: var(--font);
        border:2px solid;
        border-color: #8000FF;
        padding: 7px 35px;
        cursor: none;
        background: #8000FF;
        color: var(--primary-text);
        font-size: 18px;
        border-radius: 5px;
    }

    input[type="submit"]:hover{
        color: var(--dot);
        background-color: var(--page-bg);
        border-color: var(--dot);
        transition: all 0.5s ease-out;
    }

    .container4{
        position: relative;
        max-width: 100%;
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(200px,1fr));
        grid-template-rows: minmax(50px, auto);
        margin: 40px;
        grid-auto-flow: dense;
        grid-gap: 10px;
    }

    .container4 .box{
        padding: 20px;
        display: grid;
        font-size: 20px;
        place-items: center;
        text-align: center;
        color:var(--primary-text);
        border: 2px solid;
        border-color: #8000FF;
        border-radius: 5px;
        transition: 0.5s;
        font-family: var(--font);
        font-weight: var(--muted-text-weight);
        text-decoration: none;
    }

    .container4 .box:hover{
        background: #8000FF;
        box-shadow:  0 2px 4px 0 rgba(0,0,0,0.4);

    }

    .container4 .box img{
        border-radius: 10px;
        position: relative;
        max-width: 100px;
        margin-bottom: 10px;
        text-decoration: none;
    }

    .container4 .box p{
        padding-left: 10px;
        display: grid;
        font-size: 25px;
        place-items: left;
        text-align: left;
        color:var(--primary-text);
    }

    footer{
        font-size: 3vh;
        display: grid;
        flex-flow: row wrap;
        align-items: center;
        text-align: center;
        max-width: 100%;
        align-content: center;
        padding: 50px;
        color: var(--primary-text);
        background: var(--dot);
    }

    footer p{
        text-align: center;
        padding: 20px;
    }

    footer ul{
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 50px;
        gap: 25px;
    }

    footer ul li{
        list-style: none;
        cursor: none;
        transition: 0.25s;
    }

    footer ul li a{
        text-decoration: none;
        color: var(--primary-text);
    }

    footer ul li a:hover{
        color: var(--page-bg);
        transition: 0.2s;
    }
}