*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    text-decoration: none;
    border: none;
    outline: none;
    scroll-behavior: smooth;
    font-family: 'Poppins',sans-serif;
}
body::-webkit-scrollbar
{
    display: none;
}
:root{
    --bg-color:#1f242d;
    --second-bg-color:#323946;
    --text-dark:#fff;
    --main-color:#0ef;
}
html{
    font-size: 62.5%;
    overflow-x: hidden;
}
@keyframes change {
    0%
    {
        background-image: radial-gradient(circle at center center, transparent,rgb(33,33,33)),repeating-linear-gradient(135deg, rgb(33,33,33) 0px, rgb(33,33,33) 2px,transparent 2px, transparent 10px,rgb(33,33,33) 10px, rgb(33,33,33) 11px,transparent 11px, transparent 21px),repeating-linear-gradient(45deg, rgb(47,47,47) 0px, rgb(47,47,47) 4px,transparent 4px, transparent 8px),linear-gradient(90deg, rgb(33,33,33),rgb(33,33,33));;
        background-position: center;
        background-repeat: no-repeat;
    }
    20%
    {
        background-image:  linear-gradient(45deg, rgba(187, 187, 187,0.04) 0%, rgba(187, 187, 187,0.04) 50%,rgba(86, 86, 86,0.04) 50%, rgba(86, 86, 86,0.04) 100%),linear-gradient(135deg, rgba(166, 166, 166,0.04) 0%, rgba(166, 166, 166,0.04) 50%,rgba(92, 92, 92,0.04) 50%, rgba(92, 92, 92,0.04) 100%),linear-gradient(90deg, rgb(20,20,20),rgb(20,20,20)); 
        background-position: center;
        background-repeat: no-repeat;
        
    }
    40%
    {
        background-image:linear-gradient(135deg, rgba(107, 107, 107,0.06) 0%, rgba(107, 107, 107,0.06) 50%,rgba(202, 202, 202,0.06) 50%, rgba(202, 202, 202,0.06) 100%),linear-gradient(90deg, rgb(20,20,20),rgb(20,20,20));
        background-position: center;
        background-repeat: no-repeat;
    }
    60%
    {
        background-image: radial-gradient(circle at center center, rgb(71, 71, 71),rgb(8, 8, 8));
        background-position: center;
        background-repeat: no-repeat;
    }
    80%
    {
        background-image: linear-gradient(12deg, rgba(193, 193, 193,0.05) 0%, rgba(193, 193, 193,0.05) 2%,rgba(129, 129, 129,0.05) 2%, rgba(129, 129, 129,0.05) 27%,rgba(185, 185, 185,0.05) 27%, rgba(185, 185, 185,0.05) 66%,rgba(83, 83, 83,0.05) 66%, rgba(83, 83, 83,0.05) 100%),linear-gradient(321deg, rgba(240, 240, 240,0.05) 0%, rgba(240, 240, 240,0.05) 13%,rgba(231, 231, 231,0.05) 13%, rgba(231, 231, 231,0.05) 34%,rgba(139, 139, 139,0.05) 34%, rgba(139, 139, 139,0.05) 71%,rgba(112, 112, 112,0.05) 71%, rgba(112, 112, 112,0.05) 100%),linear-gradient(236deg, rgba(189, 189, 189,0.05) 0%, rgba(189, 189, 189,0.05) 47%,rgba(138, 138, 138,0.05) 47%, rgba(138, 138, 138,0.05) 58%,rgba(108, 108, 108,0.05) 58%, rgba(108, 108, 108,0.05) 85%,rgba(143, 143, 143,0.05) 85%, rgba(143, 143, 143,0.05) 100%),linear-gradient(96deg, rgba(53, 53, 53,0.05) 0%, rgba(53, 53, 53,0.05) 53%,rgba(44, 44, 44,0.05) 53%, rgba(44, 44, 44,0.05) 82%,rgba(77, 77, 77,0.05) 82%, rgba(77, 77, 77,0.05) 98%,rgba(8, 8, 8,0.05) 98%, rgba(8, 8, 8,0.05) 100%),linear-gradient(334deg, hsl(247,0%,2%),hsl(247,0%,2%));
        background-position: center;
        background-repeat: no-repeat;
    }
    100%
    {
        background-image: linear-gradient(116deg, rgba(232, 232, 232, 0.03) 0%, rgba(232, 232, 232, 0.03) 10%,rgba(14, 14, 14, 0.03) 10%, rgba(14, 14, 14, 0.03) 66%,rgba(232, 232, 232, 0.03) 66%, rgba(232, 232, 232, 0.03) 72%,rgba(44, 44, 44, 0.03) 72%, rgba(44, 44, 44, 0.03) 81%,rgba(51, 51, 51, 0.03) 81%, rgba(51, 51, 51, 0.03) 100%),linear-gradient(109deg, rgba(155, 155, 155, 0.03) 0%, rgba(155, 155, 155, 0.03) 23%,rgba(30, 30, 30, 0.03) 23%, rgba(30, 30, 30, 0.03) 63%,rgba(124, 124, 124, 0.03) 63%, rgba(124, 124, 124, 0.03) 73%,rgba(195, 195, 195, 0.03) 73%, rgba(195, 195, 195, 0.03) 84%,rgba(187, 187, 187, 0.03) 84%, rgba(187, 187, 187, 0.03) 100%),linear-gradient(79deg, rgba(254, 254, 254, 0.03) 0%, rgba(254, 254, 254, 0.03) 27%,rgba(180, 180, 180, 0.03) 27%, rgba(180, 180, 180, 0.03) 33%,rgba(167, 167, 167, 0.03) 33%, rgba(167, 167, 167, 0.03) 34%,rgba(68, 68, 68, 0.03) 34%, rgba(68, 68, 68, 0.03) 63%,rgba(171, 171, 171, 0.03) 63%, rgba(171, 171, 171, 0.03) 100%),linear-gradient(109deg, rgba(71, 71, 71, 0.03) 0%, rgba(71, 71, 71, 0.03) 3%,rgba(97, 97, 97, 0.03) 3%, rgba(97, 97, 97, 0.03) 40%,rgba(40, 40, 40, 0.03) 40%, rgba(40, 40, 40, 0.03) 55%,rgba(5, 5, 5, 0.03) 55%, rgba(5, 5, 5, 0.03) 73%,rgba(242, 242, 242, 0.03) 73%, rgba(242, 242, 242, 0.03) 100%),linear-gradient(271deg, rgba(70, 70, 70, 0.03) 0%, rgba(70, 70, 70, 0.03) 11%,rgba(178, 178, 178, 0.03) 11%, rgba(178, 178, 178, 0.03) 23%,rgba(28, 28, 28, 0.03) 23%, rgba(28, 28, 28, 0.03) 72%,rgba(152, 152, 152, 0.03) 72%, rgba(152, 152, 152, 0.03) 86%,rgba(43, 43, 43, 0.03) 86%, rgba(43, 43, 43, 0.03) 100%),linear-gradient(90deg, rgb(27, 27, 27),rgb(1, 1, 1));
        background-position: center;
        background-repeat: no-repeat;
    }
    
}
.pop
{
    background: #323946;
    width: max-content;
    height: max-content;
    padding: 10px;
    border-radius: 10px;
    

}
.pop p{
    color: cyan;
    font-size: 20px;
    font-weight: 600;
    font-family: 'Courier New', Courier, monospace;
}
section{
    min-height: 100vh;
    padding: 10rem 9%;
    background-image: radial-gradient(circle at center center, rgb(71, 71, 71),rgb(8, 8, 8));
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    border: none;
    animation: change 10s ease-in-out infinite;
    
}
.header{
    position:fixed;
    top: 0;
    left: 0;
    font-size: large;
    width: 100%;
    padding: 2rem 9%;
    background: var(--bg-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index:100;
}
.logo{
    font-size: 2.5rem;
    color: white;
    font-weight: 600;
    cursor: default;

}
.navbar a {
    font-size: 1.9rem;
    font-weight: 100;
    color:whitesmoke;
    margin-left: 4rem;
    cursor:pointer;
    transition: .5s ease;
    
}
.navbar a:hover,
.navbar a:active
{
    color:var(--main-color);
    text-shadow: #0ef;
    text-shadow: 0 0 40px var(--main-color);

}
#menu-icon{
    font-size: 3.6rem;
    color: white;
    display: none;
}
.togglebar
{
    display: none;
    width: 300px;
    height: 740px;
    position: fixed;
    background: #1f242d;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 5px;
    z-index: 2;
    box-shadow: 0 0 10px #0ef ;
    border-radius: 10px;
}
body.show .togglebar
{
    display: flex;
}
.togglebar h5{
    font-size: 6rem;
    margin-top: -100px;
    margin-bottom: 70px;
    font-family:Georgia, 'Times New Roman', Times, serif;
    color: #0ef;
    text-shadow: 0 0 10px whitesmoke;
}
.togglebar a {
    font-size: 2rem;
    font-weight: 100;
    color:whitesmoke;
    cursor:pointer;
    transition: .5s ease;
    margin-top: 35px;

    
}
.togglebar a:hover,
.togglebar a:active
{
    color:var(--main-color);
    text-shadow: #0ef;
    text-shadow: 0 0 40px var(--main-color);

}
.home{
    display: flex;
    justify-content: center;
    align-items: center;
}
.home-img img{
    width: 20vw;
    height: auto;
    align-items: fixed;
    transition: .5s ease;
}
.home-img img:hover {
    transform: scale(1.13);
    transition: transform .5s ease-in-out;
    filter: drop-shadow(0 0 200px cyan);
}
.home-content{
    color: white;
    margin-left: 50px;
}
.home-content h3
{
    font-size: 3.0rem;
    font-weight: 700;

}
span{
    color: var(--main-color);
}
.home .home-content .text-anime{
    color: var(--main-color);
    border-right: 3px solid white;
    width: 0;
    display: flex;
    align-items: end;
    white-space: nowrap;
    margin-top: -33px;
    margin-left: 165px;
    overflow: hidden;
    animation: type 4s steps(90,end) forwards infinite;
}
@keyframes type 
{
    0%
    {
        width: 0;
    }
    100%
    {
        width: 70%;
        border-right: none;
    }
    
}

