@import url('https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,100..900;1,100..900&display=swap');@import url('https://fonts.googleapis.com/css2?family=Edu+AU+VIC+WA+NT+Arrows:wght@400..700&family=Montserrat:ital,wght@0,100..900;1,100..900&family=Plus+Jakarta+Sans:ital,wght@0,200..800;1,200..800&display=swap');


*{box-sizing: border-box; padding: 0; margin: 0; border: 0;}
:root{--light:#ffffff;--light2:#eaecec;--light3:#cececa;--color4:#858383;--color5:#343333;--accent:#2270ca;--accent2:#76b3f9a5;--accent_l: #76b3f91c;--footer-text:#fffffff9;--footer-color:#343333;--para-color:#414040;}
.links{width:100%;height: auto;display:flex;justify-content:flex-end;gap:10px;align-items: center;margin-top:20px;padding-top: 10px;border-top:solid 1px var(--light3);}
.link:nth-child(1){background-color:var(--light);color:var(--accent)}
.link{background-color:var(--accent);color:var(--light);width:auto;height:35px;border:solid 1px var(--accent);border-radius:5px;display:flex;justify-content: center;align-items: center;padding:10px 16px;}
html{scroll-behavior: smooth;transition:0.5s;}
#loading{width:100%;height:100%;position: fixed;background-color:var(--light);display: flex;justify-content:center;align-items: center;top:0px;left:0px;z-index:30;transition:1s;cursor: pointer;}
.confirm{background-color:var(--light); color:var(--color4);width:350px;height: auto;top:65%;border-radius:25px;display:flex;gap:20px;position: absolute;border:solid .2px var(--color4);flex-direction: column;padding:20px;}
.confirm p{font-weight: 500;color: var(--color5);font-size:1rem;font-weight:500}
#no{background-color: var(--light);color: var(--accent)}
.confirm-btns{display:flex;width:100%;justify-content: flex-end;gap:7px}
#loadAnim{width:104px;height:104px;background:linear-gradient(#cead09,#e71953,#008069,#e77d19);border-radius: 50%;display: flex;margin-bottom:80px;position:absolute;justify-content:center;align-items: center;animation: rotateon 1s linear infinite forwards}
.state{width:auto;height:20px;border-radius: 7px;background-color:#00000022;display: flex;font-weight:900;font-size:0.6rem;padding:5px;color: var(--accent);align-items: center}
#loading2{width:100px;height:100px;margin-bottom:80px;border-radius:50%;display: flex;justify-content: center;align-items: center;position:absolute;padding:10px;padding-top: 12px;background-color:var(--light)}
#handshake{width:40px;height: 40px;border-radius: 50%;display: none}
#about{margin-top:10px; width:180px;}
#handshake img{width:100%;height:100%}
#hero{align-items: center;display: flex;justify-content: space-between}
.loader{width:100%;height: 100%;border-radius:inherit;background-color: var(--light2);display: flex;justify-content: center;align-items: center;z-index:2;position: absolute;opacity:1}
#load{width:40px;height:40px;animation:rotateon 1s linear infinite}
img{pointer-events: none}
.blocks{display: none}
a{text-decoration:none}
#span1{font-weight:900; color:var(--color5); font-size:1.5rem;margin-bottom:5px}
#myCanvas{position:fixed;top:0px;left:0px;z-index:20;visibility: hidden;pointer-events: none}
.menu-btn{width:38px;height:38px;border-radius:5px;background-color: transparent;border:0.5px solid var(--light3);display:flex;flex-direction:column;justify-content:center;align-items: center;gap:4px;margin-right:5px;position:relative;overflow:hidden;cursor:pointer;z-index:15;}
.menu-dot{
    width:23px;
    height:4px;
    background-color:var(--accent);
    border-radius: 6px;
    transition:.2s;
    pointer-events: none;
}.menu-dot:first-child{
    float:left;
}
.pagelink{
    width:10px;
    height:10px;
    background-color: green;
    position: absolute;
    top:-20px;
    cursor: none;
    pointer-events:none;
}
#section1-link{
    top:-85px;
}
.menu{
    width:100%;
    height:100vh;
    display: none;
    position:fixed;
    top:0px;
    z-index:4;
    right:0px;

    .all-menu{
        width:100%;
        height:100%;
        position:absolute;
        top:0px;
        left:0px;
        display:flex;
    
        .panes{
            width:auto;
            border:2px solid var(--menu-color);
            height:0%;
            background-color:var(--menu-color);
            animation:slide-down linear forwards;
            animation-duration:0.7s;
            justify-content: center;
            flex:1;
            border-bottom: solid 2px var(--color5);
            animation-timing-function: ease-in;
        }
        #pane1{
            animation-delay:0s;
        }
        #pane2{
            animation-delay:.1s;
        }
        #pane3{
            animation-delay:.2s;
        }
        #pane4{
            animation-delay:.3s;
        }
        #pane5{
            animation-delay:.2s;
        }
        #pane6{
            animation-delay:.1s;
        }
        #pane7{
            animation-delay:0s;
        }
    }
    .menu-items{
        width:100%;
        height:100%;
        background-color:var(--light);
        display:flex;
        padding:10px;
        opacity: 0;
        animation:menu-slide-in 1s 0.8s forwards;
        z-index:2;
        padding-top: 90px;
        display:flex;
        flex-direction:column;

        .menu-item{
            width:100%;
            height:auto;
            margin-top:30px;
            display:flex;
            flex-direction: column;
            justify-content: flex-start;

            .menu-header{
                font-weight:900;
                font-size: 1.5rem;
                padding-bottom:5px;
            }
            .setting-item{
                display:flex;

                .plane1{
                    display:flex;
                    gap:5px;
                    width:100%;
                    justify-content: space-between;
                    border-bottom:1px solid var(--color4);
                    padding: 6px 0px;
                    align-items: center;

                    .theme-item{
                        font-size: 1.2rem;
                        color:var(--color5);
                        display:flex;
                        gap:5px;
                        font-weight:500;
                        align-items: center;
                    }

                    .all-items{
                        display:flex;
                        gap:5px;

                        .theme-container{
                            width:50px;
                            height:50px;
                            border-radius:50%;

                            .theme{
                                width:98%;
                                height:98%;
                                border-radius: inherit;
                            }
                        }
                    }
                }
            }
        }
    }
}

