@import "vars";

html {
	height: 100vh;
	width: 100vw;
	display: flex;
	justify-content: center;
	align-items: center;
}

body {
	background: $bg;
	background-repeat: no-repeat;
    background-size: cover;
	font-family: $font;
	font-size: $fsize;
	letter-spacing: $lspacing;
    height: 100vh;
    width: 100vw;
    margin: 0;
}

#body {
	width: 70%;
	height: 70%;
    position: absolute;
    right: 100px;
    bottom: 70px;

	display: grid;
	gap: 10px 10px; grid-gap: 10px 10px;
	grid-template-columns: 100px 230px 5fr;
	grid-template-rows: auto 240px;
	grid-template-areas:
		"banner nav    main"
        "banner cbox   main";

	& > div, & > iframe { height: 100%; width: 100%; }
}

.scroll { overflow-y: auto; }

#banner {
	grid-area: banner;

    #banner-inner {
        grid-area: bannerinner;
        font-family: 'Sacramento', cursive;
        font-size: 80px;
        color: $accent2;
        transform: rotate(-90deg);
        position: absolute;
        translate: -15% 100%;
        z-index: 1000;
        text-shadow:
             3px  3px 5px #fff,
            -3px -3px 5px #fff,
             3px -3px 5px #fff,
            -3px  3px 5px #fff;
    }
}

#main {
	grid-area: main;

	& > iframe {
		width: 100%;
		height: 100%;
	}
}

#nav {
	grid-area: nav;
}

#cbox {
	grid-area: cbox;
	position: relative;
}

#footer {
	grid-area: foot;
	text-align: center;
}

.transparent {
  background: rgba(255,255,255,0.70);
}

a {
	text-decoration: none;
	color: $accent1;

	&:hover {
		text-decoration: underline;
		color: $accent2;
	}
}