.home-content h3:nth-of-type(2)
{
    margin-bottom: 2rem;
}
.home-content h1
{
    font-size: 5.6rem;
    font-weight: 700;
    line-height: 1.3;

}
.home-content p{
    font-size: 1.6rem;

}
.about-content .me_cnt
{

    box-shadow: 0 0 20px #a8a7ace1,inset 0 0 10px;
    display: flex;
    border: 3px solid black;
    border-radius: 30px;
    margin:40px;
    padding: 2rem;
    width: 500px;
    height: 400px;
    background: linear-gradient(135deg, #0d1120 0%, #374b94 43%, #0d1120 100%);
}
.about-content .me_cnt p{
    font-size: 25px;
    font-weight: 200;
    font-family:'Times New Roman', Times, serif;
    display:flex;
    align-items: left;
    justify-content: left;
    padding: 10px;
    margin: 10px;
    letter-spacing: 2px;
}
.about .about-img img
{
    width: 370px;
    height: 500px;
    object-fit: cover;
    border: #323946;
    border-radius: 100px;
    position:relative;
    z-index: 1;
    margin-right: 200px;
    

}
.social-media a{
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 4rem;
    height: 4rem;
    background: transparent;
    border: .2rem solid var(--main-color);
    border-radius: 50%;
    font-size: 2rem;
    color: var(--main-color);
    margin: 3rem 1.5rem 3rem 0;
    transition: .5s ease;

}
.social-media a:hover{
    background:var(--main-color);
    color: var(--second-bg-color);
    box-shadow: 0 0 1rem var(--main-color);

}
.btn
{
    display: inline-block;
    padding: 1rem 2.8rem;
    background: var(--main-color);
    margin-top: 10px;
    border-radius: 4rem;
    font-size: 1.6rem;
    color: var(--second-bg-color);
    letter-spacing: .1rem;
    font-weight: 600;
    transition: .5s ease;

}
.btn:hover{
    box-shadow: 0 0 20px var(--main-color),
    0 0 40px var(--main-color);

}
.btn:active
{
    transform: rotateY(36deg);
}
.about
{
    display: flex;
    color: white;
    justify-content: center;
    align-items: center;
    gap: 2rem;
}
.heading{
    text-align: center;
    font-size: 4.5rem;
    margin-top: 2px;
    color: white;
    padding: 1.2rem;

}
.about-content h2{
    text-align: left;
    line-height: 1.2;
    

}
.about-content h3{
    font-size: 2.6rem;
}
.about-content p{
    font-size: 1.6rem;
    margin:2rem 0 3rem;  

}
.about-content .btn
{
    display: inline-block;
    justify-content: center;
    align-items: center;
    margin-left: 215px;
    padding: 1rem 2.8rem;
    background: var(--main-color);
    margin-top: 1px;
    border-radius: 4rem;
    font-size: 1.6rem;
    color: var(--second-bg-color);
    letter-spacing: .1rem;
    font-weight: 600;
    transition: .5s ease;
}
.skills h2{
    margin:5rem;
}
.skills-container{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 2rem;
}
.skills .skills-box {
    flex: 1 1 30rem;
    background: var(--second-bg-color);
    padding: 3rem 2rem 4rem;
    border-radius: 2rem;
    text-align: center;
    border: .2rem solid var(--bg-color);
    transition: transform .5s ease, box-shadow .5s ease;
}

.skills-container .skills-box:hover {
    border-color: var(--main-color);
    transform: scale(1.1);
    box-shadow: 0 0 2rem var(--main-color);
}
.skills-box h3{
    font-size: 2.6rem;
    color: #fff;
    padding: 20px;
}
.skills-box p{
    font-size: 1.6rem;
    margin: 1rem 0 3rem;
    color: #fff;
}
.cr-cnt
{
    display: flex;
    flex-wrap: wrap;
    gap: 9rem;
    justify-content: center;
    align-items: center;
    padding: 3rem 2rem 4rem;
    object-fit:cover;

}
.carousel
{
    display: flex;
    background: none;
    background-size: cover;
    text-align: center;
    border: .2rem solid black;
    border-radius: 4rem;
    box-shadow:0 0 10px grey,0 0 30px grey,0 0 50px grey;
    text-align: bottom;
    width: 700px;
    height:450px;
    scrollbar-width: none;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
}
.carousel img{
    flex:0 0 100%;
    width: 100vh;
    height: 100%;
    padding: 2px;
    object-fit: fill;
    align-items: center;
    justify-content: center;
    left: 0;
    right: 0;
    scroll-snap-align: start;
}
.cr-cnt a{
    color: cyan;
    font-weight: 800;
    margin-top:-70px;
    font-family: 'Courier New', Courier, monospace;
    text-decoration: none;
    font-size: 40px;
    
}
.cr-cnt a:active
{
    color: orange;
}
.cr-cnt a:hover
{
    filter: drop-shadow(0 0 8px rgba(218, 189, 26, 0.823));
}
.contact h2{
    margin-bottom: 3rem;
}
.contact form{
    max-width: 70rem;
    margin: 1rem auto;
    text-align: center;
    margin-bottom: 3rem;
    
}
.contact form .input-box{
    display:flex;
    justify-content: space-between;
    flex-wrap: wrap;

}
.contact form .input-box input,
.contact form textarea{
    width: 100%;
    padding: 1.5rem;
    font-size: 1.6rem;
    color:white;
    background: var(--second-bg-color);
    border-radius: .8rem;
    margin: .7rem 0;
}
.contact form .input-box input{
    width: 49%;
}
.contact form textarea{
    resize:none;
}
.contact form .btn{
    margin-top: 2rem;
    cursor: pointer;

}
.footer
{
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    padding: 2em 9%;
    background: var(--second-bg-color);
}
.footer-text p
{
    font-size: 1.6rem;
    color: #fff;
}
.footer-iconTop a
{
    display: inline-flex;
    justify-content: center;
    align-items: center;
    padding: .8rem;
    background: var(--main-color);
    border-radius: .8rem;
    transition: .5s ease;
}
.footer-iconTop a:hover
{
    box-shadow: 0 0 1rem var(--main-color);
    
}
.footer-iconTop a
{
    font-size: 2.4rem;
    color: var(--second-bg-color);
    
}
.footer-iconTop a:focus
{
    transform: translateY(30%);

}
.footer-iconTop p1
{
    color:white;
    font-size: 2rem;
    padding: .5rem;
}
#checkbox {
    display: none;
}
  
  .switch {
    position: relative;
    width: 40px;
    height: 40px;
    background-color: rgb(99, 99, 99);
    border-radius: 50%;
    z-index: 1;
    cursor: pointer;
    margin-left: 675px;
    margin-top: -30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid rgb(126, 126, 126);
    box-shadow: 0px 0px 3px rgb(2, 2, 2) inset;
  }
  .switch svg {
    width: 1.2em;
  }
  .switch svg path {
    fill: rgb(48, 48, 48);
  }
  #checkbox:checked + .switch {
    box-shadow: 0px 0px 1px rgb(151, 243, 255) inset,
      0px 0px 2px rgb(151, 243, 255) inset, 0px 0px 10px rgb(151, 243, 255) inset,
      0px 0px 40px rgb(151, 243, 255), 0px 0px 100px rgb(151, 243, 255),
      0px 0px 5px rgb(151, 243, 255);
    border: 2px solid rgb(255, 255, 255);
    background-color: rgb(146, 180, 184);
  }
  #checkbox:checked + .switch svg {
    filter: drop-shadow(0px 0px 5px rgb(151, 243, 255));
  }
  #checkbox:checked + .switch svg path {
    fill: rgb(255, 255, 255);
  }

  


