@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');
@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap');


body {
    margin: 0;
    padding: 0;
    overflow-x: hidden;




}



/*------------------------ Home -----------------------------------*/



#home {
    background-image: url("../assets/a1\ \(1\).jpg");
    background-size: cover;
    background-repeat: no-repeat;

    overflow-x: hidden;
    height: 100vh;
    width: 100vw;
    box-sizing: border-box;
    background-attachment: fixed;





}

a {

    z-index: 2;
    position: relative;
    text-align: center;
    text-decoration: none;
}

a:visited {
    color: white;
}

a:active {
    color: white;
}

a:link {
    color: white;
}



#head-container {

    position: absolute;
    top: 120px;
    left: 100px;
    color: white;
    width: 700px;
    padding: 20px;
    text-align: center;
    /* border: 1px solid white; */
    z-index: 2;
    backdrop-filter: blur(8px);

}

#readmore {
    margin-top: 20px;
    color: white;
    font-size: 20px;
    font-family: Arial, Helvetica, sans-serif;
    border: 1px solid rgb(0, 179, 255);
    margin: 0 auto;
    width: 300px;
    padding: 5px;
}

#readmore:hover {
    color: rgb(0, 191, 255);
}

#head-text {
    font-size: 80px;
    font-family: 'Press Start 2P';
    padding: 0;
    margin-bottom: 30px;
    margin-top: 20px;
    text-shadow: 0 0 5px #fff700, 0 0 10px #078aee, 0 0 15px #0073e6, 0 0 20px #06ffd5, 0 0 25px #0073e6, 0 0 30px #01d5ff, 0 0 35px #00d5ff;
}

#head-year {
    font-size: 30px;
    font-weight: 600;
    margin-top: 0;
    margin-bottom: 30px;
    font-family: 'Press Start 2P';
}

#head-desc {

    font-size: 20px;
    font-family: 'Press Start 2P';
    margin-bottom: 20px;

}

#moon {
    height: 750px;
    position: absolute;
    top: -250px;
    right: -200px;
    overflow: hidden;
    animation: rotateMoon 20s infinite linear;
    opacity: 0.8;

}

@keyframes rotateMoon {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(359deg);
    }

}


#mountain {
    position: absolute;
    bottom: 0px;
    width: 100vw;
    height: 600px;
    mix-blend-mode: normal;


}

/* #home::after {
    content: "";
    position: absolute;
    width: 100vw;
    bottom: -10px;
    left: 0;
    height: 10px;
    background-color: black;
    box-shadow: 10px 30px 30px 60px rgb(126, 151, 154);

} */

#drop-down {
    position: absolute;
    bottom: 70px;
    height: 80px;
    left: 25%;
    animation: dropdown 1s infinite;
}

@keyframes dropdown {
    from {
        transform: translateY(0px);
    }

    to {
        transform: translateY(20px);
    }

}

#up-arrow {
    position: fixed;
    bottom: 10px;
    right: 30px;
    height: 70px;
    animation: uparrow 1s infinite;
    z-index: 3;
}

@keyframes uparrow {
    from {
        transform: translateY(0px);
    }

    to {
        transform: translateY(-10px);
    }

}

/*----------------------------------  Events -----------------------------------*/


#events {
    height: 900px;
    background-image: url("../assets/universe-1566159.jpg");
    background-size: cover;
    position: relative;
    overflow: hidden;
    background-attachment: fixed;
    color: white;



}

/* #events::after {
    content: "";
    position: absolute;
    width: 100vw;
    top: 0px;
    left: 0;

    background-color: black;
    box-shadow: 5px 5px 50px 50px rgb(126, 151, 154);
    margin-bottom: 90px;
} */

#earth {
    position: absolute;
    top: 100px;

    left: -180px;

    height: 1000px;

    animation: earthRotate 18s infinite linear;

}

@keyframes earthRotate {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(359deg);
    }

}


#satellite {
    height: 200px;
    offset: path("M 11.428571,8.5714286 C 384.79889,90.158247 723.58392,320.19746 937.14286,637.14286 1026.0907,769.15148 1093.8807,915.38399 1137.1429,1068.5714");
    animation: move 8s linear infinite
}

