.hero {
    position: relative;
}
#logo {
    width:490px;
}
#mlh-trust-badge {
    position: fixed;
    top: 0;
    right: 7px;
    width: 80px;
    display: inline-block;
    animation: down 2s;
    
}

body {
    background-image: url("https://cdn.hackclub.com/019eee8a-e443-77d2-8e6f-483c98341293/Untitled%20design%20(37).png");
}

#rocket {
    width: 70px;
    rotate: 27deg;
    position: absolute;
    bottom: -13px;
    right: 10px;
    animation:move 3s infinite;

}

.imagecont {
    position:fixed;
    top: 45vh;
    transform: translateY(-50%);
    left: 15vw;
    position: relative;
    display: inline-block;
}

@keyframes move {
    0% {
        transform: translateX(30%);
    }
    50% {
        transform: translateY(40%);
    }
    100% {
        transform: translateX(30%);
    }
}

#gm {
    width: 120px;
    position: absolute;
    top: 35px;
    left: 18px;
    animation: rot 3s infinite;
    
}

@keyframes rot {
    0% {
        rotate: 0;
    }
    100% {
        rotate: 360deg;
    }
}

@keyframes down {
    0% {
        transform: translateY(-100%);
    }
    100% {
        transform: translateY(0);
    }
}

.prize {
    position: fixed;
    width: 170px;
    display: inline-block;
    user-select: none;
    touch-action: none;
    cursor: grab;
    transition: 1s;
}

.prize:active {
    cursor: grabbing;
}

#prize1 {
    top: 2px;
    right: 400px;
}
#prize2 {
    top: 21vh;
    right: 220px;
    transition: 1s;
}
#prize3 {
    top: 48vh;
    right: 220px;
    transition: 1s;
}
#prize4 {
    top: 75vh;
    right: 400px;
}
#prizee {
    position: fixed;
    left: 10%;
    bottom: 10%
}

#where {
    position: fixed;
    left: calc(10% + 70px);
    bottom: 10%
}

#when {
    position: fixed;
    left: calc(10% + 140px);
    bottom: 10%
}
#timeline {
    position: fixed;
    left: calc(10% + 210px);
    bottom: 10%
}
#venue {
    position: fixed;
    left: calc(10% + 280px);
    bottom: 10%
}
#sponsors {
    position: fixed;
    left: calc(10% + 350px);
    bottom: 10%
}


button {
    padding: 10px;
    border-radius: 20px;
    width: 80px;
    background-color: skyblue;
    border: 1px solid rgb(255, 255, 255);
}
button:hover {
    cursor:pointer;
    background-color: white;
    border: 0.00001px solid rgb(209, 209, 209);
    color: black;
}




#prize2.right {
    right: 2vw;
}
#prize3.right {
    right: 2vw;
}
#prize1.rig1 {
    right: 15vw
}
#prize4.rig1 {
    right: 15vw
}


#indiagate {
    width: 300px;
    position: fixed;
    right: -20vw;
    top: 23vh;
    transition: 1s;
}

#indiagate.add {
    right:20vw
}

@keyframes aniir {
    0% {
        position: fixed;
        right: 20vw;
        top: 23vh;
    }
    100% {
        position: fixed;
        right: -20vw;
        top: 23vh;
    }
}



#wave {
    position: fixed;
    top: 0;
    left: 0;
    animation: waveani 2s;
}

@keyframes waveani {
    0% {
        position: fixed;
        top: -20vh;
        left: -20vw;   
    }
    100% {
        position: fixed;
        top: 0;
        left: 0;   
    }
}

@keyframes newwaveani {
    0% {
        position: fixed;
        top: 0;
        left: 0;    
    }
    50% {
        position: fixed;
        top: -20vh;
        left: -20vw;    
    }
    100% {
        position: fixed;
        top: 0;
        left: 0; 
    }
}

.wavenew {
    animation: newwaveani 2s;
}

#timel{
    width: 300px;
    position: fixed;
    right: -25vw;
    top: 23vh;
    transition: 1s;
}

#timel.show {
    right: 20vw;
}
#time1{
    position: fixed;
    right: calc(-25vw + 140px);
    top: calc(23vh + 130px);
    transform: translateX(50%);
    
    transition: 1s;
}

#time1.show {
    right: calc(20vw + 140px);
    top: calc(23vh + 145px);
}
        @font-face {
        font-family: safiro;
        src: url(assets/safiro-medium-webfont.ttf)format("truetype");
        font-display: swap
    }

    p {
        font-family: safiro,safiro Fallback;
        user-select: none;
       font-size: 25px;
        margin-bottom: 0;
        color: black;
       
    }
    @font-face {
        font-family: safiro1;
        src: url(assets/safiro-medium-webfont.ttf)format("truetype");
        font-display: swap
    }
    h2 {
        font-family: safiro1,safiro Fallback;
        user-select: none;
       font-size: 50px;
        margin-bottom: 0;
        color: black;
        font-weight: 800;

       
    }
#when1{
    position: fixed;
    right: calc(-25vw + 140px);
    top: calc(23vh + 100px);
    transform: translateX(50%);
    
    transition: 1s;
}

#when1.show {
    right: calc(20vw + 140px);
    top: calc(23vh + 60px);
}

#timo{
    position: fixed;
    right: calc(-25vw + 140px);
    top: calc(23vh + 100px);
    transform: translateX(50%);
    
    transition: 1s;
}

#timo.show {
    right: calc(20vw + 140px);
    top: calc(7vh);
}

#prize2.dis {
    right: calc(-25vw + 140px);
}
#prize3.dis {
    right: calc(-25vw + 140px);
}
#prize1.dis {
    right: calc(-25vw + 140px);
}
#prize4.dis {
    right: calc(-25vw + 140px);
}

#cam{
    position: fixed;
    right: calc(-25vw + 140px);
    top: calc(23vh + 130px);
    transform: translateX(50%);
    width: 70px;
    transition: 1s;
}

#cam.show {
    right: calc(20vw + 230px);
    top: calc(13vh);
    rotate: -45deg;
}