/*toggle code*/
.togglebar{
    width:55px;
    height:30px;
    background-color:var(--accent_l);
    border:solid 1.5px var(--accent);
    border-radius:15px;
    padding:2px 4px;
    transition:1s;
    cursor: pointer;
}
.knob{
    width:23px;
    height:23px;
    background-color:var(--accent);
    border-radius:12px;
    float:right;
    cursor:pointer;
    animation: .2s linear forwards;
}

#profile{
    width:25px;
    height: 25px;
    border-radius:50%;
    border:solid 2px var(--accent);
    padding:2px;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}
#profile img{
    border-radius: inherit;
}
#skilled{
    display: flex;
    gap:5px;
    flex-wrap: wrap;
}
body{
    width:100%;
    height:auto;
    color:var(--color5);
    font-family: "Raleway", sans-serif;
    cursor:none;
    overflow-x:hidden;
    position: relative;
}
li{
    list-style: none;
}
body::-webkit-scrollbar{
    width:5px;
    height: 10px;
}
body::-webkit-scrollbar-track{
    background-color:var(--light);
    position: absolute;
}
body::-webkit-scrollbar-thumb{
    width:5px;
    height: 10px;
    border-radius:5px;
    height:auto;
    background-color:var(--accent);
}
ul{
    list-style-type:none;
}
h1{
    font-size:1.5rem;
    font-weight:900;
    position: relative;
}
h1::first-letter{
    /* background-color:var(--accent); */
    color:var(--accent);
}
h1::after{
    background-color:var(--accent_l);
    content:' ';
    width:2rem;
    height:7px;
    position:absolute;
    display: block;
    bottom:2px;
    right:0px;
}
h2{
    font-size:1.2rem;
    font-weight:700;
    margin-bottom:10px;
}
.tiptip{
    margin-bottom:3px;
    font-weight:600;
}
img{
    width:100%;
    height:100%;
}
nav{
    width:100%;
    height:85px;
    display: flex;
    flex-direction: column;
    z-index:5;
    align-items: center;
    justify-content: center;
    border-bottom: 1px solid var(--light3);
    position:sticky;
    background-color:var(--light);
    top:-20px;
    box-shadow:0px 1px 3px -3px black;
}
.btn{
    width:auto;
    background-color: var(--accent);
    height:auto;
    display:flex;
    padding:12px 20px;
    font-size: 0.9rem;
    border-radius:8px;
    border: 1px solid var(--accent);
    font-family: "Raleway", sans-serif;
    justify-content: center;
    align-items: center;
    color:var(--light);
    position: relative;
    overflow: hidden;
    cursor:pointer;
    font-weight: 500;
    pointer-events: all;
    animation-name: " ";
    animation-duration:0.2s;
}
.curve{
    background-color: var(--light2);
}
.bubble{
    width:10px;
    height:10px;
    position: absolute;
    border-radius:50%;
    background-color: var(--accent);
}
#background{
    display: none;
    width:100%;
    height:100%;
    position:fixed;
    background-color: var(--light);
    top:0px;
}
#excl{
    color:var(--accent);
}
#text1{
    text-align: center;
    font-size:1rem;
}
#bold{
    font-weight:700;
    color: var(--accent);
}
#animator{
    position:absolute;
    width:5px;
    height:5px;
    pointer-events: none;
    display: none;
    border-radius: 50%;
    align-items: center;
    justify-content: center;
    background-color: #0000007d;
    animation:showup 1.2s linear forwards;
}
#submit{
    width: auto;
    padding:5px 25px;
    display: flex;
    border: 1px solid var(--accent);
    font-family: "Raleway", sans-serif;
    justify-content: center;
    align-items: center;
    color:var(--light);
    cursor:pointer;
    height:35px;
    background-color: var(--accent);
}
#submit_btn{
    display: flex;
    align-items: center;
    justify-content:right;
}
.container{
    height: auto;
    width:100%;
    max-width:1500px;
    margin:auto;
    position: relative;
    padding:40px 10px;
}
.plot {
    width: 200px;
    height: 200px;
    perspective: 800px;
    background-color:var(light);
    pointer-events: all;
}