#lunar {
    position: absolute;
    bottom: -10px;
    left: -10px;
    height: 500px;
    width: 100vw;

}

@keyframes move {
    0% {
        offset-distance: 1%;
    }

    100% {
        offset-distance: 90%;
    }

}







svg {
    position: absolute;
    height: 100vh;
    width: 100vw;
    left: 0;
    top: 0;
}


#event-cont {
    position: absolute;
    text-align: center;
    right: 30px;
    top: 170px;
}

#event-head {
    font-size: 80px;
    margin-top: 30px;

    font-family: 'Press Start 2P';
    text-shadow: 0 0 5px #fff700, 0 0 10px #01c8ff, 0 0 15px #0073e6, 0 0 20px #0073e6, 0 0 25px #0073e6, 0 0 30px #01d5ff, 0 0 35px #0173ff;
}

#event-desc {
    font-size: 25px;
    width: 600px;
    margin-top: 40px;
    font-family: 'Press Start 2P';
}


#event-button {

    text-align: center;
    font-size: 20px;
    width: 200px;
    margin: 0 auto;
    margin-top: 40px;
    border: 2px solid blue;
    padding: 10px;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    background-color: yellow;
    color: black;
    font-weight: 600;
}

#event-button:hover {
    box-shadow: rgba(0, 0, 0, 0.25) 0px 14px 28px, rgb(0, 251, 255) 0px 10px 10px;
    background-color: green;
    border: 2px solid yellow;
    color: white;
}





/*----------------------------------  tyro team -----------------------------------*/
#tyro-container {
    height: auto;
    background-color: pink;
    padding-bottom: 100px;
    background-image: url("../assets/stars-1654074_1920.jpg");
    background-attachment: fixed;
    position: relative;

}

/* #tyro-container::after {
    content: "";
    position: absolute;
    width: 100vw;
    top: 0px;
    left: 0;

    background-color: rgb(0, 0, 0);
    box-shadow: 5px 5px 50px 50px rgb(45, 25, 20);
    margin-bottom: 90px;
} */

#tyro {

    display: flex;


}

#tyro-head {
    font-size: 80px;
    margin-top: 100px;
    font-family: 'Press Start 2P';
    color: white;
    text-shadow: 0 0 5px #fff700, 0 0 10px #eeee07, 0 0 15px #fe2c02, 0 0 20px #ff7a06, 0 0 25px #fe0000, 0 0 30px #ff0101, 0 0 35px #fa0c0c;
}

#tyro-cont {
    text-align: center;
}

#tyro-desc {
    font-size: 18px;
    margin-top: 30px;
    padding-left: 20px;
    padding-right: 20px;

    font-family: 'Press Start 2P';
    color: white;
}

#tyro-left {
    /* border: 1px solid red; */
    z-index: 2;

}

#tyro-right {
    /* border: 1px solid blue; */
    position: relative;
    width: 40%;

}

#booster {
    height: 600px;
    width: 300PX;
    position: absolute;
    right: 0px;
    bottom: 0;
    padding: 0;
    margin: 0;
    animation: boost 2s infinite alternate;
    opacity: 0.8;
    /* mix-blend-mode: luminosity; */
}


@keyframes boost {

    from {
        transform: translateY(0px);
    }

    to {
        transform: translateY(-200px);
    }




}

#sub-left {
    display: flex;
    justify-content: space-around;
}


#tyro-cont1 {

    /* border: 1px solid red; */
    width: 250px;
    height: 250px;
    margin-top: 30px;
    position: relative;
    background-size: cover;
}


#tyro-cont1:hover #stone {
    animation: shake 0.8s;

    /* When the animation is finished, start again */
    animation-iteration-count: infinite;
}


/* #tyro-cont1:hover #tyro-photo {
    mix-blend-mode: normal;
} */


