@font-face {
    font-family: 'Dots';
    src: url('./Resources/LED\ Dot-Matrix\ 400.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

:root {
    --ani: slideIn 1s ease-in-out
}

#preloader {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    background-color:#000000;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Loader animation */
.loader {
    border: 1px solid #f3f3f3;

    border-top: 3px solid #FFFFFF;

    border-radius: 50%;
    width: 4.35%;
    height: 8.7%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

html {
    scroll-behavior: smooth;
    overflow-x: hidden;
}



body {
    /* background: rgb(240, 245, 245); */
    background: #000000;
    margin: 0%;
    padding: 0%;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    overflow-x: hidden;
    color: #f7f7f7;

}

.everything {
    margin-left: 15%;
    max-width: 90%;
}

#title {
    padding: 2%;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    background: rgb(240, 245, 245);
    background: #000000;
    margin: -1.7%;
    background-image: "pexels";

}

/* From Uiverse.io by KshitijAdhikaree */
/* The switch - the box around the slider */
/* .switch-container {
    position: fixed;
    display: inline-block;
    width: 3.5em;
    height: 2em;

        border: #388087 2px solid;
        border-radius: 30px;
        top: 2%;
        right: 2%; 

  }

  
  /* Hide default HTML checkbox  */
/* .switch-container input {
    opacity: 0;
    width: 0;
    height: 0;
  }
  
  The slider 
  .switch-container .slider {
    
    --background: linear-gradient(to right, inherit);
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--background);
    transition: background-color 0.5s;
    border-radius: 30px;
  
  }
  
  .switch-container .slider:before {
    position: absolute;
    content: "";
    height: 1.4em;
    width: 1.4em;
    border-radius: 50%;
    left: 10%;
    bottom: 15%;
    box-shadow: inset 15px -4px 0px 15px #f8ea27;
    background: var(--background);

    transition: transform 0.5s, box-shadow 0.5s;
  }

  
  .switch-container input:checked + .slider {
    background-color: #000;
  }
  
  .switch-container input:checked + .slider:before {
    transform: translateX(100%);
    box-shadow: inset 8px -4px 0px 0px #f8f8f4;
  }
   */
#welcome {
    color: #FFFFFF;
    /* Example for secondary text */

    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    display: flex;
    justify-content: center;
    animation: slideIn .85s ease-in-out;
}

#authoris {
    height: 1%;
    /*This part is important for centering*/
    display: grid;
    place-items: center;
}

.typing-demo {
    width: 330px;
    animation: typing 2s steps(15), blink .5s step-end infinite alternate;
    white-space: nowrap;

    overflow: hidden;
    border-right: 3px solid rgb(255, 255, 255);
    /* font-family: 'Dots'; */
    font-size: 2em;
}

#react-root {
    width: auto;
    white-space: nowrap;
    overflow: hidden;
    /* font-family: monospace; */
    font-size: 18px;
    color: #FFFFFF;
    /* Example for secondary text */

}

/* .dark-mode {
    background-color: black;
    color: white;
  } */

@keyframes typing {
    from {
        width: 0
    }

}


@keyframes blink {
    50% {
        border-color: transparent
    }
}

#down {
    position: fixed;
    bottom: 2%;
    right: 2%;
    padding: 10px 20px;
    background-color: #388087;
    color: #f3f3f3;
    border: none;
    border-radius: 9%;
    box-shadow: 5px 5px grey;
    font-size: 16px;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    animation: slideIn .85s ease-in-out;
}

#down a {
    text-decoration: none;
    color: inherit;

}

#typnam {
    color: #FFFFFF;
    /* Example for secondary text */

    font-family: 'Dots', 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;

}

#socials {
    display: flex;
    justify-content: center;
    overflow: hidden;
    background: rgb(240, 245, 245);
    background: #000000
}

#socials a {
    padding: 2%;
    margin: 0%;
    display: block;
    text-align: center;
    max-width: 7%;
    animation: slideIn .85s ease-in-out;
    filter: invert(1);
}

#socials a:hover {

    color: black;
}

#nav {
    display: flex;
    justify-content: center;
    background: rgb(240, 245, 245);
    background: #000000;
    box-shadow: 5px 5px 5px 5px #000000;
    margin-right: 70%;
    display: block;
    position: fixed;
    overflow: scroll;
    overflow-x: hidden;
    scroll-behavior: smooth;
    scrollbar-width: thin;
    scrollbar-color: #388087;
    min-width: 15%;
    height: 100%;

}