.cube {
    width: 100%;
    height: 100%;
    position: relative;
    transform-style: preserve-3d;
    animation: 5s linear forwards;
}
.mic{
    width:35px;
    height:20px;
    border-radius:15px;
    position: fixed;
    bottom:50px;
    right:50px;
    padding:3.5px;
    z-index:2000;
    transition:1s;
    background-color:var(--accent_l);
}
.face {
    position: absolute;
    width: 200px;
    height: 200px;
    background:radial-gradient(var(--light),var(--accent2));
    border:1px var(--light2) solid;
    border-radius:15px;
    text-align: center;
}

.face1  { transform: rotateY( 0deg) translateZ(100px); }
.face2   { transform: rotateZ(180deg)  rotateY(180deg) translateZ(100px); }
.face3   { transform:rotateY(-90deg) translateZ(100px);}
.face4  { transform: rotateY( 90deg) translateZ(100px) }
.face5    { transform: rotateX( 90deg) translateZ(100px);}
.face6 { transform: rotateX(-90deg) translateZ(100px); }

#text{
    text-align: center;
    font-weight: 700;
    font-size:1.5rem;
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}
#large_text{
    font-size:1.9rem;
    font-weight:900;
}
#welcome{
    font-weight:900;
}
nav .container{
    height:65px;
    display: flex;
    justify-content: space-between;
    padding:8px 5px;
}
#main-logo{
    width:58px;
    height:58px;
}

.logo-img{
    filter:grayscale(0%) brightness(100%); 
    -webkit-filter:grayscale(0%) brightness(100%); 
}
.logo:hover{
    animation-name:twitch;
    animation-duration:.5s;
}
.nav-items{
    display: flex;
    justify-content: flex-end;
    height:auto;
    width: auto;
    gap:20px;
    align-items: center;
}
#section1{
    height:calc(100vh - 85px);
    max-height:900px;
    min-height:400px;
}
#section1 .container{
    height:100%;
    display: flex;
    position: relative;
    justify-content:center;
    flex-direction:column-reverse ;
    padding-left: 10px;
    padding-right: 10px;
    gap:70px;
    pointer-events: none;
}
section:nth-child(2), section:nth-child(4){
    background-color:var(--light2);
}
.col1_1, .col2_1{
    width:100%;
    height:auto;
    display:flex;
    justify-content:center;
    align-items: center;
}
.col1_1{
    flex-direction: column;
    gap: 12px;
}
header{
    margin-bottom:60px;
    width: 100%;
    height: auto;
}
#header1,#header2,#header3{
    transform:translateX(-100px);
    opacity:0;
    transition:1s;
}
.header{
    display:flex;
    width: 100%;
    justify-content: space-between;
    align-items: center;
}
.num{
    position:absolute;
    z-index:1;
    color:transparent;
    top:30px;
    left:50px;
    width:100%;
    height:100%;
    display: flex;
    justify-content:flex-end;
    align-items:center;
    font-weight: 900;
    font-size:10rem;
    -webkit-text-stroke-color:var(--accent_l);
    /* -webkit-text-stroke-color:var(--color4); */
    -webkit-text-stroke-width:2px;
}
.number{
    position:relative;
    width: 50px;
    height:50px;
}
.projects{
    width: auto;
    height:auto;
    display: flex;
    flex-wrap: wrap;
    flex-shrink:0;
    justify-content: center;
    align-items: flex-start;
    gap:40px;
    max-width:800px;
    margin:auto;
}
.projects::-webkit-scrollbar{
    width:0px;
}
.project{
      width:320px;
      height:320px;
      border-radius:20px;
      display: flex;
      flex-direction:column;
      background-color:var(--light);
      justify-content: space-between;
      padding:10px;
      box-shadow:0px 0px 2px -1px black;
      cursor: pointer;
      position: relative;
      transition:.5s ease-in-out;
}

.project:hover::after{
    opacity:0;
    background-color:transparent;
    color:transparent;
    text-shadow:0px 0px 0px;
}
.project::after{
    content:'';
    width:100%;
    height:100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color:#0000009c;
    color:var(--footer-text);
    font-weight:700;
    top:0px;
    font-size:1.5rem;
    left:0px;
    position: absolute;
    opacity: 1;
    border-radius:inherit;
    transition:.6s;
    pointer-events: none;
}
.project1::after{
    content:'task-master'
}
.project2::after{
    content:'countries app'
}
.project3::after{
    content:'music-player'
}
.project4::after{
    content:'space tourism'
}
.project5::after{
    content:'easy-shop'
}
.project6::after{
    content:'portfolio-x'
}
.project7::after{
    content:'wetube'
}

