/* 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: #fefbfe;
  color: black;
  font-family: Verdana;
  background-image: url(/assets/emotiguy-computer-animation2_orig.gif);
}

section {
    margin-bottom: 20px;
}

.scrollable-box {
  width: 100%;
  height: 10%; /* Fixed height is required for vertical overflow */
  border: 1px solid rebeccapurple;
  overflow-x: hidden; /* Adds scrollbars only if content overflows */
  overflow-y: scroll;
  background-color: #ccc;
}

.scrollable-box-p8 {
  width: 480px;
  height: 480px; /* Fixed height is required for vertical overflow */
  border: 1px solid #ccc;
  overflow-x: hidden; /* Adds scrollbars only if content overflows */
  overflow-y: scroll;
  background-color: rebeccapurple;
}

.box-main {
  display: flex; /* Enables flexbox layout for the main container */
  /* min-height: 100vh; /* Optional: makes the wrapper at least the full height of the viewport */
  /*justify-content: center; /* Centers horizontally along the main axis */
  /*align-items: center;     /* Centers vertically along the cross axis */
  padding: 10px;
  /*width: calc(90% - 30px);*/
  width: fit-content;
  background-color: rgb(255, 255, 255);
  color: rgb(37, 0, 54);
  border: 5px solid rebeccapurple;
  flex-direction: column;
  /*margin-right: auto; */
  }

  .wrapper-borderless {
  display: flex; /* Enables flexbox layout for the main container */
  /* min-height: 100vh; /* Optional: makes the wrapper at least the full height of the viewport */
  /*justify-content: center; /* Centers horizontally along the main axis */
  /*align-items: center;     /* Centers vertically along the cross axis */
  /*flex-wrap: wrap;*/
  flex-direction: column;
  }

   .wrapper-borderless-row {
  display: flex;
  flex-direction: row;
  }

.evil-header {
  color: rgb(255, 0, 0);
  background-color: black;
  padding: 5px; 
  border: 5px solid rgb(255, 0, 0);
  width: 75%;
  font-weight: bold;
  margin: auto;
  margin-bottom: 0.5%;
}

#the-whole-shebang {
  display: flex;
  margin: auto;
  flex-direction: row;
  width: 75%;
}

#main-content {
  display: flex;
  flex-direction: column;
  /*margin: auto;*/
  margin-right: 0.5%;
}

#sideboob {
  display: flex;
  margin-bottom: auto;
  flex-direction: column;
}