/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */
   
@font-face
{
  font-family: "Minecraft";
  src: 
    url("/resource/MINECRAFT.TTF") format("truetype");
}

@font-face
{
  font-family: "Planet Kosmos";
  src: 
    url("/resource/kosmos.ttf") format("truetype");
}

body {
  background-color: white;
  color: black;
  text-align: center;
}

.container {
  background-color: #57cdff;
  border-radius: 5px;
  padding: 0.4rem;
  overflow-y: auto;
  overflow-x: hidden;
  border: 5px solid dodgerblue;
  margin: auto;
  box-shadow: 3px 2px 10px 2px #0b59db;
  width: 97%;
}

.layout {
  width: 100%;
  height: 100%;

  display: grid;
  grid:
    "header header header" 0.2fr
    "leftSide body rightSide" 1fr
    "footer footer footer" 0.2fr
    / 0.4fr 1fr 0.6fr;
  gap: 0.125rem;
}

.header { 
  grid-area: header; 
  background-color: #fff9a1;
  border-radius: 5px;
  width: 100%;
}

.headertext {
  font-family: "Planet Kosmos";
  font-size: 40px;
  color: #129cff;
  text-align: center;
  filter: drop-shadow(0px 1px white) drop-shadow(0 -1px white) drop-shadow(1px 0 white) drop-shadow(-1px 0 white) drop-shadow(0px 1px paleturquoise) drop-shadow(0 -1px paleturquoise) drop-shadow(1px 0 paleturquoise) drop-shadow(-1px 0 paleturquoise);
  animation: floating 4s infinite ease-in-out;
  text-shadow: 3px 0px 2px #b0eafd;
}

.leftSide { 
  grid-area: leftSide; 
}

.body { 
  grid-area: body;
}

.rightSide { 
  grid-area: rightSide; 
}

.footer { 
  grid-area: footer; 
  background-color: #fff9a1;
  border-radius: 5px;
  text-align: center;
  font-size: 12px;
  padding-top: 0.3rem;
  padding-bottom: 0.3rem;
  line-height: 1.4;
  width: 100%;
  margin: auto;
  color: dodgerblue;
}

iframe {
  border-style: none;
  border-radius: 5px;
  margin: 0.3rem;
  padding: 0.25rem;
  height: 18.75rem;
  overflow-x: hidden;
  overflow-y: scroll;
}

.nav {
      padding: 0.3rem;
      border-radius: 5px;
      align-items: center;
      background: white;
      font-family: "Minecraft";
      position: absolute;
      width: 12.5rem;
      margin-top: 0.6rem;
      margin-left: 1.25rem;
      font-size: 13px;
    }
    
.nav a {
  color: deepskyblue;
  transition: .2s ease;
}

.nav a:hover {
  color: #f5dd42 !important;
  letter-spacing: 4px;
}
    
.nav .titlebar {
      color: white !important;
      font-family: "Minecraft";
      background-color: deepskyblue;
      vertical-align: top;
      padding: 0.3rem;
      text-align: center;
      font-size: 18px;
      margin-bottom: 0.125rem;
    }

 @keyframes floating {
    0% {
      transform: translate(0, 0px);
    }

    50% {
      transform: translate(0, 6px);
    }

    100% {
      transform: translate(0, -0px);
    }
 }