html{
      
     /*background-color: #FFFDDD;*/
      background-image: url(tdie_images/background.png);
      height: 100%;
      width: 100%;
      margin: 0;
      overflow: auto;
      background-repeat: no-repeat;
      background-position: center center;
      background-size: cover;
      font-family: 'Courier New', Courier, monospace;
      color: #805344
   
  }
  
  body {
      
      height: 100%;
      width:100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      margin: 0;
      box-sizing: border-box; /* adds padding and border to the width*/
      
  }
  
  #title-background {
      
      width: 100%;
      margin-top: 0px;
      margin-bottom: 0px;
      height: 300px;
      box-sizing: border-box;
      padding-left: 20px;
      padding-right: 20px;
      display: flex;
      justify-content: center;
      font-weight: bold;
      margin-top: 30px;
      min-width: 400px;
      min-height: 300px;
      flex-shrink: 0;
      pointer-events: none; /* take out?????? */
      
  }
     
  #title {
      
      width: 100%;
      height:100%;
      margin: auto;
      display: flex;
      justify-content: center;
      align-items: center;
      background-image: url(tdie_images/title.jpeg);
      background-position: center 25%;
      background-size: cover;
      background-repeat: no-repeat;
      pointer-events: none;
      
  }
  
  .announcements-container {
      
      height: 20px;
      width: 100%;
      display: flex;
      box-sizing: border-box;
      flex-shrink: 0;
      overflow: hidden;
      background-color: #ffc7b2;
      
      
  }
  
  @keyframes announce {
      
      0% {transform: translateX(0px);}
      100%{transform: translateX(-4118px);} /*-910px for first two lines*/
      
  }
  
  .announcements {
      
      height: 20px;
      min-height: fit-content;
      width: max-content;
      padding-left: 20px;
      padding-right: 20px;
      display: flex;
      animation-name: announce;
      animation-duration: 45s;
      animation-iteration-count: infinite;
      animation-timing-function: linear;
      animation-direction: normal;
      
  }
  
  .message {
      
      height: fit-content;
      width: fit-content;
      display: flex;
      overflow: visible;
      color: #3b2720;
      white-space: nowrap; /* keeps it all on one line */
      
      
  }
  
  #central {
      
      border: none;
      width: 100%;
      flex: 1;
      min-height: 0px;
      text-align: center;
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-top: 0px; /* twice that of the gap in #scroll */
      margin-bottom: 0px;
      margin-left: 0px;
      margin-right: 0px;
      box-sizing: border-box; /* so that the padding is factored into its size*/
      padding-left: 20px;
      padding-right: 20px;
      
  }
  
  #scroll {
  
      width: 100%;
      flex: 1;
      min-height: 140px; /* 145px is halfway down the next box (2.5 boxes showing), 120px is only two boxes showing */
      overflow: auto;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 20px;
      padding: 20px;
      
  }
  
  #blog {
      
      width: 100%;
      height: 50px;
      background-color: rgba(232, 231, 226, 0.73);
      display: flex;
      vertical-align: top;
      align-items: center;
      justify-content: center;
      
  }
  
  @keyframes blink {
      
      0% {background-color: #FFFDDD;} /* yellow at start of animation */
      50% {background-color: #ffb8a2;} /* invisible halfway through animation*/
      100% {background-color: #FFFDDD;} /* visible at end of animation */
      
  }
  
  #blog:hover {
      
      color: #805344;
      animation-name: blink;
      animation-duration: 0.6s;
      animation-iteration-count: infinite;
      
  }
  
  #blog a {
      
      text-decoration: none;
      color: inherit;
      
  }
  
   #comic {
      
      width: 100%;
      height: 50px;
      background-color: rgba(232, 231, 226, 0.73);
      display: flex;
      vertical-align: top;
      align-items: center;
      justify-content: center;
      
  }
  
   #comic:hover {
      
      color: #805344;
      animation-name: blink;
      animation-duration: 0.6s;
      animation-iteration-count: infinite;
      
  }
  
  #comic a {
      
      text-decoration: none;
      color: inherit;
      
  }
  
   #music {
      
      width: 100%;
      height: 50px;
      background-color: rgba(232, 231, 226, 0.73);
      display: flex;
      vertical-align: top;
      align-items: center;
      justify-content: center;
      
  }
  
  #music:hover {
      
      color: #805344;
      animation-name: blink;
      animation-duration: 0.6s;
      animation-iteration-count: infinite;
      
  }
  
  #music a {
      
      text-decoration: none;
      color: inherit;
      
  }
  
   #socials {
      
      width: 100%;
      height: 50px;
      background-color: rgba(232, 231, 226, 0.73);
      display: flex;
      vertical-align: top;
      align-items: center;
      justify-content: center;
      
  }
  
  #socials:hover {
      
      color: #805344;
      animation-name: blink;
      animation-duration: 0.6s;
      animation-iteration-count: infinite;
      
  }
  
  #socials a {
      
      text-decoration: none;
      color: inherit;
      
  }
  
  #turtlepen {
      
      width: 100%;
      height: 300px;
      margin: 0;
      overflow: hidden;
      min-height: 50px;
      display: flex;
      vertical-align: top;
      align-items: center;
      justify-content: center; 
      
  }
  
  #turtlepen iframe {
      border: none;
      display: block;
      overflow: hidden;
  }
  
  .carousel-container { /* making an effort to switch to . instead of # */
      
      width: 100%;
      height: 96px;
      display: flex;
      justify-content: center;
      align-items: center;
      overflow: hidden;
      flex-shrink: 0;
      
  }
  
  .carousel {
      
      height: fit-content;
      width: 100%; 
     /* old width: 1 image center (99px) + two halfs of an image (50 +50px) + two gaps (45+45px) + padding on both sides (80px)*/
      display: flex;
      flex-direction: row;
      align-content: right;
      box-sizing: border-box;
      padding: 20px;
      gap: 40px;
      animation-name: spin ;
      animation-duration: 14s;
      animation-iteration-count: infinite;
      animation-timing-function: linear;
      animation-direction: reverse;
      min-height: fit-content;
      
  }
  
  @keyframes spin{
      
      0% {transform: translateX(0px);}
      100% {transform: translateX(-1946px);} /* (14 images * 99px) + (13 spacings between images * 40px) + one more space to connect the last image to the first repeat image (40px) = too short a distance??*/

  }
  
  .carousel:hover{
      
      animation-play-state: paused;
      
  }