.image_icon{
    width:100%;
    height:100%;
    display: flex;
    border-radius:inherit;
    position:relative;
    justify-content: center;
    align-items: center;
    border:solid 1.5px var(--light3);
    pointer-events: none;
    background-repeat:no-repeat;
    background-position-x: center;
    background-position-y:center;
    background-size:cover;
}
.image_icon img{
    border-radius:inherit;
}
#version{
    width:100%;
    background-color:var(--footer-color);
    height:20px;
    font-size:0.8rem;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 0px 20px;
}
#v{
    background:linear-gradient(120deg,yellow,rgb(117, 179, 230), rgb(201, 80, 217),yellow);
    color:transparent;
    background-clip:text;
    width:auto;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 700;
    animation:chameleon 2s infinite ease;
    background-size: 200% 200%;
}
#cover, .cover2{
    width:100%;
    height: 100%;
    position: fixed;
    display:none;
    justify-content: center;
    align-items: center;
    z-index:10;
    background-color:#00000093;
}
.cover2{
    z-index:3;
}
.codal{
    width:auto;
    height: auto;
    display:flex;
    justify-content: center;
    align-items: center;
}
.close{
    width:30px;
    height:30px;
    border-radius:10px;
    border:var(--accent) 1.5px solid;
    position: absolute;
    top:10px;
    right:10px;
    padding:0px;
    background-color:transparent;
}
#modal{
    width: auto;
    height: auto;
    display:none;
    flex-direction:column;
    padding: 35px 15px 30px 15px;
    background-color:var(--light);
    border-radius:20px;
    border:solid 2px var(--light3);
    justify-content:center;
    gap:10px;
    position:relative;
    align-items: center;
    animation:drop .5s linear forwards;
    box-shadow:0px 0px 3px -1px;
}

.hd{
    font-size:1.2rem;
}
#name{
    font-size:1.5rem;
    font-weight: 900;
}
#personal{
    width:100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap:5px;
}
#social_links{
    width:100%;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    gap:10px;
}
#social_links li{
    width:20px;
    height: 20px;
    border-radius: 50%;
}

#role{
    font-size: 1rem;
    font-weight:700;
}
#information{
    display:flex;
    flex-direction: column;
    width:100%;
    align-items: center;
}
#description{
    width:320px;
    height: auto;
    font-size: 15px;
    text-align: left;
    max-height:200px;
    color:var(--color5);
    overflow-y:scroll;
    padding-right:20px;
    position: relative;
}
#description::-webkit-scrollbar{
    width:3px;
    background-color:var(--light2);
    border-radius:5px;
}
#description::-webkit-scrollbar-thumb{
    width:5px;
    height:7px;
    background-color: var(--accent);
    border-radius:5px;
}
#profile_picture{
    width:150px;
    height: 150px;
    border-radius:50%;
    border:solid 2px var(--accent);
    justify-content: center;
    align-items: center;
    padding:5px;
    display:flex;
}
#profile_picture img{
    border-radius: inherit;
    border: solid 1px var(--accent);
}
#info{
    width:23px;
    height:23px;
    background-color:var(--light);
    border-radius:50%;
    position: absolute;
    padding:3px;
    top:-5px;
    left:-5px;
}
.skill,.skill2{    
    height:auto;
    padding:6px 12px;
    border-radius: 20px;
    border:1px solid var(--light3);
    display:flex;
    opacity:0;
    transform:scale(0.8);
    transition:.5s;
    justify-content:center;
    gap:5px;
    align-items: center;
    width: auto;
    font-weight:500;
}
.skill2{
    opacity:1;
    transform:scale(1);
}
.icons{
    border:1.2px solid var(--accent);
    width:1.5rem;
    padding:4.5px;
    border-radius:50%;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 1.5rem;
}
.icons img{
    width: 100%;
    height:100%;
}

.skills{
    width:50%;
    flex: 1;
    height:auto;
    display: flex;
    flex-direction:column;
    justify-content: space-between;
    gap:40px;
}
.list{
    margin-bottom:10px;
    font-weight:700;
}
.frontend, .backend,.general{
    height:auto;
    display:flex;
    gap:5px;
    flex-wrap: wrap;
}
section{
    background-color: var(--light);
    width:100%;
    height:auto;
    overflow-x:hidden;
    position:relative;
}

#section2 .container{
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
}
.more{
    margin-top: 20px;
    width:100%;
    height:auto;
    display: none;
    width:auto;
    height:auto;
    bottom:0px;
    padding:10px;
}
#open{
    width:auto;
    height:auto;
    color:var(--accent);
}
p{
    color:var(--para-color);
    line-height:1.2;
    font-size: 1rem;
}
.contact{
    width:100%;
    display: flex;
    align-items: center;
    flex-direction:column;
    justify-content: space-around;
    gap:40px;
}
.socials{
    width:100%;
    display: flex;
    flex-direction: column;
    gap:10px;
}
.social_media{
    width:auto;
    padding:10px 10px;
    border:1px solid var(--light3);
    border-radius:20px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap:10px;
    min-width:340px;
    cursor: pointer;
    transition:.8s;
}
.social_media:hover .small_icon{
    margin-right:7px;
}

.social_media:hover #line{
    color:var(--accent);
}

.small_icon{
    width:20px;
    height: 20px;
    transition:.8s;
}
#line{
    font-weight:900;
    padding-right:5px;
    border-right:2px solid var(--color5);
}

input{
    width:300px;
    height:40px;
    border-radius:8px;
    background-color: transparent;
    border:solid 1px var(--light3);
    padding:0px 10px;
    caret-color: var(--accent);
    font-size:1rem;
}

input:focus, textarea:focus{
   outline-color:var(--accent);
}

