@font-face {
  font-family: "Orbitron";
  src: url('Orbitron.ttf');
}

@font-face {
  font-family: "Audiowide";
  src: url('Audiowide.ttf');
}

body {
background-color: #000013;
font-family: Orbitron;
}

div {
position: absolute;
}

a {
text-decoration: none;
}

.box {
border-style: solid;
border-color: #0000DF;
z-index: -1;
}

.top {
background-image: linear-gradient(#000013, #00005A);
top: 0%;
height: 20%;
}

.low {
background-image: linear-gradient(#00005A, #000013);
bottom: 0%;
}

.tl {
left: 0%;
width: 18.5%;
border-width: 0 1vw 1vw 0;
border-radius: 0 0 1vw;
}

.tr {
right: 0%;
width: 78.5%;
border-width: 0 0 1vw 1vw;
border-radius: 0 0 0 1vw;
color: #FA6428;
font-size: 3.5vh;
}

.tr > div {
position: absolute;
right: 5%;
bottom: 5%;
border-style: solid;
border-width: 0 0 .5vh 0;
border-color: #FA6428;
padding: 0 5vw;
}

.tr > div:before {
content: "Latest Episode: "
}

.bl {
left: 0%;
width: 23.5%;
border-width: 1vw 1vw 0 0;
height: 25%;
border-radius: 0 1vw 0 0;
line-height: 0.25;
text-align: right;
}

.bl > h2 {
font-size: 4vh;
font-family: Audiowide;
text-decoration: underline;
}

.bl > h2:first-of-type {
color: #FA6428;
}
.bl > h2:last-of-type {
color: #1E50FA;
}

.bl > p {
font-size: 4vh;
}

.bl > p:first-of-type {
color: #FF9B00;
}
.bl > p:last-of-type {
color: #00FFFF;
}

.br {
right: 0%;
width: 73.5%;
border-width: 1vw 0 0 1vw;
height: 25%;
border-radius: 1vw 0 0 0;
color: #00FFFF;
font-size: 4vh;
}

.br > div {
padding: 1vh;
}

.center {
width: 120vh;
max-width: 100%;
height: 60%;
z-index: 0;
//background-color: #FF0000;
top: 24%;
left: 45%;
transform: translateX(-50%);
//opacity: 25%;
pointer-events: none;
}

.center > * {
pointer-events: auto;
}

.nav {
top: 0%;
left: 0%;
width: 25%;
}

.background {
width: 80%;
height: 47vh;
top: 0%;
right: 0%;
border-style: solid;
border-width: 2px;
border-color: #0000FF;
border-radius: 20px;
}

.nav > a {
display: block;
color: #FFF;
background-color: #000;
opacity: 50%;
font-size: 4vh;
padding-left: 2vh;
margin-bottom: 1vh;
border-style: solid;
border-color: #FFF;
border-width: 1vh 0 0 1vh;
border-radius: 1vh 0;
z-index: 0;
}

.nav > a:hover {
background-image: linear-gradient(#000000, #410000);
opacity: 100%;
border-color: #A10000;
margin-left: 10%;
width: 100%;
}

.name {
font-family: Audiowide;
font-size: 6vh;
padding: 1vh 4vh;
background-image: radial-gradient(#00005A, #00005A, #00005A, #0000DF);
border-radius: 6vh;
border-style: solid;
border-width: 1vh;
border-color: #0000DF;
left: 21%;
top: 3%;
transform: translateX(-50%);
}

.name > a {
color: #FFF;
}

.party {
width: 20%;
bottom: 15%;
background-color: rgba(0,0,0,85%);
font-size: 2.5vh;
border-color: #AAAAAA;
border-style: solid;
border-width: .25vw 0 0 .25vw;
border-radius: .5vw 0 0 0;
padding-top: 4vh;
z-index: 1;
}

.party > div {
display: block;
opacity: 100%;
text-align: center;
color: #FFF;
top: 0%;
width: 100%;
}

.party > a {
display: block;
padding-left: .25vw;
color: #00FFFF;
}

.desktop {
position: absolute;
z-index: 0;
height: 85%;
bottom: 20%;
}

.p3 {
right: 0%;
//display: none;
}

.p2 {
right: 21%;
}

.p1 {
right: 42%;
}

.party > a[href^="https://twitch.tv"] {
color: #9146FF;
}
.party > a[href^="https://youtube.com"] {
color: #FF0000;
}

.party > a:hover {
text-decoration: underline;
}

.nolink:hover {
background-image: url("noonlydog.png");
background-size: contain;
background-repeat: no-repeat;
background-position: center top;
color: #FFFFFF00;
text-shadow: none;
}

.com:after {
content: ".com"
}

.about {
position: absolute;
width: 100%;
height: 100%;
overflow: hidden;
}

#about {
display: block;
position: absolute;
top: 100%;
right: 0;
width: 75%;
height: 100vh;
z-index: 10;
border-style: solid;
border-width: 0;
}

#about > div {
font-size: 3vh;
color: #EDEDED;
padding: 4vh 2vh 2vh;
border-style: solid;
border-color: #5A1010;
background-image: linear-gradient(#130707, #5A1010);
border-width: 1vh;
border-radius: 1vh;
//text-shadow: 0.25vh 0.25vh #000, -0.25vh -0.25vh #000;
}

#about > div > p {
color: #FFFF00;
}

.episodes {
position: absolute;
width: 100%;
height: 125%;
left: 25%;
background-color: #FFFF00;
}

iframe {
display: contents;
}

@media only screen and (orientation: portrait) {
.center {
width: 100%;
height: 100%;
top: 0%;
left: 0%;
transform: none;
}

body {
background-color: #1F1F1F;
width: 100%;
height: 100%;
text-shadow: 0.5vw 0.5vw #000;
}

.party {
background-color: #680A12;
opacity: 100%;
width: 31%;
height: 42%;
font-size: 5vw;
bottom: 0%;
right: auto;
border-color: #C42537 #000 #000 #C42537;
}

.p1 {
left: 0%;
border-width: 1vw 1vw 1vw 0;
border-radius: 0 2vw 2vw 0;
}

.p2 {
left: 33%;
border-width: 1vw;
border-radius: 2vw;
}

.p3 {
left: 67%;
border-width: 1vw;
border-radius: 2vw;
}

.com:after {
content: ""
}

.nolink {
//font-size: 4vw;
}

.party > a {
color: #FFF850;
}

.party > a[href^="https://twitch.tv"] {
color: #FFF;
text-shadow: 0.5vw 0.5vw #9146FF;
}
.party > a[href^="https://youtube.com"] {
color: #FFF;
text-shadow: 0.5vw 0.5vw #FF0000;
}

.party > div {
background-color: #000;
width: 90%;
border-radius: 0 3vw 3vw 0;
}

.name {
transform: none;
top: 0%;
left: 0%;
border-radius: 0;
padding: 0;
border-width: 0;
font-size: 6vw;
width: 100%;
background-image: linear-gradient(#C42537,#680A12,#680A12);
height: 4%;
z-index: -1;
}

.tr {
background-image: none;
background-color: #000;
height: 4%;
z-index: 2;
width: 50%;
border-width: 0 0 1px 0;
font-size: 4vw;
border-radius: 0;
border-color: #680A12;
color: #FFF;
}

.tr > div {
border-width: 0;
padding: 0;
}

.tr > div:before {
content: "Latest: "
}

.tl {
background-image: none;
background-color: #000;
z-index: 1;
border-width: 0;
border-radius: 0;
width: 10vw;
height: 10vw;
left: 45%;
top: -5vw;
rotate: 45deg;
}

.nav {
width: 50%;
top: 5%;
}

.nav > a {
font-size: 5vw;
border-width: 1px;
border-color: #000;
border-radius: 0 0 5vw 0;
opacity: 100%;
background-image: linear-gradient(#1F1F1F,#000000,#000000,#1F1F1F);
}

.low {
bottom: 50%;
height: 15%;
width: 50%;
border-width: 1px;
border-radius: 0;
border-color: #000;
background-image: linear-gradient(#1F1F1F,#000000,#000000,#000000)
}

.bl > h2 {
font-size: 4vw;
text-align: left;
text-decoration: none;
font-family: Orbitron;
}

.bl > p {
font-size: 4vw;
}

.br {
color: #FFF;
font-size: 3.5vw;
}

.br > div {
top: auto;
bottom: 0%;
padding: 3%;
text-align: justified;
}

.bl > h2:first-of-type {
color: #F97004;
}
.bl > h2:last-of-type {
color: #AE001E;
}

.bl > p:first-of-type {
color: #F3D901;
}
.bl > p:last-of-type {
color: #B0233D;
}

.background {
width: 48%;
height: 25%;
top: 5%;
border-color: #680A12;
}

.desktop {
display: none;
}

.about {
width: 120vw;
left: -25%;
}

#about > div {
font-size: 5vw;
margin-top: 50%;
width: 75vw;
border-width: 1vw;
border-radius: 1vw;
background-image: linear-gradient(#000013, #00005A);
border-color: #0000DF;
}


}