index.css

@import url("./assets/common.css");
#video {
	height: 100vh;
}
@media screen and (min-aspect-ratio: 4/3) {
	#video {
		width: 100vw;
		height: unset;
	}
}
#video-box {
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	width: calc(100vw - 16px);
	height: calc(100vh - 124px);
	background-color: #000;
}
body {
	background-color: #6940ff;
	overflow: hidden;
}
#logo-box {
	position: absolute;
	top: 24px;
	left: 40px;
	font-family: 'SoyuzGrotesk', Helvetica, Arial, sans-serif;
	font-size: 60px;
}
#text-box {
	position: absolute;
	bottom: 132px;
	right: 40px;
	font-family: 'Sublima', Helvetica, Arial, sans-serif;
	font-weight: 300;
	font-size: 30px;
	color: #fff;
}
#ring-box {
	position: absolute;
	bottom: 24px;
	left: 40px;
	font-family: 'Sublima', Helvetica, Arial, sans-serif;
	font-weight: 300;
	font-size: 30px;
	color: #fff;
}
#ring-box > img {
	display: none;
}
#ring-box > iframe {
	position: fixed;
	left: 8px;
	width: calc(100vw - 16px);
	bottom: 8px;
	border: none;
}
@media screen and (min-width: 600px) {
	#video-box {
		height: calc(100vh - 16px);
	}
	#text-box {
		bottom: 24px;
	}
	#ring-box > img {
		display: unset;
		margin-bottom: 16px;
		margin-right: 32px;
	}
	#ring-box > iframe {
		animation: 100ms linear 1 normal both running unwebring;
		opacity: 0;
		transition: opacity 100ms linear;
		position: unset;
		left: unset;
		width: 400px;
		bottom: unset;
		border: 1px solid #6940ff
	}
	#ring-box:hover > iframe {
		animation-name: webring;
		opacity: 1;
	}
}
@keyframes webring {
	0% { margin-left: -600px; }
	1% { margin-left: 0; }
	100% { margin-left: 0; }
}
@keyframes unwebring {
	0% { margin-left: 0; }
	99% { margin-left: 0; }
	100% { margin-left: -600px; }
}