input::placeholder{
    color:var(--light3)
}

label{
    font-weight: 600;
    margin-bottom:5px;
    color:var(--color5)
}

.input{
    display: flex;
    flex-direction: column;
    z-index: 2;
}

textarea{
    padding:10px 10px;
    width:300px;
    height:120px;
    background-color:transparent;
    border-radius:8px;
    border:solid 1px var(--light3);
    resize: none;
}

a{
    color:var(--color5)
}

form{
    display: flex;
    flex-direction: column;
    background-color: var(--light);
    width:auto;
    height: auto;
    padding:20px;
    padding-top:50px;
    justify-content:center;
    gap:15px;
    position:relative;
    border:solid 2px var(--light3);
    border-radius:10px;
    box-shadow:0px 0px 4px -2px black;
    overflow:hidden;
}

footer{
    width:100%;
    position: relative;
    background-color:var(--footer-color);
    z-index: 2;
}

footer .container{
    background-color:var(--footer-color);
    display: flex;
    flex-direction: column;
    color:var(--footer-text);
    font-size:0.8rem;
}

#swap_tag{
    display: flex;
    flex-direction: column;
}

.chat{
    width:300px;
    height:300px;
    position:absolute;
    top:-70px;
    left:-40px;
    border-radius:50%;
    background-color:var(--accent);
    padding:8px;
    transform:rotateZ(-30deg);
    z-index:0;
    opacity:7%;
}

.modal2{
    width:96%;
    max-width:800px;
    height:auto;
    border-radius:20px;
    border:2px solid var(--light3);
    background-color: var(--light);
    box-shadow:0px 0px 3px -1px;
    display:flex;
    padding:15px;
    padding-top:60px;
    justify-content: center;
    align-items: center;
    position: relative;
    animation:drop .5s linear forwards;
    cursor: pointer;
}

#tag{
    font-size:1.2rem;
    color: #59a1f4;
    font-weight:900;
}

#swap{
    display:flex;
    flex-direction: column;
    margin-bottom:30px;
}

.modal2 ul{
    width:auto;
    display:flex;
}

.frame{
    width:260px;
    border-radius: 15px;
    aspect-ratio:16/9;
    overflow:hidden;
    display:flex;
    justify-content:center;
    align-items: center;
    position: relative;
    background-color: var(--light2);
}

.particles{
    display: none;
}

iframe{
    transform:scale(0.25);
    aspect-ratio:16/9;
    border-radius: inherit;
    width:400%;
    height: 400%;
}
.moon-item{
    width:30px;
    height:30px;
    display:flex;
    align-items: center;
    justify-content:center;
}
.rays{
    width:2px;
    height:6px;
    border-radius: 1px;
    background-color:var(--accent);
    position: absolute;
    top:0px;
    left:calc(50%);
    transform:translate(-1px);
}
.disc{
    width:100%;
    height:100%;
    position: absolute;
    top:0px;
    left:0px;
}
#disc2{
    transform:rotate(60deg);
}
#disc3{
    transform:rotate(120deg);
}
#disc4{
    transform:rotate(180deg);
}
#disc5{
    transform:rotate(240deg);
}
#disc6{
    transform:rotate(300deg);
}

.moon{
    width:20px;
    height:20px;
    border-radius:50%;
    display:flex;
    justify-content:center;
    align-items:center;
    background-color:var(--accent);
    position:relative;
    cursor:pointer;
}
.ray{
    width:20px;
    height:20px;
    position:absolute;
    opacity:0;
    border-radius:50%;
    animation: .2s linear forwards;
}

.cloud{
    display:flex;
    width:100%;
    height:100%;
    border-radius: inherit;
    background-color:var(--light);
    top:-5px;
    left:-7px;
    z-index:2;
    position: absolute;
    animation: .2s linear forwards;
}

.content{
    width:100%;
    height:100%;
    border-radius: inherit;
    padding:10px;
    display: flex;
    flex-direction: column;
    gap:20px;
}
#scroll{
    display: none;
}

.description{
    width:100%;
    height:auto;
    display: flex;
    flex-direction:column-reverse;
    gap:20px;
}

.skillful{
    display: flex;
    width:auto;
    height: auto;
    justify-content:space-between;
    align-items: center;
}

.abt_project{
    flex: 1;
}

.title{
    font-size:1.6rem;
    font-weight:800;
}