#nav a {
    padding: 10%;
    margin: 0%;
    display: block;
    text-align: center;
    text-decoration: none;
    color: #999999;
    /* Example for secondary text */
    animation: slideIn 0.85s ease-in-out;
    /* border-radius: 10px; */



}

#nav a:hover {

    background: #000000;
    font-family: "DOTS";
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    color: #FFFFFF;
    /* Example for text */
    border-radius: 15px;

    font-size: large;

}

#certi,
#ab,
#proj,
#contact {
    margin: 1%;
    padding: 4%;
    margin-top: 0%;
    padding-top: 0%;
}

.projectdiv {
    display: flex;
    flex-wrap: wrap;
}

#ab {
    border: 1px solid #999999;
    border-radius: 10px;
}

.abo {
    display: flex;
}

#ab p {
    display: flex;
    justify-content: center;
}

#ab h4 {

    margin-top: 4%;
}

#proj {
    margin-top: 1%;
}


#k1 {
    width: 60%;
    height: 80%;

}

#k1:hover {
    width: 70%;
    height: 90%;
}

#n2 {
    margin-top: 10%;
    display: flex;
    justify-content: center;
    color: #FFFFFF;
    /* Example for text */
    font-family: 'DOTS';
}

#n4 {
    padding: 1%;
    display: flex;
    justify-content: center;
    color: #333333;

}

#e4,
#e3,
#e2 {
    width: 60%;
    height: 80%;
    /* border:#388087 2px solid; */
    position: relative;
    cursor: pointer;
    animation: slideIn 1s ease-in-out;
    filter: invert(1);

}

#urlp li,
#zocostop li,
#blogp li,
#finalp li,
#attendp li,
#prodp li {
    padding: 3%;

}

#r6 {
    overflow: break-word;
    position: relative;
    padding: 7%;
    margin: inherit;

    cursor: pointer;
    color: #FFFFFF;
    /* background: rgb(54,249,247); */
    background: inherit;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    border: 10px solid linear-gradient(90deg, rgba(248, 249, 54, 1) 0%, rgba(54, 249, 247, 1) 64%);
    border-radius: 10px;
}

#r5 {
    overflow: break-word;
    position: relative;
    padding: 7%;
    margin: inherit;
    background-color: #c2edce;
    background: inherit;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    border: 10px solid linear-gradient(90deg, rgba(248, 249, 54, 1) 0%, rgba(54, 249, 247, 1) 64%);
    cursor: pointer;
    color: #FFFFFF;
    border-radius: 10px;
}

#r4 {
    overflow: break-word;
    position: relative;
    padding: 7%;
    margin: inherit;
    background: inherit;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    border: 10px solid linear-gradient(90deg, rgba(248, 249, 54, 1) 0%, rgba(54, 249, 247, 1) 64%);
    cursor: pointer;
    color: #FFFFFF;
    border-radius: 10px;
}

#huihui {
    width: 30%;
    height: 10%;
    animation: slideX 1s ease-in-out;
    filter: invert(1);

}

#edu {
    padding: 1%;
    max-height: .1%;



}

#i3 {
    display: flex;
    justify-content: center;
    padding-top: 5%;
    margin-left: 10%;
    margin-bottom: 7%;
    padding-bottom: 7%;
    color: #f7f7f7;

}

#i4 {
    display: flex;
    justify-content: center;
    margin: 5%;
    padding: 3%;
    margin-bottom: 0%;
    padding-bottom: 0%;
    list-style: disc;
}


#linked,
#nptel,
#infosys {
    padding: 5%;
    margin: 3%;
    background: inherit;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);

    color: #999999;
    /* Example for secondary text */

    animation: slideIn 1s ease-in-out;
    border-radius: 10px;
    border: 1px solid #999999;
}


#linked h3,
#nptel h3,
#infosys h3 {
    color: #f7f7f7;
}

#skills {
    border-top: #f7f7f7 1px dotted;
    border-bottom: hsl(0, 0%, 97%) 1px dotted;
    white-space: nowrap;
    background: inherit;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);

    overflow: hidden;

}

#skillset {
    display: inline-block;
    position: relative;
      animation: scroll-left 12s linear infinite;

}
#skillset img {
    margin: auto;
    margin-top: 4%;
    margin-bottom: 4%;
    padding-left: 1%;
}

#skill img:hover {
    cursor: pointer;
    animation-play-state: paused;

}

@keyframes scroll-left {
  0% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(-300%);
  }
}


/* .card {  
    box-shadow: 2px 6px 8px 2px rgba(0,0,0,0.2);  
    transition: 0.2s;  
    width: 35%;  
    background-color: white;  
    margin: 10px;  
    }   */
