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

.page {
  margin: 10px;
  padding: 10px;
  height: calc(100vh - 20px);
  box-sizing: border-box;
}

.container {
  height: 100%;
  display: grid;
  grid-template-columns: minmax(200px, 350px) minmax(400px, 1200px) minmax(200px, 350px);
  grid-template-rows: auto 1fr;
  gap: 10px;
  grid-template-areas: 
    ". header ."
    "nav main profile-character-cont";
  justify-content: center;
}

.header {
  grid-area: header;
  background-color: #4CAF50;
  color: white;
  text-align: center;
  padding: 20px;
  height:150px;
  font-size:50px;
}

nav {
  grid-area: nav;
  background-color: #f0f0f0;
  padding: 10px;
  height:auto;
}

.nav-button-cont {
  height:50%;
  display:flex;
  flex-direction:column;
}

.nav-button {
  background-color:red;
  width:100%;
  font-size:25px;
}

.misc-cont {
  height:40%;
}

.status {
  
}

.time {
  
}

.changelog {
  
}

main {
  grid-area: main;
  background-color: #e0e0ff;
  padding: 10px;
}

.blinkies {
  width:150px;
  height:20px;
}

.profile-character-cont {
  grid-area: profile-character-cont;
  background-color: #ffe0e0;
  padding: 10px;
  display:flex;
  flex-direction: column;
}

.profile-character-link {
  
}

.profile-character-image {
  height:100px;
  border:1px solid black;
  width: 100%
}