/* 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-image: url("https://file.garden/aeVpDTeG9wi7ozvZ/backgrounds/eoe%20hidef.jpeg");*/
  background-image:url("https://i.imgur.com/phfhuBC.gif");
  color: black;
  font-family: "Times New Roman"; /* originally Consolas */
}

header {
  display: flex;
  flex-direction: column;
  font-size:270%;
  align-items: center;
  justify-content: center; 
  width:cover;
  height:200px;
  background-image: url("https://file.garden/aeVpDTeG9wi7ozvZ/backgrounds/eoe%20hidef.jpeg");
  background-size: cover;
  background-position:bottom;
  border-style:ridge;
}

/* scrolling!! */
.scroll-container {
  overflow: hidden; /* Hide the scrollbar */
  white-space: nowrap;
  width: 100%;
  background: #f0f0f0;
  margin-top:15px;
  margin-bottom:15px;
  border-block-start-style: double;
  border-color:red;
  border-block-end-style: double;
}

.scroll-container img {
    width:90px;
}

.scroll-content {
  display: inline-block;
  animation: scroll-left 30s linear infinite;
}

@keyframes scroll-left {
  0% { transform: translateX(0); }
  100% { transform: translateX(-100%); }
}

.scroll-container:hover .scroll-content {
  animation-play-state: running;
}

/* end scrolling!! */

.container{
  display:flex;
  flex-direction: row;
  margin-left: auto;
  margin-right: auto;
}

.main-content {
  margin-left: 1%; /* tweak to change diff to left sidebar */
  margin-right: 1%; /* tweak to change diff to right sidebar */
  width: 60%;
  height: 350px;
  padding: 0 10px;
  border-radius: 5px;
  border-style:ridge;
  box-shadow: 1px 1px 1px red;
  background-color:#fff;
  overflow:auto;
}
  
.sidebar-left {
  width: 20%;
  margin-left:20px;
  padding-left:5px;
  padding-right:5px;
  height: 40%;
}

.sidebar-right {
  width: 20%;
  margin-right:20px;
  padding-left:5px;
  padding-right:5px;
  height: 40%;
  display: flex;
  flex-direction: column;
  gap: 30px;
}