: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: #414169;

    --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);
    }
    
    .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;
    }
    
    .holder{
        position: absolute;
        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(10px,10px);
        }
    } */
    
    #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);
    }
    
    ::-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{
        color:var(--header-text-name);
        font-size: 2em;
        position: absolute;
        left: 5px;
        top:16px;
        text-decoration: none;
    }
    
    
    .container1{
        position:absolute;
        display: grid;
        flex-flow: row wrap;
        align-items:center ;
        top:20%;
        font-size:3vw;
        padding-top: 100px;
        justify-content: center;
        width: 100%;
        padding: 50px;
        color: var(--primary-text);
    }
    
    .container{
        position:absolute;
        display: grid;
        flex-flow: row wrap;
        align-items:center ;
        top:40%;
        padding-top: 100px;
        justify-content: center;
        width: 100%;
        padding: 50px;
        font-family: var(--font);
        font-weight: var(--primary-text-weight);
    }
    
    .container .row100{
        position: relative;
        width: 100%;
        display: flex;
        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"]{
        border:2px solid;
        border-color: #8000FF;
        padding: 7px 35px;
        cursor: none;
        background: #8000FF;
        color: var(--primary-text);
        font-size: 18px;
        border-radius: 5px;
        font-family: var(--font);
        font-weight: var(--primary-text-weight);
    }
    
    input[type="submit"]:hover{
        color: #8000FF;
        background-color: var(--page-bg);
        border-color: #8000FF;
        transition: all 0.5s ease-out;
    }
    footer{
        position:relative;
        font-size: 3vh;
        max-width: 100%;
        display: grid;
        grid-auto-flow: column;
        align-items: center;
        text-align: center;
        align-content: center;
        padding: 20px;
        color: var(--primary-text);
        background: var(--dot);
        top: 100vh;
        flex-flow: row wrap;
    }
    
    footer p{
        text-align: center;
        padding: 20px;
    }
}

@media screen and (min-width: 103px) and (max-width:539px){
    ::-moz-selection { 
        color: var(--primary-text);
        background: var(--dot);
    }
    
    .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;
    }
    
    .holder{
        position: absolute;
        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(10px,10px);
        }
    }
    
    #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);
    }
    
    ::-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{
        color:var(--header-text-name);
        font-size: 2em;
        position: absolute;
        left: 5px;
        top:16px;
        text-decoration: none;
    }
    
    
    .container1{
        position:absolute;
        display: grid;
        flex-flow: row wrap;
        align-items:center ;
        top:20%;
        font-size:4.5vw;
        padding-top: 100px;
        justify-content: center;
        width: 100%;
        padding: 50px;
        color: var(--primary-text);
    }
    
    .container{
        position:absolute;
        display: grid;
        flex-flow: row wrap;
        align-items:center ;
        top:40%;
        padding-top: 100px;
        justify-content: center;
        width: 100%;
        padding: 50px;
        font-family: var(--font);
        font-weight: var(--primary-text-weight);
    }
    
    .container .row100{
        position: relative;
        width: 100%;
        display: flex;
        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"]{
        border:2px solid;
        border-color: #8000FF;
        padding: 7px 35px;
        cursor: none;
        background: #8000FF;
        color: var(--primary-text);
        font-size: 18px;
        border-radius: 5px;
        font-family: var(--font);
        font-weight: var(--primary-text-weight);
    }
    
    input[type="submit"]:hover{
        color: #8000FF;
        background-color: var(--page-bg);
        border-color: #8000FF;
        transition: all 0.5s ease-out;
    }
    footer{
        position:relative;
        font-size: 3vh;
        max-width: 100%;
        display: grid;
        grid-auto-flow: column;
        align-items: center;
        text-align: center;
        align-content: center;
        padding: 20px;
        color: var(--primary-text);
        background: var(--dot);
        top: 100vh;
        flex-flow: row wrap;
    }
    
    footer p{
        text-align: center;
        padding: 20px;
    }
}

@media screen and (min-width: 540px) and (max-width:1025px){
    ::-moz-selection { 
        color: var(--primary-text);
        background: var(--dot);
    }
    
    .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;
    }
    
    .holder{
        position: absolute;
        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(10px,10px);
        }
    }
    
    #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);
    }
    
    ::-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{
        color:var(--header-text-name);
        font-size: 2em;
        position: absolute;
        left: 5px;
        top:16px;
        text-decoration: none;
    }
    
    
    .container1{
        position:absolute;
        display: grid;
        flex-flow: row wrap;
        align-items:center ;
        top:20%;
        font-size:5vw;
        padding-top: 100px;
        justify-content: center;
        width: 100%;
        padding: 50px;
        color: var(--primary-text);
    }
    
    .container{
        position:absolute;
        display: grid;
        flex-flow: row wrap;
        align-items:center ;
        top:40%;
        padding-top: 100px;
        justify-content: center;
        width: 100%;
        padding: 50px;
        font-family: var(--font);
        font-weight: var(--primary-text-weight);
    }
    
    .container .row100{
        position: relative;
        width: 100%;
        display: flex;
        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"]{
        border:2px solid;
        border-color: #8000FF;
        padding: 7px 35px;
        cursor: none;
        background: #8000FF;
        color: var(--primary-text);
        font-size: 18px;
        border-radius: 5px;
        font-family: var(--font);
        font-weight: var(--primary-text-weight);
    }
    
    input[type="submit"]:hover{
        color: #8000FF;
        background-color: var(--page-bg);
        border-color: #8000FF;
        transition: all 0.5s ease-out;
    }
    footer{
        position:relative;
        font-size: 3vh;
        max-width: 100%;
        display: grid;
        grid-auto-flow: column;
        align-items: center;
        text-align: center;
        align-content: center;
        padding: 20px;
        color: var(--primary-text);
        background: var(--dot);
        top: 100vh;
        flex-flow: row wrap;
    }
    
    footer p{
        text-align: center;
        padding: 20px;
    }
}