#s1,
#s2,
#s3,
#s4,
#s5,
#s6,
#s7,
#s8 {
    width: 10%;
    height: 10%;
    margin: 2%;

}

#s6 {
    filter: invert(1);
}

#s9 {
    width: 7.5%;
    height: 3%;
    margin: 2%;
}

#urlp,
#finalp,
#attendp,
#blogp,
#zocostop,
#prodp {
    padding: 3%;
    margin: 3%;
    background: inherit;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    color: #cbc5c5f7;
    border-radius: 10px;
    animation: slideIn 1.7s ease-in-out;
    max-width: 33.3%;
    margin-left: 7%;
    border: 1px solid #999999;
    font-size: small;
}

#attendp {
    margin-top: 40%;
}

#urlp a,
#blogp a,
#zocostop a,
#prodp a {
    margin: -1%;

    text-decoration: none;
    color: inherit;
}

#urlp h3,
#finalp h3,
#attendp h3,
#blogp h3,
#zocostop h3,
#prodp h3 {
    color: #f7f7f7;
    font-family: "DOTS";
}

.pimg {
    margin: 2.5%;
    padding: 2.5%;
    width: 90%;
    height: 40%;
    border-radius: 25px;
}

#f1,
#f2 :hover {
    border: 4px black solid;
}

#cd1,
#cd2,
#cd3 {
    background-color: inherit;
    color: #f7f7f7;
    border: 1px solid whitesmoke;
}


#contact {
    margin: -1%;
    display: flex;
    justify-content: right;
    padding: 2%;
    margin-top: 0%;
    padding-top: 0%;

    /* Example for secondary text */
    background: #000000;
    color: #f7f7f7;
    margin-top: 0;
    margin-bottom: 0;
    margin-right: 0;
    animation: slideX 1s ease-in-out;

}


#ucm {
    display: flex;
    justify-content: left;
}

#form {
    margin: 0%;
    margin-right: 0%;
    padding-right: 10%;
    padding: 2%;
    display: flex;
    justify-content: right;
}

form input {
    box-shadow: 5px 5px 5px 5px inherit;
    border-radius: 25px;
    background-color: inherit;
    color: #FFFFFF;
    padding: 7%;
}

form select {
    box-shadow: 5px 5px 5px 5px inherit;
    border-radius: 25px;
    background-color: inherit;
    color: black;
}

form select:hover {
    background-color: inherit;
}

form textarea {
    box-shadow: 5px 5px 5px 5px inherit;
    border-radius: 5px;
    background-color: inherit;
    color: black;
}

form input[type=submit] {
    margin: 10%;
    background-color: inherit;
    color: #999999;
}

form input[type=submit] :hover {
    background-color: yellowgreen;
    color: cornsilk;
}

form a {
    color: #FFFFFF;
}

select {
    background-color: inherit;
}

#gcq {
    background: #000000;
    margin: -1.0%;
}

#x1 {
    width: 10%;
    height: 35%;
    filter: invert(1);
}

#x1:hover {
    width: 15%;
    height: 20%;
}

#x2 {
    margin-left: 10%;
    margin-top: 5%;
    width: 10%;
    height: 7%;
    border-radius: 200%;
    margin-right: 2%;



}

#x2:hover {
    width: 15%;
    height: 15%;
}

footer {
    background-color: black;
    color: white;
    text-align: center;
    margin: 0%;
    margin-right: -2%;
}


@keyframes moc {
    0% {
        transform: translate(0%, 0);

    }

    100% {
        transform: translate(-37%, 0);



    }


}