@keyframes shake {
    0% {
        transform: translate(1px, 1px) rotate(0deg);
    }

    10% {
        transform: translate(-1px, -2px) rotate(-1deg);
    }

    20% {
        transform: translate(-3px, 0px) rotate(1deg);
    }

    30% {
        transform: translate(3px, 2px) rotate(0deg);
    }

    40% {
        transform: translate(1px, -1px) rotate(1deg);
    }

    50% {
        transform: translate(-1px, 2px) rotate(-1deg);
    }

    60% {
        transform: translate(-3px, 1px) rotate(0deg);
    }

    70% {
        transform: translate(3px, 1px) rotate(-1deg);
    }

    80% {
        transform: translate(-1px, -1px) rotate(1deg);
    }

    90% {
        transform: translate(1px, 2px) rotate(0deg);
    }

    100% {
        transform: translate(1px, -2px) rotate(-1deg);
    }
}


#stone {
    position: absolute;
    left: 0;

    width: 220px;

}

#tyro-photo {
    position: absolute;
    left: 55px;
    top: 30px;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    /* mix-blend-mode: luminosity; */

}





#tyro-content1 {
    position: absolute;
    bottom: 0px;
    width: 250px;
    color: white;
    text-align: center;

}

#tyro-name {
    font-size: 25px;
    font-weight: 600;
    font-family: Arial, Helvetica, sans-serif;
}

#tyro-desc1 {
    font-size: 20px;
    font-family: Arial, Helvetica, sans-serif;
}




#sub-left1 {
    display: flex;
    justify-content: space-around;
}


#tyro-bottom {
    display: flex;
    justify-content: space-around;
    margin-bottom: 100px;


}

#tyro-mountain {
    height: 400px;
    width: 100vw;
    position: absolute;
    left: 0;
    bottom: 0;

}





/*----------------------------------  faculty members -----------------------------------*/


#faculty {
    height: auto;
    background-attachment: fixed;

    background-image: url("../assets/astronomy-1866822_1920.jpg");
    background-size: contain;
    position: relative;
}

/* #faculty::after {
    content: "";
    position: absolute;
    width: 100vw;
    top: 0px;
    left: 0;

    background-color: black;
    box-shadow: 5px 5px 50px 50px rgb(72, 78, 89);
    margin-bottom: 90px;
} */

#faculty-content {
    padding-top: 60px;
}

#faculty-head {
    color: rgb(246, 35, 35);
    font-size: 60px;
    font-weight: 700;
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    padding-top: 30px;
    margin-left: 90px;
    padding-bottom: 30px;

}

#faculty-desc {
    font-size: 22px;
    margin-left: 90px;
    padding-right: 20px;
    font-family: Arial, Helvetica, sans-serif;
    color: white;
}


#faculty-container {
    display: flex;
    margin-top: 50px;
    justify-content: space-around;


}






#box-cont {
    width: 220px;
    border-radius: 10px;
    margin-left: 30px;
    position: relative;
    transition: transform .3s ease;
    backface-visibility: hidden;




}

#box-cont:hover {
    transform: scale(1.1);
}




#prabhakar-box {
    width: 220px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;

    height: 250px;
    background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0)90%, rgba(0, 0, 0, 1)), url("../assets/prabhakar_gupta.jpg");
    background-size: cover;
}


#kapil-box {
    width: 220px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;

    height: 250px;
    background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0)90%, rgba(0, 0, 0, 1)), url("../assets/KAPIL\ BHUSHAN\ -\ EC.jpg");
    background-size: cover;
}

#dev-box {
    width: 220px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
background-position: center;
    height: 250px;
    background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0)90%, rgba(0, 0, 0, 1)), url("../assets/Chairman\ Sir\ new.jpg");
    background-size: cover;

}


#aditya-box {
    width: 220px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;

    height: 250px;
    background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0)90%, rgba(0, 0, 0, 1)), url("../assets/ADITYA\ SIR.\ \(2\)\ new.jpg");
    background-size: cover;
}

#desc1 {
    color: white;
    text-align: center;
    width: 220px;
    background-color: black;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    transition: transform 1s ease;

}


#name {
    font-size: 18px;
    font-weight: 600;
}

#name_ankit {
    font-size: 18px;
    font-weight: 600;
}

#desc {
    font-size: 18px;
}

#box-cont::after {
    content: "";

    right: -10px;
    bottom: -10px;
    height: 0;
    width: 0;
    position: absolute;
    border-bottom: 5px solid rgba(255, 0, 0, 0);

    border-right: 5px solid rgba(0, 0, 255, 0);
    transition: all .3s ease-out;
    border-radius: 10px;


}

