/* RESPONSIVE IFRAME https://stackoverflow.com/questions/17838607/making-an-iframe-responsive */




@font-face {
	font-family: Ribes;
	src: url('../fonts/Ribes-Black.otf');
}

@font-face {
	font-family: Basis;
	src: url('../fonts/basis_normal.otf');
}

@font-face {
	font-family: Basis Italic;
	src: url('../fonts/BasisRegularItalic.otf');
}



@-webkit-keyframes flash {
	0% {color: white;}
	30% {color: rgb(100,0,255);}
	70% {color: rgb(100,0,255);}
	100% {color: white;}
}

@keyframes flash {
	0% {color: white;}
	30% {color: rgb(100,0,255);}
	70% {color: rgb(100,0,255);}
	100% {color: white;}
}




/* STRUCTURE */

* {
	font-family: Basis;
	font-size: 24px;
}

::-webkit-scrollbar { /* WIDTH */
	width: 0.25rem;
	height: 0.25rem;
}

::-webkit-scrollbar-track { /* BACKGROUND */
	background: rgb(100,0,255); 
}

::-webkit-scrollbar-thumb { /* HANDLE */
	background: rgb(100,0,255); 
	border: 1px solid white;
}

.shelf:hover::-webkit-scrollbar-track { /* BACKGROUND */
	background: white; 
}

.shelf:hover::-webkit-scrollbar-thumb { /* HANDLE */
	background: white; 
	border: 1px solid rgb(100,0,255);
}

::-moz-selection {
	background-color: rgba(255,255,255,0.99);
	color: rgba(100,0,255,1);
}

::selection {
	background-color: rgba(255,255,255,0.99);
	color: rgba(100,0,255,1);
}

body {
	/*margin: 0rem 1rem 0rem 1rem;*/
	background: rgb(100,0,255);
}

.case {
	position: fixed;
	top: -0.5rem;
	left: 0;
	width: calc(100vw - 0rem);
	height: calc(100vh + 1rem);
	margin: 0rem 0rem 0rem 0rem;

	display: grid;
	grid-template-rows: auto;
	grid-template-columns: 4rem 1fr 1fr 1fr 1fr 1fr 1fr 4rem ;
	/*grid-gap: 0.5rem;*/
	align-items: center;
}

.shelf {
	max-height: calc(100vh - 1rem);
	overflow-x: hidden;
	overflow-y: auto;
	padding: 0.5rem;

	background: rgb(100,0,255);

	cursor: ew-resize;
	z-index: 1;
}

.shelf:hover {
	background: white;
	color: rgb(100,0,255);
}

.shelf:hover p,
.shelf:hover a {
	color: rgb(100,0,255);
}

.shelf:hover .item {
    border: solid rgb(100,0,255) 1px;
}

.item {
	padding: 0.5rem;
	margin-bottom: 0.5rem;

    border: solid white 1px;
    overflow: hidden;
}

.item.last {
	margin: 0;
}


/* IFRAME */

.iframe-wrapper {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 */
    padding-top: 25px;
    height: 0;

    margin-top: 0.5rem;
}

.iframe-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: calc(100% - 2px);
    height: calc(100%);

    background: white;
    border: solid rgb(100,0,255) 1px;
}


/* TEXT */

p {
	margin: 0;
	margin-bottom: 0.5rem;
	color: white;

	text-align: center;
}

.bigboy {
	width: 100%;
	margin: auto;

	color: white;

	font-family: Ribes;
	font-size: 1rem;
	vertical-align: center;
	letter-spacing: -0.3rem;
	text-transform: uppercase;

	writing-mode: vertical-lr;
	text-orientation: upright;
	transform-origin: 0% 50%;

	transition-duration: 0.3s;
	z-index: -1;
}

.bigboy.left {
	margin-left: -0.15rem;
	transform: scale(4,1.3);
}

.bigboy.right {
	margin-left: -0.6rem;
	transform: scale(4,2.3);
}

.bigboy:hover {
	transition-duration: 0.3s;
}

.title {
	font-family: Basis;
	line-height: 1rem;

	z-index: 100;
	transition-duration: 0.3s;
}

.subtitle {
    margin: 0rem;
}

.desc,
.desc a {
    margin-top: 0.5rem;
    margin-bottom: 0;

	color: white;
}


/* LINKS */

a {
	text-decoration: underline rgb(100,0,255) solid;
	cursor: alias;
}

a:hover .subtitle,
a:hover {
    -webkit-animation: flash 0.2s linear 0s infinite;
    animation: flash 0.2s linear 0s infinite;
}


/* IMAGES */

img {
	width: 100%;
	margin: 0.5rem 0rem -0.2rem 0rem;
}