@media only screen and (max-width: 500px) {

    #preloader {
        position: fixed;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        z-index: 9999;
        background-color: #000000;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    /* Loader animation */
    .loader {
        border: 1px solid #f3f3f3;

        border-top: 3px solid #388087;

        border-radius: 50%;
       width: 12%;
    height:8.5%;
        animation: spin 1s linear infinite;
    }

    @keyframes spin {
        0% {
            transform: rotate(0deg);
        }

        100% {
            transform: rotate(360deg);
        }
    }

    #html {
        scroll-behavior: smooth;
        overflow: hidden;
        margin: -1%;
    }

    #authoris {
        height: 1%;
        /* This part is important for centering */
        display: grid;
        place-items: center;
    }

    #everything {
        margin-left: 15%;
        max-width: 90%;
    }
    

    #nav {
        margin-right: 85%;
        display: block;
        position: fixed;
        /* overflow: scroll;
        overflow-x: hidden;
        scroll-behavior: smooth;
        scrollbar-width: thin;
        scrollbar-color: inherit; */
        height: 100%;
        border-right: 2px solid #2c2b2b;
        min-width: 15%;


    }

    #nav a {
        padding-bottom: 25%;
        padding-top: 25%;
        padding-left: .2%;
    }

    .typing-demo {
        width: 210px;
        animation: typing 2s steps(15), blink .5s step-end infinite alternate;
        white-space: nowrap;
        overflow: hidden;
        border-right: 3px solid rgb(255, 255, 255);
        font-family: monospace;
        font-size: 20px;
    }

    @keyframes typing {
        from {
            width: 0
        }
    }

    @keyframes blink {
        50% {
            border-color: transparent
        }
    }

    #edu {
        margin-left: 5%;
    }


    #i4 {
        display: flex;
        flex-direction: column;
        margin-left: 10%;
        padding: 0%;
        overflow: hidden;
        margin-bottom: 0%;
        padding-bottom: 0%;
        list-style: disc;
    }

    #skills {
        margin-left: 27px;
        overflow: hidden;

    }

    #contact td a {
        display: flex;
        flex-direction: column;
        width: 50%;
        height: 70%;
    }


    #contact,
    footer {
        display: flex;
        flex-direction: column;
        margin-left: 27px;
        padding-left: 5%;
    }

    #x1 {
        width: 70%;
        height: 50%;
    }

    #x1:hover {
        width: 90%;
        height: 70%;
    }

    #e4,
    #e3,
    #e2 {
        animation: slideIn 1s ease-in-out;
    }

    #socials a {
        animation: slideIn .85s ease-in-out;
    }

    #down {
        animation: slideIn .85s ease-in-out;
    }

    #welcome {
        animation: slideIn .85s ease-in-out;
    }

    #urlp,
    #finalp,
    #attendp,
    #blogp,
    #zocostop,
    #prodp {
        margin-left:15% ;
        animation: slideIn 1.7s ease-in-out;
        max-width: 110%;
        font-size: xx-small;
        overflow-y: scroll;
    }
 #urlp li,
    #finalp li,
    #attendp li,
    #blogp li,
    #zocostop li,
    #prodp li {
font-size:small;
        overflow-y: scroll;
    }
    #contact {
        animation: slideX 1s ease-in-out;

    }

    #linked,
    #nptel,
    #infosys {
        margin-left:10% ;
        animation: slideX 1s ease-in-out;
    }

    #huihui {
        animation: slideX 1s ease-in-out;

    }

    #ab {
        margin-left: 12%;
        font-size: smaller;
        max-width: 100%;
    }

    #nav a {

        animation: slideIn 0.85s ease-in-out;
    }
    #skillset img{
        margin-left: -2.2%;
    }
    @keyframes slideIn {
        0% {
            transform: translateY(75%);
            opacity: 0;
        }

        100% {
            transform: translateY(0);
            opacity: 1;
        }
    }

    @keyframes slideX {
        0% {
            transform: translateX(100%);
            opacity: 0;
        }

        100% {
            transform: translateX(0);
            opacity: 1;
        }

    }


}

@keyframes slideIn {
    0% {
        transform: translateY(75%);
        opacity: 0;
    }

    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes slideX {
    0% {
        transform: translateX(100%);
        opacity: 0;
    }

    100% {
        transform: translateX(0);
        opacity: 1;
    }
}

@media only screen and (max-width: 1000px) {
     #skills {
        margin-left: 27px;
        overflow: hidden;

    }

        #skillset img{
        margin-left: -1.5%;
    }
}

@media only screen and (max-width: 1024px) {
     #skills {
        margin-left: 27px;
        overflow: hidden;

    }

        #skillset img{
        margin-left: -1.3%;
    }
}

@media only screen and (min-width: 300px) and (max-width: 370px) {
    .typing-demo {
    width: 167px;
    animation: typing 2s steps(15), blink .5s step-end infinite alternate;
    white-space: nowrap;

    overflow: hidden;
    border-right: 3px solid rgb(255, 255, 255);
    border-style:dotted; 
    border-bottom: none;
    border-top: none;
    border-left: none;
    /* font-family: 'Dots'; */
    font-size: 1em;
}
     #skills {
        margin-left: 35px;
        overflow: hidden;

    }

        #skillset img{
        margin-left: -2.5%;
     
    }
}
@media only screen and (min-width: 300px) and (max-width: 700px) {
     #skills {
        margin-left: 35px;
        overflow: hidden;

    }

        #skillset img{
        margin-left: -2.5%;
     
    }
   
}

@media only screen and (max-width: 1500px) {
     #skills {
        margin-left: 27px;
        overflow: hidden;

    }

        #skillset img{
        margin-left: -1.15%;
    }
}