/* 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 {
  /* background-color: white; */
  font-family: helvetica;
  color: #404040;
  text-align: center;
}

.box-border {
  background-color: #C0C0C0; /* classic OS 9 gray */
  border-top: 2px solid #FFFFFF;   /* top-left highlight */
  border-left: 2px solid #FFFFFF;
  border-bottom: 2px solid #808080; /* bottom-right shadow */
  border-right: 2px solid #808080;
  padding: 15px;      /* space between text and edges */
  margin: 20px auto;  /* centers horizontally and adds vertical spacing */
  width: 400px;       /* adjust as needed */
  text-align: center; /* center the text inside the box */
  font-family: "Trebuchet MS", Geneva, sans-serif;
}

.footer {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  text-align: center;
  padding: 5px 0;
  background-color: transparent;
  z-index: 100;
}

.top-row {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  position: relative;
  margin-top: 20px;
}

#welcome-box {
  width: 400px
}

#side-box {
  width: 120px;
  margin-left: -550px;
  padding: 8px;
  transform: rotate(-10deg);
  font-size: 0.9em;
}

#side-box img {
  border-top: 2px solid #FFFFFF;   /* top-left highlight */
  border-left: 2px solid #FFFFFF;
  border-bottom: 2px solid #808080; /* bottom-right shadow */
  border-right: 2px solid #808080;
  padding: 2px;
  max-width: 40%;
  height: auto;
  display: block;
  margin: 5px auto;
}

#about-box img {
  border-top: 2px solid #FFFFFF;   /* top-left highlight */
  border-left: 2px solid #FFFFFF;
  border-bottom: 2px solid #808080; /* bottom-right shadow */
  border-right: 2px solid #808080;
  padding: 2px;
  max-width: 55%;
  height: auto;
  display: block;
  margin: 5px auto;
}

.gif-link {
  border-top: 3px solid #FFFFFF;   /* top-left highlight */
  border-left: 3px solid #FFFFFF;
  border-bottom: 3px solid #808080; /* bottom-right shadow */
  border-right: 3px solid #808080;
}

p {
  line-height: 1.4;
  margin-bottom: 3px;
}


.back-button {
  margin-right: 1100px;
  padding: 5px;
  border-top: 3px solid #FFFFFF;   /* top-left highlight */
  border-left: 3px solid #FFFFFF;
  border-bottom: 3px solid #808080; /* bottom-right shadow */
  border-right: 3px solid #808080;
  text-decoration: none;
  color: #404040;
  background-color: #C0C0C0;
  font-weight: bold;
}

.header {
  display: flex;
  align-items: flex-start;
}

#whybox {
  margin: 0 auto;
}