html, body {
    margin: 0;
    height: 100%;
}

body {
    background-image: url(images/bg.png);
    background-size:cover;
    background-repeat: no-repeat;
    width: 100%;
    overflow: hidden;
}

.page {
    display: flex;
    height: 100vh;
}

.content {
    flex: 1;
}

.side-panel {
    width: clamp(300px, 23.5vw, 500px);
    position: relative;
}

.diagonal-nav {
    position: absolute;
    top: 36%;
    left: -11%;
    display: flex;
    flex-direction: column;
    gap: 2.25vh;
    text-shadow: 
    -.2vw .2vw #2c2c2c,
    -.35vw .35vw black;
}

.diagonal-nav a {
    display: block;
    color: white;
    text-decoration: none;
    font-family: UAV;
    padding: 10px 40px;
    font-size: 30px;
    transform: rotate(-45deg);
    transform-origin: left center;
}

.logo {
    position: absolute;
    top: 1vh;
    left: 2vh;
    width: 15%;
    height: 80%;
}

@font-face {
    font-family: UAV;
    src: url(fonts/UAV-OSD-Sans-Mono.ttf);
}

@font-face {
    font-family: KHG;
    src: url(fonts/KHGrinta-Light.otf);
}

.panel-bottom {
    position: absolute;
    bottom: 1%;
    left: -3%;
    width: 100%;
    height: 24%;
    background: rgba(0,0,0,0.15); /* temp visual */
}

.sub-panel {
    position: absolute;
    right: .75vw;
    bottom: 26%;
    width: 47%;
    height: 71%;
    background: rgba(0,0,0,0.75);
}

iframe {
    transform: scale(0.5);
    transform-origin: 0 0;
    width: 200%;
    height: 200%;
}

h1 {
    color: white;
    font-family: KHG;
    text-shadow: 0vw .2vw black;
}

p {
    padding: 1vh;
    color: white;
    font-family: KHG;
    text-shadow: 0vw .1vw black;
    font-size:xx-large;
}

.panel-left {
    position: absolute;
    bottom: 3vh;
    left: 3vh;
    width: 72%;
    height: 80%;
    background: rgba(255, 255, 255, 0.15); /* temp visual */
}

.top-head {
    position: absolute;
    top: 3vh;
    left: 0vh;
    width: 87%;
    height: 10%;
    font-size: 2vh;
    color: white;
    display: flex;
    justify-content:space-around;
    align-items: center;
}

.top-head .date {
    font-family: monospace;
    color: #0f9;
}

.top-head .time {
    font-family: monospace;
    color: #ff5;
}

.top-head .temperature {
    margin-left: 15vw;
    font-family: monospace;
    color: #2af;
}

.sub-panel button {
  background-color: #e4e4e4;
  color: black;
  margin: 1vh;
  padding: 8px 16px;
  border-radius: 4px;
  font-size: 1.8vh;
  width: 90%;
  font-family: UAV;
}