body {
  background-image: url("/img/clouds_h1.png");
  
  background-repeat: no-repeat; /* Do not repeat the image */
  background-size: cover;
  
  font-family: monospace;
  font-size: 14px;
  color: #333;
  }
h1 {
  margin-bottom: 0;
  padding: 10px 20px;
  text-align:left;
  border-bottom:3px solid transparent;
  border-image: linear-gradient(to right, #b827fc 0%, #2c90fc 25%, #b8fd33 50%, #fec837 75%, #fd1892 100%);
  border-image-slice: 1;
  background-color: #010081;
  color:#fff;
  align-self:flex-start;
  width:480px;
  border-radius: 10px 10px 0 0;
  }


  h2 {
    color:#fff;
    width: 50%;
    }
.logo {
  color:#fff;
  font-size:33px;
  font-style:italic;
  text-shadow: #ffcc00 1px 0 10px;
  }
.logo img {
  width: 100%;
  object-fit: contain;
  }
.diomedes {
  position:absolute;
  left: 654px;
  bottom:435px;
  }
  
.frame {
  width: 900px;
  height:700px;
  position: absolute;
  top: 55%;
  left: 45%;
  margin-top: -300px;
  margin-left: -450px;
  display:flex;
  flex-direction:column;
  }
.window {
    display:flex;
    flex-direction: row;
  }
.taskbar {
  width: 100%;
  height:50px;
  background-color:#c0c0c0;
  border:3px solid #333;
  border-style: outset;
  display:flex;
  justify-content:space-between;
  }
.taskbar img {
  max-width:20px;
  }

.container-name {
  background: linear-gradient(to right, #010081, #1085D2);
  border-radius:20px 20px 0 0;
  display: flex;
  flex-direction: row;
  justify-content:space-between;
  }
.container-name, .sidebar, .content {
  padding:15px;
  background-color: #333;
  border:3px solid #000;
  }
.container-name a {
  padding: 7px 15px;
  text-shadow: #333 2px 2px;
  background-color: #888;
  border:3px solid #ccc;
  border-style: outset;
  text-decoration: none;
  font-size: 20px;
  margin: 5px;
  color: #fff;
  }
.container-name a:hover {
  color: #66ffff;
  text-decoration:underline;
  border-style: inset;
}
.container-name h2 {
  margin: 0 20px;
  font-weight:bold;
  font-style:italic;
  }
.container-name h2 img {
  max-width:24px;
  }
.side-box {
    display:flex;
  flex-direction: column;
  align-items:end;
  justify-content:end;
  }
.nav {
  display:flex;
  flex-direction: row;
  justify-content:center;

  }
.nav a {
  padding: 2px 15px;
  display:block;
  box-shadow: #333 2px 2px;
  background-color: #c0c0c0;
  border:3px solid #fcfffe;
  border-style: outset;
  text-decoration: none;
  font-size: 18px;
  margin: 5px;
  color: #000;
  }

#current, .nav a:hover {
  font-weight: bold;
  text-decoration:underline;
  border-style: inset;
  background-image: url('/img/btn-active.gif');
  box-shadow: #333 -2px -2px;
  }
  
.main-box {
  display:flex;
  flex-direction:column;
  align-content:stretch;
  height:100%;
  }
.sidebar {
  width: 300px;
  height:300px;
  display:flex;
  flex-direction: column;
  color: #fdffff;
  background-color: #010081;
  overflow-y:scroll;
  border-radius: 20px 0 0 0;
  border-right: none;
  }
.sidebar ul {
  margin: 0;
  padding:0;
  }
.sidebar ul li {
  margin: 15px 0;
  list-style-type:none;
  padding:0;
  }
.sidebar a {
  display:block;
  width:80%;
  padding: 0 10px;
  border: 2px solid #008080;

  text-decoration: none;
  font-size: 20px;
  color: #fdffff;
  }
  
.sidebar a:hover {
  color:#66ffff;
  font-weight:bold;
  font-style:italic;
  background-color: #000;
  border-bottom: 2px solid #66ffff;
}
.sidebar a:hover::before {
  content: "> ";
  }
.sidebar span {
  margin: 10px;
  display:flex;
  align-items:center;
  
}
.sidebar span img {
  margin-right: 20px;
  }
.container {
  height:100%;
  padding:0 2px 0 5px;
  background-color: rgba(253, 255, 255, 0.7);
  border:3px solid #333;
  color: #333;
  list-style-image:url("/img/paw.gif");
  }
.text a {
  color: #008080;
  text-shadow: #333 1px 1px;
  font-weight:bold;
  font-size:18px;
  font-style: italic;
  }
.text a:hover {
  color: #ff0081;
  }
.text img {
  text-align:center;
  margin: 10px 0;
  }
.text strong {
  font-weight:bold;
  font-size: 26px;
  }
.content {
  background-color:rgb(255, 255, 225);
  background-image:
  linear-gradient(rgb(0 0 255 / 0), rgb(255 255 225 / 1), rgb(255 255 225 / 1)),
  url("/img/clouds_h1.gif");
  border-radius:20px;
  padding:10px 20px;
  margin: 20px 0;
  color: #333;
  display:flex;
  font-size: 15px;
  flex-direction: column;
  align-items:center;
  
  }
.first {
  border-top:none;
  margin-top: 0;
  width:475px;
  border-radius:0 0 20px 20px;
  }
.text {
  height:585px;
  overflow-y:scroll;
  padding:0 5px 0 5px;
  display:flex;
  flex-direction: column;
  align-items:center;
  }
.tooltip {
  box-shadow: #ff0081 2px 2px;
  border: 1px solid #000;
  background-color: #ffffca;
  padding: 20px;
  margin: 15px;
  color:#000023;
  text-align:center;
  }
  
@media only screen and (max-width: 550px) {
  .taskbar {
    flex-direction: column;
    }
  .nav:first-child, .taskbar img {
    display:none;
    }

}

@media only screen and (max-width: 1000px) {
  .nav {
    flex-wrap:wrap;
    }
  .taskbar {
    height:auto;
    }
  .side-box {
    display:none;
    }
  .main-box {
    width:100%;
  }
  .container img {
  width: 100%;
  object-fit: contain;
    }
}
@media only screen and (max-width: 1500px) {
body {
    background-repeat: repeat;
    }
h1 {
    width:80%;
    align-self: unset;
    }
.content {
  background-image:none;
  width:80%;
  border-width: 1px;
  }
.frame {
  width:100%;
  height:100%;
  top: 0;
  left: 0;
  margin: 0;
    }
.side-box {
  justify-content:start;
  }
.sidebar {
    height: 100%;
    }
.main-box {
    height:auto;
    }

.text,.container {
    height:auto;
    }
  
.diomedes {
    display:none;
    }
.taskbar {
    width: 100%;
    border:none;
    position:sticky;
    bottom:0px;
    }
.side-box {
    width:20%;
    }
.sidebar {
    width:auto;
    }
}
@media only screen and (max-height: 690px) {
  .taskbar {
  position:sticky;
  bottom:0px;
    }

}