body {
  font-family: 'Times New Roman', Times, serif;
  font-size: 0.875em;
  text-align: center;

  
}
  
center {
  text-align: center;
  }
 
/*INdEX HTML DIVS */
/*Contains everything*/
.wrapper {
  width: 1150px;
  margin: 0 auto;
  top: 0;
  margin-top: -10px;
  border-left: 0 solid #12282f;
  border-right: 0 solid #12282f;  
  margin-bottom: -10px;
  }
  
/*Contains main and sidebar divs*/
.wrapper-2 {
  position: relative;
}
  
/*Header and footer images*/
.header, .footer {
  height: 200px;
  overflow: hidden;
  background-size:cover;
  }
  
  
.footer {
  height: 50px;
  }
  
  
/*Big title at the top of the page.*/  
.title {
  padding: 15px 10px 10px 20px;
  color: #fff;
  text-align: center;
  -webkit-animation: glow 1s ease-in-out infinite alternate;
  -moz-animation: glow 1s ease-in-out infinite alternate;
  animation: glow 1s ease-in-out infinite alternate;
    -webkit-text-stroke: 1px #103334;
  font-size: 20px
}
@-webkit-keyframes glow {
  from {
    text-shadow: 0 0 10px #00f4ff, 0 0 20px #00f4ff, 0 0 30px #8cd7ff, 0 0 40px #0009ff, 0 0 50px #00f4ff, 0 0 60px #8cd7ff, 0 0 70px #8cd7ff;
  }
  to {
    text-shadow: 0 0 20px #fff, 0 0 30px #8cd7ff, 0 0 40px #00f4ff, 0 0 50px #103334, 0 0 60px #00f4ff, 0 0 70px #00f4ff, 0 0 80px #fff;
  }
  }
  
/*Override default margins/padding for headings.*/
.title h1, .title h2, .title h3 {
  padding:0;
  margin: 0;
  }

/*Container for top row of links.*/
.links {
  padding: 5px;
  padding-top: 3px;
  padding-bottom: 5px;
  }
  
/*Div style for individual links.*/
.link {
  text-align: center;
  display: inline-block;
  list-style-type: none;
  float: none;
  font-weight: bold;
  font-size: 1.16em;
  padding: 5px;
  margin-right: 10px;
  margin-left: 10px;
  border: 0 solid red;
  a:hover {
  color: #d60000;
  font-display: fallback;
}
  }
  
.link a {
  color: white;
  text-decoration: none;
  }

/*These three classes are just for defining the boundaries and size of the main and sidebar columns. Most fancy styling goes in the 'box' class.*/
.main, .sidebar-right {
  display: inline-block;
  }
  
.sidebar-left, .sidebar-right {
  width: 200px;
  position: absolute;
  top: 0;
  }

.sidebar-left {
  margin-left: 10px;
  }
  
.main {
  width: 710px;
  
  }
  
.sidebar-right {
  margin-right: 10px;
  margin-left: 10px;
  }
  
/*Box used for individual sections in the sidebar, center column, etc.*/
.box {  
  padding: 5px 10px 0 10px;
  background-image: linear-gradient(#367668, #103334);
  border-top: 5px solid #103334;
  border-bottom: 5px solid #103334;
  border-right: 5px solid #103334;
  border-left: 5px solid #103334;
  margin: 10px 0 15px 0;
    color: #2cd6ca;
  a {
      display: flex;
  justify-content: center;
  gap: 15px;            
  margin-top: 10px;  
  color: #fff;
 
  font-weight: bold;
  }
    a:hover {
  color: #d60000;
  font-display: fallback;
}

  
  }
  #section-1 {
  font-weight: 900;
  color: #0b4b3d;
  text-align: center;
  text-shadow:
    0 0 10px #0ff,
    0 0 20px #0ff,
    0 0 30px #0ff;
  animation: flicker 3s infinite alternate;
}

@keyframes flicker {
  0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% {
    text-shadow:
      0 0 10px #0ff,
      0 0 20px #0ff,
      0 0 30px #0ff;
  }
  20%, 22%, 24%, 55% {
    text-shadow: none;
  }
}


.boximg {
  height: 400px;
    overflow:scroll;
    overflow-x:hidden;
  padding: 1px 10px 0 10px;
  background: #367668;
  color: #009ca0;
  border-top: 5px solid #103334;
  border-bottom: 5px solid #103334;
  border-right: 5px solid #103334;
  border-left: 5px solid #103334;
  margin: 10px 0 15px 0;
  background-image: url(treebranch.jpg);
   -webkit-text-stroke: 1px #009ca0;
  overflow-y: scroll;
  scrollbar-color: #1f1f1f #367668;
} 
    
  

/***
  Not give any style rules by default. Move the padding from the 'box' class here if you want boxes with specially styled headers or images that 
  don't follow the margins of the main text. (For an example of that: see skin #1.)
  ***/
.inner {
  
  }
.left-img {
  float: left;
  margin-right: 15px;
  margin-bottom: 10px;
  display: inline;
  height: auto;
}

.right-img {
  float: right;
  margin-left: 15px;
  margin-bottom: 10px;
  display: inline;
  text-align: initial;
}
marquee {
  overflow: hidden;
  white-space: nowrap;
  box-sizing: border-box;
  width: 100%;
  height: 150px; /* fixed height */
}

.marquee__content {
  display: flex;
  animation: scroll 20s linear infinite;
}

.marquee__content img {
  height: 150px; /* fixed height */
  flex-shrink: 0;
  margin-right: 10px; /* no space between images */
  object-fit: cover;
@keyframes scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}
  }
/* pause on hover */
.marquee__content: hover {
  animation-play-state: paused;
}

  

  
/* For narrow screens. Makes the sidebars narrower, and makes width of the 
 * center/main div 50% of the viewport width.
 */
@media(max-width:1180px) {
  .wrapper {
    width: calc(440px + 50vw);
    }
  .main {
    width: 50vw;
    }
  }
  
@media(max-width:910px) {
  .wrapper {
    width: calc(360px + 52vw);
    }
  .sidebar-left, .sidebar-right {
    width: 160px;
    }
  .main {
    margin-left: 180px;
    width: 52vw;
    }
  


}