#box-cont::before {
    content: "";

    left: -10px;
    top: -10px;
    height: 0;
    width: 0;
    position: absolute;
    border-top: 5px solid rgba(255, 0, 0, 0);

    border-left: 5px solid rgba(0, 0, 255, 0);
    transition: all .3s ease-in;
    border-radius: 10px;
}

#box-cont:hover::before {
    height: 90%;
    width: 90%;
    border-top-color: white;
    border-left-color: white;



}

/* #box-cont:hover::after {
    height: 90%;
    width: 90%;
    border-bottom-color: red;
    border-right-color: blue;
} */

/* #box-cont:hover {
    
    transform: rotateY(180deg);



}  */
#box-cont:hover::after {

    height: 90%;
    width: 90%;
    border-bottom-color: white;
    border-right-color: white;



}

/* #box-cont:hover #desc1 {
    transform: rotateY(180deg);

} */







#faculty-incharge-container {
    margin-top: 40px;
    padding-bottom: 100px;
    display: flex;
    justify-content: space-around;
}

#faculty-incharge-head {
    margin-top: 120px;
    margin-bottom: 90px;
    text-align: center;
    font-size: 40px;
    color: wheat;
    font-family: 'Press Start 2P';
    font-stretch: extra-condensed;
}


#box-cont1 {
    width: 200px;
    border-radius: 10px;
    margin-left: 30px;
    position: relative;
    transition: transform .3s ease;
    backface-visibility: hidden;

}

#box-cont1::after {
    content: "";

    right: -10px;
    bottom: -10px;
    height: 0;
    width: 0;
    position: absolute;
    border-bottom: 5px solid rgba(255, 0, 0, 0);

    border-right: 5px solid rgba(0, 0, 255, 0);
    transition: all .3s ease-out;
    border-radius: 10px;


}

#box-cont1::before {
    content: "";

    left: -10px;
    top: -10px;
    height: 0;
    width: 0;
    position: absolute;
    border-top: 5px solid rgba(255, 0, 0, 0);

    border-left: 5px solid rgba(0, 0, 255, 0);
    transition: all .3s ease-in;
    border-radius: 10px;
}

#box-cont1:hover::after {

    height: 90%;
    width: 90%;
    border-bottom-color: white;
    border-right-color: white;



}


#box-cont1:hover::before {
    height: 90%;
    width: 90%;
    border-top-color: white;
    border-left-color: white;



}

#box-cont1:hover {
    transform: scale(1.1);
}

#dev-box1 {
    width: 200px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;

    height: 220px;
    background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(0, 0, 0, 1)), url("../assets/ADITYA\ SIR.\ \(2\)\ new.jpg");
    background-size: cover;

}

#desc2 {

    color: white;
    text-align: center;
    width: 200px;
    background-color: black;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;



}




#shailesh-box {
    background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0)90%, rgba(0, 0, 0, 1)), url("../assets/Dr.\ Shailesh\ Saxena.jpg");
    background-size: cover;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    height: 220px;
    width: 200px;
}

#rajesh-box {
    background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0)90%, rgba(0, 0, 0, 1)), url("../assets/MR.\ RAJESH\ KUMAR.jpg");
    background-size: cover;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    height: 220px;
    width: 200px;
}

#shipra-box {
    background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0)90%, rgba(0, 0, 0, 1)), url("../assets/MS.\ SHIPRA\ SHARMA.jpg");
    background-size: cover;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    height: 220px;
    width: 200px;
}

#ankit-box {
    background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0)90%, rgba(0, 0, 0, 1)), url("../assets/MR.\ ANKIT\ KHANDELWAL.jpg");
    background-size: cover;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    height: 220px;
    width: 200px;
}

#arvind-box {
    background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0)90%, rgba(0, 0, 0, 1)), url("../assets/MR.\ ARVIND\ MISHRA.jpg");
    background-size: cover;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    height: 220px;
    width: 200px;
}


#deepak-box {
    background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0)90%, rgba(0, 0, 0, 1)), url("../assets/MR.\ DEEPAK\ BATRA.jpg");
    background-size: cover;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    height: 220px;
    width: 200px;
}