/* General Styles */
@media screen and (max-width: 1200px) {
   
    .header {
        padding: 1.5rem 5%;
    }

    .navbar a {
        font-size: 1.6rem;
        margin-left: 2rem;
    }

    .home-content h1 {
        font-size: 4.8rem;
    }

    .home-content h3 {
        font-size: 2.6rem;
    }

    .home-img img {
        width: 30vw;
    }

    .about-img {
        width: 45vw;
    }

    .skills .skills-box {
        flex: 1 1 45%;
    }

    .cr-cnt a {
        font-size: 30px;
    }

    .carousel {
        width: 90%;
        height: 300px;
    }

    .carousel img {
        height: 100%;
    }

    .contact form .input-box input {
        width: 100%;
    }

    .footer-iconTop a {
        font-size: 2rem;
    }
}

@media screen and (max-width: 768px) {
    .header {
        padding: 1.2rem 3%;
        flex-direction: column;
        gap: 1rem;
    }

    .logo {
        font-size: 2rem;
    }

    .navbar a {
        font-size: 1.4rem;
        margin-left: 1.5rem;
    }

    #menu-icon {
        display: block;
        position: fixed;
        margin-left: -720px;
    }

    .home-content h1 {
        font-size: 3.8rem;
    }

    .home-content h3 {
        font-size: 2.2rem;
    }

    .home-img img {
        width: 40vw;
    }

    .about {
        flex-direction: column;
        text-align: center;
    }

    .about-img {
        width: 60vw;
    }

    .about-content h2 {
        font-size: 2.5rem;
    }

    .skills-container {
        flex-direction: column;
    }

    .carousel {
        width: 100%;
        height: 250px;
    }

    .cr-cnt {
        flex-direction: column;
    }

    .contact form {
        max-width: 100%;
        padding: 1rem;
    }

    .footer {
        flex-direction: column;
        gap: 1rem;
    }
}

