/* 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." */

body {
  color: black;
  font-family: "Comic Sans MS", Arial, sans-serif;
  margin: 0;
  padding: 0;
  background-color: #008080;  
    background-image: url("clouds.png");
  }
  
.header {
  font-size: 50px;

    
  }

.titlebar {
  height: 40px;
  background: linear-gradient(to right, #000080, #1084d0);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 8px;
  color:white;
  overflow: hidden;
  flex: 0;
}
.titlebar-title {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  text-align:left;
}

.titlebar-buttons button {
  width: 30px;
  height: 30px;
  font-size: 15px;
  margin-left: 2px;
  cursor: pointer;
  border: 5px groove #a0a0a0;
  background-color: #c0c0c0;
  color: black;
  flex-shrink:0;
}



.wrapper {
  border-radius: 15px;
  overflow: hidden;
  border: 10px groove #a0a0a0;
  width: 50%;
  margin: 0 auto; 
    background-color: #c0c0c0;

  min-height: 100vh;
}

.topbar {
  color: white;
  text-align: center;
  border-bottom: 10px groove black;
  border: 10px solid #c0c0c0;
  padding: 10px;
  margin: 0 auto;
  background-image: url("city.gif");
  background-repeat: repeat;
}

@keyframes scrollbg {
 from { background-position: 0 0; }
 to { background-position: 280px 180px; }
}

.navbar {
 background: linear-gradient(to right, #000080, #1084d0);
 display: flex;
 justify-content: center;

}

.navbut {
  min-width: 88px;
  min-height: 31px;
  margin: 10px;
  border: 3px groove #808080;
  background-color: #c0c0c0;
  color: black;
  font-family: "Comic Sans MS", Arial, sans-serif;
  font-size: 20px;
  cursor: pointer;
  display: inline-block;
}

.navbut:hover {
  background-color: #000080;
  color: white;
  border: 3px groove #1084d0;
}

.navbut:active {
  border: 3px inset #808080;
  background-color: #a0a0a0;
}



  
  .small-guy {
    width: 200px; 
  }
  
  
.columns {
  display: flex;
  flex-wrap: wrap;
  gap: 0px;
}

.left-col {
  flex: 1 1 100px;
  min-width: 100px;
  margin: 10px;
  border: 10px groove #a0a0a0;
  padding-top: 0px;
    background-color: #c0c0c0;
    text-align: center;
}

.center-col {
  flex: 3 1 280px;
  min-width: 280px;
  margin: 10px;
  border: 10px groove #a0a0a0;
  padding-top: 0px;
    background-color: #c0c0c0;
}

.right-col {
  flex: 1 1 180px;
  min-width: 180px;
  margin: 10px;
  border: 10px groove #a0a0a0;
  padding-top: 0px;
    background-color: #c0c0c0;
}

@media (max-width: 600px) {
  .wrapper {
    width: 100%;
    margin: 0;
    border-radius: 0;
  }