@import url();

:root {
	--primary-color: #F0C93E;
	--neon-green: #62F834;
}

html {
	padding: env(safe-area-inset);
}

html, body {
  	overflow-x: hidden;
}

body {
  	position: relative;
	margin: 0;
}

.ip-full-screen {
	height: 100vh;
	display: flex;
	color: #000;
}

.video-container {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
	background: var(--primary-color) url('./Assets/pisswaves.png') no-repeat center
		center/cover;
}

.video-container video {
	min-width: 100%;
	min-height: 100%;
  	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	-moz-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	-o-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	object-fit: cover;

}

.yellow-overlay {
	height: 100%;
	width: 100%;
	top: 0;
	left: 0;
	background: var(--primary-color);
	opacity: 0.8;
	position: absolute;
	mix-blend-mode: lighten;
}

.content {
	z-index: 2;
}

.grid-panel {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 60%;
    align-items: center;
}

.grid-svg {
	position: absolute;
	top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
	-moz-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	-o-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	mix-blend-mode: overlay;
	height: 80%;
}

.calvin-svg-container{
	position: absolute;
	top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
	-moz-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	-o-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	height: 50%;
}

.calvin-svg {
	height: 100%;
    -webkit-animation: rotation 3.5s infinite linear;
    -moz-animation: rotation 3.5s infinite linear;
    -o-animation: rotation 3.5s infinite linear;
    animation: rotation 3.5s infinite linear;
    transform-origin: 50% 50%;
    -webkit-transform-origin: 50% 50%;
    -moz-transform-origin: 50% 50%;
}

	@-webkit-keyframes rotation {
	    from {-webkit-transform: rotate(0deg);}
	    to   {-webkit-transform: rotate(-359deg);}
	}
	@-moz-keyframes rotation {
	    from {-moz-transform: rotate(0deg);}
	    to   {-moz-transform: rotate(-359deg);}
	}
	@-o-keyframes rotation {
	    from {-o-transform: rotate(0deg);}
	    to   {-o-transform: rotate(-359deg);}
	}
	@keyframes rotation {
	    from {transform: rotate(0deg);}
	    to   {transform: rotate(-359deg);}
	}

.logo-svg {
	position: absolute;
	top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
	-moz-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	-o-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
    height: 8%;
}

.yellow-panel {
	background-color: var(--primary-color);
	position: absolute;
	top: 0;
	right: 0;
	height: 100%;
	width: 40%;
    align-items: center;
}

.ip-stack {
	position: absolute;
	top: 50%;
    left: -30px;
    width: 110%;
    height: auto;
    -webkit-transform: translate(0%, -50%);
	-moz-transform: translate(0%, -50%);
	-ms-transform: translate(0%, -50%);
	-o-transform: translate(0%, -50%);
	transform: translate(0%, -50%);
	mix-blend-mode: overlay;
}

/* @media (orientation: landscape) {
    .ip-stack {
    	width: 110%;
    	height: auto;
    }
} */

@media (orientation: portrait) {
    
	.grid-panel {
		height: 60%;
		width: 100%;
	}

    .yellow-panel {
		position: absolute;
		top: auto;
		bottom: 0;
		left: 0;
		height: 40%;
		width: 100%;
		/* overflow: hidden; */
	}

    .ip-stack {
    	left: -2.5%;
    	width: 105%;
    	content: url("./Assets/IP-ShortStack.svg");
    }
}