@media screen and (max-width:330px){
  .plot{
    display: none;
  }
  .confirm{
    width:300px;
    top:55%;
  }
  #section1 .container{
    justify-content:center;
    gap:0px;
    align-items: center;
  }
  input,textarea{
    width:270px;
  }
  .social_media{
    min-width:310px;
  }
  #profile_picture{
    width:120px;
    height:120px;
  }
  .project{
    width:300px;
    height:300px;
  }
  .modal2{
    padding-top:30px;
  }
  .content{
    gap:5px;
  }
  .description{
    gap:10px;
  }
  .tiptip{
    margin-bottom:5px;
    font-weight:600;
    font-size:1rem;
  }
  .frame{
    width:200px;
  }
  #modal{
    gap:10px;
    padding: 20px 15px 20px 15px
  }
  .skill2{
    padding: 4px 12px;
  }
  .links{
    margin-top:5px;
  }
  #description{
    max-height:200px;
    max-width:280px;
  }
  #name{
    font-size:1.4rem;
  }
  #background{
    display: none;
  }
  .title{
    font-size:1.2rem;
  }
}
@media screen and (min-width: 700px) {
    .confirm{
        width:500px;
        top:20px;
    }
    input,textarea{
        width:450px;
    }
    h1{
        font-size:2rem;
    }
    #profile_picture{
        width:130px;
        height: 130px;
    }
    .project{
        width:450px;
        height: 300px;
        flex-shrink: 0;
        padding:2px;
    }
    .project:hover{
        width:550px;
    }
    .pro{
        width:100%;
        height:auto;
        position:relative;
    }
    .pro::after{
        content:'';
        width:50px;
        height:100%;
        background:linear-gradient(90deg, var(--light2),var(--light2), transparent);
        position: absolute;
        top:-0px;
        z-index:2;
        left:-35px;
    }
    .pro::before{
        content:'';
        width:50px;
        position: absolute;
        height:100%;
        top:0px;
        right:-35px;
        z-index:2;
        background:linear-gradient(90deg,transparent, var(--light2), var(--light2));
    }
    .projects{
        width: 100%;
        height:auto;
        display: flex;
        align-items: flex-start;
        flex-wrap: nowrap;
        gap:40px;
        justify-content: flex-start;
        max-width:none;
        padding:0px 20px;
        position:relative;
        overflow-x:scroll;
    }
}
@media screen and (min-width:800px){
    .contact{
        flex-direction:row;
        gap:20px
    }
    input,textarea{
        width:350px;
    }
    .moon-item{
        width:15px;
        height:15px;
    }
    .menu-btn{
        gap:5px;
        width:37px;
        height:37px;
    }
    .moon{
        width:13px;
        height:13px;
    }
    .rays{
        width:2px;
        height:3px;
    }
    .cloud{
        top:-2px;
        left:-4px;
    }

    .togglebar{
        width:33px;
        height:20px;
        padding:1.5px 2px;
    }
    .knob{
        width:14px;
        height:14px;
        background-color:var(--accent);
        border-radius:12px;
        float:right;
        cursor:pointer;
        animation: .2s linear forwards;
    }
    .close{
        top:15px;
        right:15px;
    }

    .menu-dot{
        width:23px;
        height:3px;
    }
    .menu{
        width:400px;
        height:400px;
        top:90px;
        border-radius:10px;
        right:20px;
        box-shadow:0px 0px 2px -1px black;
        border:solid 1px var(--light3);
        z-index:15;

        .all-menu{
            border-radius:20px;

            .panes{
                display:none;
            }
        }
        .menu-items{
            border-radius:inherit;
            padding-top:10px;
            animation:menu-slide-in .2s forwards;

            .menu-item{
                margin-top:15px;

                .menu-header{
                    font-weight:900;
                    font-size: 1rem;
                    padding-bottom:2px;
                }
                .setting-item{
                    display:flex;
    
                    .plane1{
                        .theme-item{
                            font-size: 1rem;
                        }
    
                        .all-items{
                            display:flex;
                            gap:5px;
                        }
                    }
                }
            }
        }
           
    }
    #modal{
        padding: 35px 30px 30px 30px
    }
    #background{
        display:flex;
    }
    .modal2{
        width:90%;
        height:auto;
        border-radius:20px;
        background-color: var(--light);
        box-shadow:0px 0px 3px -1px;
        display:flex;
        padding:30px;
        padding-top:60px;
        justify-content: center;
        align-items: center;
        position: relative;
        animation:drop .5s linear forwards;
    }
    .modal2 ul{
        width:auto;
        display:flex;
    }
    .links{
        justify-content:flex-end;
    }
    .frame{
        width:252px;
        border-radius: 15px;
        aspect-ratio:16/9;
        overflow:hidden;
        display:flex;
        justify-content:center;
        align-items: center;
        position: relative;
        background-color: var(--light2);
    }
    iframe{
        transform:scale(0.25);
        aspect-ratio:16/9;
        border-radius: inherit;
        width:400%;
        height: 400%;
    }
    .content{
        width:100%;
        height:100%;
        border-radius: inherit;
        padding:10px;
        display: flex;
        flex-direction: column;
        gap:20px;
    }
    .description{
        width:100%;
        height:auto;
        display: flex;
        flex-direction: row;
        gap:40px;
    }
    .tiptip{
        font-size: 1.2rem;
        margin-bottom:3px;
        font-weight:600;
    }
 
    .abt_project{
        flex: 1;
    }
    .title{
        font-weight:800;
    }
    .plot {
        width: 250px;
        height: 250px;
    }
    .face{
        width:260px;
        height: 260px;
    }
    .face1  { transform: rotateY( 0deg) translateZ(125px); }
    .face2   { transform: rotateZ(180deg)  rotateY(180deg) translateZ(125px); }
    .face3   { transform:rotateY(-90deg) translateZ(125px);}
    .face4  { transform: rotateY( 90deg) translateZ(125px) }
    .face5    { transform: rotateX( 90deg) translateZ(125px);}
    .face6 { transform: rotateX(-90deg) translateZ(125px); }
    #span1{
        font-size:2.5rem;
    }
    form:hover{
        animation: twitch .5s linear forwards;
    }
    form,.modal2,#modal{
        border:solid 1px var(--light3);
    }
    #handshake{
        display: block;
    }
    #section1 .container{
        justify-content:space-evenly;
        padding-top: 70px;
    }
    #section1{
        min-height:0px;
    }
}
@media screen and (min-width:900px){
    h1{
        font-size:2.5rem;
    }
    h2{
        font-size:1.5rem;
    }
    #description{
        width:350px;
        font-size: 15px;
    }
    .projects{
        gap:20px;
     }
    .container{
        width:90%;
    }
    .socials{
        width: auto;
    }
    #text{
        text-align:left;
        font-size:2rem;
    }
    #section1 .container{
        display:flex;
        flex-direction:row;
        justify-content:center;
        align-items:center;
        padding-top:0px;
        gap:0px;
    }
   #text1{
        text-align:left;
        font-size:1.4rem;
    }
    .col1_1{
        gap:8px;
        flex-direction: column;
        align-items: flex-start;
    }
}
@media screen and (min-width:1060px){
    footer .container{
        flex-direction: row;
        justify-content: space-between;
    }
    .plot {
        width: 270px;
        height: 270px;
    }
    .face{
        width:270px;
        height: 270px;
    }
    .face1  { transform: rotateY( 0deg) translateZ(135px); }
    .face2   { transform: rotateZ(180deg)  rotateY(180deg) translateZ(135px); }
    .face3   { transform:rotateY(-90deg) translateZ(135px);}
    .face4  { transform: rotateY( 90deg) translateZ(135px) }
    .face5    { transform: rotateX( 90deg) translateZ(135px);}
    .face6 { transform: rotateX(-90deg) translateZ(135px); }
    .num{
         top:30px;
        left:30px;
    }
    .skillful{
      padding:0px 50px;
    }
    #text1{
        max-width:450px;
        font-size:1.6rem;
    }
    #myCanvas{
        visibility:visible;
    }
    .plot:hover .cube{
        animation:rotate .5s linear forwards;
    }
    .pageid{
        width:8px;
        height:8px;
        border-radius:50%;
        background-color:var(--color5);
        transition:0.5s;
        display:flex;
        justify-content: center;
        align-items:center;
        position: relative;
    }
    .pageid:hover, .scroll-cl:hover{
        transform:scale(1.5);
    }

    .pageid::after{
        content:"";
        width:auto;
        height:auto;
        display: none;
        justify-content: center;
        align-items: center;
        padding:5px;
        border-radius: 5px;
        border:solid 1px var(--light);
        background-color:var(--color5);
        position: absolute;
        right:18px;
        top:calc(height/2);
        font-size:0.5rem;
        color:var(--light);
        text-wrap:nowrap;
    }

    .pageid:hover::after{
        display:flex;
    }
    #toHome::after{
        content: "home";
    }
    #toProjects::after{
        content:'projects'
    }
    #toSkills::after{
        content:'technology stack'
    }
    #toContact::after{
        content:'contact'
    }

    .scroll-cl{
        width:30px;
        height:30px;
        padding:9.5px;
        display:flex;
        justify-content: center;
        align-items: center;
    }
    #pagination{
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
        flex:1;
    }
    #scroll{
        width:35px;
        height:110px;
        align-items: center;
        justify-content: space-between;
        position:fixed;
        display:flex;
        z-index:3;
        flex-direction:column;
        right:0px;
        border-top-left-radius:15px;
        border-bottom-left-radius:15px;
        bottom:10px;
        cursor: pointer;
        box-shadow:0px 0px 3px -3px;
        transition:0.5s;
    }
    #scroll:hover{
        background-color:var(--light);
    }
    .particles{
        display: block;
        width:50%;
        height:400px;
        position: relative;
    }

    .particles::after{
        content:" ";
        top:0px;
        left:0px;
        width:80%;
        height:100%;
        left:10%;
        display: block;
        position:absolute;
        opacity:0.5;
        border-top-left-radius:50% 40%;
        border-top-right-radius:30% 40% ;
        border-bottom-right-radius:50% 50%;
        border-bottom-left-radius:40% 20% ;
        background-color:var(--light2);
        /* animation: murf 20s linear infinite alternate; */
    }
    #socials-content{
        display: flex;
        flex-direction: column;
        gap:20px;
    }
    .particles img{
        z-index:2;
        position:absolute;
    }
    #span1{
        margin-bottom:30px;
        font-size:3rem;
    }
    button{
        height:30px;
    }
    .container{
        width:90%;
    }
    #divide{
        width:7px;
        height:calc(100% - 50%);
        top:calc(height/2);
        background-color:var(--color4);
        position: absolute;
        left:0px;
        border-radius:60px;
    }
    .img2{
        width:450px;
        height:450px;
    }
    .col1_1{
        width:52%;
    }
    .col2_1{
        width:48%;
        position:relative;
    }
    .col1_1{
        padding-right:50px;
        padding-left:50px;
        justify-content: flex-end;
    }
    #line{
        font-weight: 700;
    }
    input,textarea{
        width:450px;
    }
    input{
        height:35px;
    }
    .block{
        height:100px;
        display: flex;
        border-radius:5px;
        z-index:2;
        position: relative;
    }
    .blocks{
        width:100%;
        height:100%;
        display:flex;
        flex-wrap: wrap;
        gap:2px;
    }
    .block::after{
        content:' ';
        width:100%;
        height:100%;
        border-radius: inherit;
        display: block;
        top:0px;
        left:0px;
        background-color: var(--light);
        position: absolute;
    }
    .block:hover::after{
        /* background-color:#e4e9f0; */
        transform: scale(0.1) rotateZ(30deg) rotateX(600deg);
        transition:3s;
    }
    #background{
        background-color: var(--light2);
    }
    #section1 .container{
        gap:20px;
        padding:0px 15px;
    }
    #scroll-down{
        transform: rotate(90deg);
    }
    #scroll-up{
        transform: rotate(-90deg);
    }
    
}
@keyframes moving{
    0%,100%{
        transform:translateX(-5px) 
    }
    50%{
        transform:translateX(5px)
    }
}

