@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@200;300;400;500;600;700;800;900&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Montserrat', sans-serif;
}

body {
    font-family: sans-serif;
}

body::-webkit-scrollbar {
    display: none;
}

.unselectable {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

header {
    height: 100vh;
    background: linear-gradient(#4b2cfe, #49defe);
    overflow: hidden;
}

header img {
    transform: translate(-2%, -50px);
}

#scene {
    height: 100vh;
}

#scene .layer{
    height: 110%;
}

#scene .layer img{
    height: 100%;
}

#title {
    position: absolute;
    top: 200px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 150px;
    letter-spacing: 10px;
    pointer-events: none;
    transition: all .5s ease;
}

.glow {
    color: #fff;
    -webkit-animation: glow 1s ease-in-out infinite alternate;
    -moz-animation: glow 1s ease-in-out infinite alternate;
    animation: glow 1s ease-in-out infinite alternate;
}
  
@keyframes glow {
    from {
        text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #254aee, 0 0 40px #254aee, 0 0 50px #254aee, 0 0 60px #254aee, 0 0 70px #254aee
    }
    to {
        text-shadow: 0 0 20px #fff, 0 0 30px #5e5bff, 0 0 40px #5e5bff, 0 0 50px #5e5bff, 0 0 60px #5e5bff, 0 0 70px #5e5bff, 0 0 80px #5e5bff
    }
}


/* 2nd section */

#presentation {
    height: 100vh;
    background: #080f27;
    color: #fff;
    position: relative;
    overflow: hidden;
}

#start-tag-container {
    display: flex;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    font-size: 100px;
    overflow: hidden;
    transition: all .3s ease-in-out;
    height: 150px;
    align-items: center;
    white-space: nowrap;
    /* display: none; */
}

#start-tag-container .start-tag span {
    animation: wink 1.5s infinite ease-in-out;
    transition: all .5s ease-in-out;
}

@keyframes wink {
    0% { opacity: 0; }
    50% { opacity: 1; }
    100% { opacity: 0; }
}

#start-tag-container .start-tag:hover {
    cursor: pointer;
}

#start-tag-container .start-tag:hover span {
    animation: none;
}

/* svg spawning */

.meteor {
    position: absolute;
    fill: transparent;
    stroke-width: 5px;
    stroke: yellow;
    animation: meteor-anim 2.3s forwards ease-in-out;
}

.meteor-big {
    width: 400px;
    stroke-dasharray: 1480;
    stroke-dashoffset: 1480;
}

.meteor-mid {
    width: 400px;
    stroke-dasharray: 830;
    stroke-dashoffset: 830;
}

.meteor-small {
    width: 400px;
    stroke-dasharray: 670;
    stroke-dashoffset: 670;
}

@keyframes meteor-anim {
    25% {
        stroke-dashoffset: 0;
        fill: transparent;
        filter: drop-shadow( 0px 0px 0px yellow);
    } 35% {
        transform: translate(0, 0);
    } 
    50% {
        fill: yellow;
        filter: drop-shadow( 0px 0px 20px yellow);
    }
    100% {
        stroke-dashoffset: 0;
        fill: yellow;
        transform: translate(120vw, 120vh);
        filter: drop-shadow( 0px 0px 20px yellow);
    }
}

.star {
    width: 100px;
    position: absolute;
    fill: yellow;
    stroke-width: 5px;
    stroke: yellow;
    animation: star-anim 5s forwards ease-in-out;
    transform: scale(0);
    filter: drop-shadow( 0px 0px 30px yellow);
}

@keyframes star-anim {
    25% {
        transform: scale(1);
    }
    50% {
        transform: scale(1);
    }
    100% {
        transform: scale(0);
    }
}

.card {
    border-radius: 20px;
    overflow: hidden;
    width: 35vw;
    height: 35vw;
    background: #30395052;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    transition: all .3s ease-in-out;
    backdrop-filter: blur(7px);
    border:solid 2px #303950;
    /* transform-origin: center; */
}

#projectFrame {
    transition: all .7s ease-out;
    width: 100%;
    height: 100%;
    transform: translateX(-100%);
}

#projectFrame.active {
    transform: translateX(0%);
}

#cardContainer {
    display: flex;
    align-items: center;
    transition: all .3s ease-in-out;
}

.card img {
    max-width: 90%;
    height: fit-content;
    margin: 0px 5%;
    transition: all .3s ease-in-out;
}

.controller {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 20px;
}

.controller svg circle {
    transition: all .3s ease-in-out;
}

.controller svg:hover circle{
    cursor: pointer;
    stroke-width: 7px;
}

.controller svg.active circle {
    stroke-width: 7px;
}


/* footer */
footer {
    height: 20vh;
    background: linear-gradient(#080f27, #290933);
}