@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@200..700&display=swap');

html, body{width:100%; height: 100%; margin: 0}
body{background: #000; color: #666}
div{background-repeat:no-repeat}
#loop{position:fixed; top:0; left:0; width:100%; height:100vh; overflow: hidden; z-index: 1}
#loop video {
    height: 100%;
    width: 177.77777778vh;
    min-width: 100%;
    min-height: 56.25vw;
}

#social{position:fixed; top:20px; right:20px; z-index: 3}
#social i{color: #fff; font-size:50px; text-shadow:1px 1px 5px rgb(0,0,0,0.2); transition:all 300ms ease}
#social i:hover{color: #000}

#strip{position: fixed; left:22%; top:0; height: 100vh; width:30%; z-index: 2; backdrop-filter:blur(8px); background: rgb(255,0,0,0.6); transition:all 2s ease; border-right:20px solid rgb(0,0,0,0.3); background-image: url("../media/words.png"); background-size: 85%; background-position: top 10% right 10%; background-repeat:no-repeat}

#strip span{display: block; width:20%; padding: 0 0 20%; border:2px solid #fff; position: absolute; top:0px; left:10px; border-radius:300px; transition:all 4s ease; opacity: 0.3}

#dots{display: flex; justify-content: space-between; align-items: center; position: absolute; bottom:3%; right:10%; width:30%}
#dots > div{width:100%; min-width:20%; max-width:20%; background-color: #fff; padding-bottom: 20%; border-radius: 200px}
#dots > div:nth-of-type(2){padding-bottom: 30%; background-color: #000}

#text{position: fixed; bottom:3%; left:3%; width:20%; background: rgb(255,0,0,0.9); z-index: 3; padding: 30px; color: #fff; border-bottom-right-radius:200px}
#text h2{color:#000; padding: 0 0 15px; margin: 0; font-family: "Oswald", sans-serif; font-optical-sizing: auto; letter-spacing: 10px; transform:rotate(-90deg); position: absolute; left:-90px; top:20px; font-size:29px; line-height: normal; text-shadow:2px 2px 0 rgb(0,0,0,0.2)}
#text p{font-family: Courier, "sans-serif"; margin: 0; padding: 0 0 5px 60px; font-size:22px; text-shadow:2px 2px 0px rgb(0,0,0,0.6)}
#text a{text-decoration: none; color: #fff; transition:all 300ms ease}
#text a:hover{color:black}

#profile{opacity: 0; position: absolute; bottom:0; right:0}

#videos{position: fixed; top:35px; left:140px; z-index: 4; width:200px}
#videos > div{aspect-ratio:16/9; position: relative; margin: 0 0 15px; box-shadow:6px 6px 0 rgb(0,0,0,0.2)}
#videos iframe{width:100%; height: 100%; position: absolute; top:0; left:0; margin: 0}

@media only screen and (max-width: 600px) {
	#videos{top:20px; left:20px; z-index: 2; width:220px}
    #text{width:76%; bottom:5%; left:20px}
}