@media screen and (max-width: 800px) {
    body{
        width: 100vh;
    }
    .header {
        padding: 1rem;
    }

    .logo {
        font-size: 1.8rem;
    }

    .navbar {
        display: none;
    }

    .home-content h1 {
        font-size: 3rem;
    }

    .home-content h3 {
        font-size: 2rem;
    }

    .home-content p {
        font-size: 1.4rem;
    }

    .home-img img {
        width: 60vw;
    }

    .about-img {
        width: 80%;
        margin-left: 200px;
    }

    .about-content h2 {
        display: none;
    }
    .about-content h3
    {
        color: #0ef;
        margin-top: 15px;
        font-size: 3rem;
    }
    .about-content .me_cnt
    {
        margin-top: 70px;
    }
    .about-content .btn
    {
        margin: 5px;
        font-size: 2.3rem;

    }

    .skills .skills-box {
        width: 100%;
    }

    .carousel {
        height: 500px;
        width: 670px;
        margin-left: -58px;
        position: relative;
    }
    .carousel img{
        margin: 0;
        padding: 0;
    }

    .contact form textarea {
        height: 200px;
    }

    .footer-iconTop a {
        font-size: 2rem;
    }
}
@media screen and (max-width:400px){
    body
    {
        width:110vh;
    }
    .text-anime{
        font-size: 35px;
        margin-left: 500px;
    }

}


.no-animation section {
    animation:none;
    background-image:  linear-gradient(45deg, rgba(187, 187, 187,0.04) 0%, rgba(187, 187, 187,0.04) 50%,rgba(86, 86, 86,0.04) 50%, rgba(86, 86, 86,0.04) 100%),linear-gradient(135deg, rgba(166, 166, 166,0.04) 0%, rgba(166, 166, 166,0.04) 50%,rgba(92, 92, 92,0.04) 50%, rgba(92, 92, 92,0.04) 100%),linear-gradient(90deg, rgb(20,20,20),rgb(20,20,20)); 

    

}