@keyframes showup{
    to{
       transform:scale(100);
    }
}
@keyframes twitch{
    0%,100%{
       transform:rotate(0deg);
    }
    20%{
        transform:rotate(3deg);
    }
    40%{
        transform:rotate(-3deg);
    }
    60%{
        transform:rotate(1deg);
    }
    80%{
        transform:rotate(-1deg);
    }
}
@keyframes shine{
    from{
        width:20px;
        height:20px;
        opacity:0;
        transform:rotate(0deg);
    }
    to{
        height:35px;
        width:35px;
        opacity:1;
        transform:rotate(45deg);
    }
}
@keyframes dim{
    from{
        width:35px;
        height:35px;
        opacity:1;
        transform:rotate(45deg);

    }
    to{
        height:20px;
        width:20px;
        opacity:0;
        transform:rotate(0deg);
    }
}

@keyframes full-moon{
    from{
        transform:translateX(0px) translateY(0px);
    }
    to{
        transform:translateX(-10px) translateY(-10px);
    }
}
@keyframes half-moon{
    from{
        transform:translateX(-10px) translateY(-10px);
    }
    to{
        transform:translateX(0px) translateY(0px);
    }
}
@keyframes grow{
    to{
      opacity:1;
    }
}

@keyframes drop{
    0%{
        transform:translateY(-100px);
    }
    20%{
        transform:translateY(0px);
    }
    40%{
        transform:translateY(-8px);
    }
    60%{
        transform:translateY(0px);
    }
    80%{
        transform:translateY(-2px);
    }
    100%{
        transform:translateY(0px);
    }
}
@keyframes float{
    to{
        transform:translateY(-1000px);
    }
}
@keyframes rock{
    0%,100%{
        border-top-left-radius:50% 40px;
        border-top-right-radius:20% 20px;
    }
    50%{
        border-top-right-radius:50% 40px;
        border-top-left-radius:20% 20px;
    }
}
@keyframes chameleon{
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}
@keyframes clicked {
    0%,100%{
        transform:scale(1)
    }
    50%{
        transform:scale(0.9)
    }
}
@keyframes rotate {
    from {
        transform: rotateX(0deg)
    }
    to {
        transform: rotateX(90deg)
    }
}
@keyframes rotate2 {
    from {
        transform: rotateX(0deg) rotateY(0deg)
    }
    to {
        transform: rotateX(360deg) rotateY(360deg)
    }
}

@keyframes knobRight{
    0%{
        width:23px;
        float:left;
    }
    50%{
        width:100%;
    }
    100%{
        width:23px;
        float:right;
    }
}
@keyframes knobLeft{
    0%{
        width:23px;
        float:right;
    }
    50%{
        width:100%;
    }
    100%{
        width:23px;
        float:left;
    }
}
@keyframes knobRight2{
    0%{
        width:14px;
        float:left;
    }
    50%{
        width:100%;
    }
    100%{
        width:14px;
        float:right;
    }
}
@keyframes knobLeft2{
    0%{
        width:14px;
        float:right;
    }
    50%{
        width:100%;
    }
    100%{
        width:14px;
        float:left;
    }
}
@keyframes rotateon {
    from {
        transform: rotateZ(0deg)
    }
    to {
        transform: rotateZ(360deg)
    }
}

@keyframes slidein{
    from {
        transform:translateX(-50px);
        opacity:0;
    }
    to{
        transform:translateX(0px);
        opacity:1;
    }
}
@keyframes slide-down {
    from{
        height:0%;
    }
    to{
        height:100%;
    }
}

@keyframes menu-slide-in{
    from{
        opacity:0;
    }
    to{
        opacity:1;
    }
}
@keyframes shine2{
    from{
        width:13px;
        height:13px;
        opacity:0;
        transform:rotate(0deg);
    }
    to{
        height:23px;
        width:23px;
        opacity:1;
        transform:rotate(45deg);
    }
}
@keyframes dim2{
    from{
        width:23px;
        height:23px;
        opacity:1;
        transform:rotate(45deg);

    }
    to{
        height:13px;
        width:13px;
        opacity:0;
        transform:rotate(0deg);
    }
}