:root {
  --main: #ffd2d4;
  --text: #7e614a;
  --accent1: #ab8c74;
  --accent2: #fffbde;
  --accent3: #fbb3b6;
}
.sour-gummy-font {
  font-family: "Sour Gummy", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-variation-settings:
    "wdth" 100;
}
h1 {
  font-size: 4rem;
  font-family: "Sour Gummy", sans-serif;
  color: var(--text);
  text-align: center;
}
h2 {
  font-size: 2rem;
  font-family: "Sour Gummy", sans-serif;
  color: var(--text);
  text-align: center;
  border-bottom: 5px ridge var(--accent1);
}
p {
  color: var(--text);
  font-family: "Sour Gummy", sans-serif;
  font-size: 1em;
}
a:link {
  color: var(--accent1);
}
a:visited {
  color: var(--accent2);
}
span {
  color: var(--text);
  font-family: "Sour Gummy", sans-serif;
  font-size: 1.2em;
}
body {
  background: url(https://goooby.neocities.org/graphics%20made%20by%20me/pattern_0_13c4b1dc7467920d92cfc4269ae551f1.png);
  padding: 70px; 
}
.container {  
  display: grid;
  padding: 10px;
  border: 5px ridge var(--accent1);
  border-radius: 20px;
  background: #FFFBDE;
background: linear-gradient(180deg,#FFFBDE 0%, #fbb3b6 75%);
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  grid-template-rows: 0.5fr auto 2fr 1.5fr auto;
  gap: 0px 0px;
  grid-auto-flow: row;
  grid-template-areas:
    "Header Header Header Header Header"
    "marquee marquee marquee marquee marquee"
    "Sidebar1 Main Main Main Sidebar2"
    "Sidebar1 Big Big Small Sidebar2"
    "Footer Footer Footer Footer Footer";
}
.Header { 
  grid-area: Header;
  border: 5px ridge var(--accent1);
  border-radius: 20px;
  margin-bottom: 5px;
}
.marquee { 
  grid-area: marquee;
  max-width: 100%;
  height: auto;
  background: var(--main);
  border: 5px ridge var(--accent1);
  border-radius: 20px;
  padding: 5px; 
  padding: 5px; 
  --gap: 1rem;
  display: flex;
  overflow: hidden;
  user-select: none;
  gap: var(--gap);
}
.marquee-track{
  height: auto;
  flex-shrink: 0;
  display: flex;
  justify-content: space-around;
  min-width: 100%;
  gap: var(--gap);
  animation: marquee 10s linear infinite;
}
.marquee:hover div {
  animation-play-state: paused;
}
@keyframes marquee {from {
    transform: translateX(0);
  }
  to {
    transform: translateX(calc(-100% - var(--gap)));
}}
.Sidebar1 { 
  grid-area: Sidebar1; 
  margin: 5px;
  padding: 10px;
  background: var(--main);
  border: 5px ridge var(--accent1);
  border-radius: 20px;
}
.Sidebar1 div {
	text-align: center;
	font-size: 1.25rem;
	margin: 5px 5px 10px 5px;
}
.Sidebar1 a {
  display: block;
	width: 95%;
  background: linear-gradient(to bottom, #ab8c74 0%,  #ab8c74 50%, #7e614a 51%,  #ab8c74 100%);
  border: 3px dashed var(--accent3);
  height: 25px;
  margin: 5px auto;
  padding: 3px;
  border-radius: 5px;
  color: var(--accent2);
  font-family: "Sour Gummy", sans-serif;
  font-size: 0.9em;
}
.Sidebar1 a:hover, nav a:focus {
	background: linear-gradient(to bottom, #ffd2d4 0%, #ffd2d4 50%, #fbb3b6 51%, #ffd2d4 100%);
}
a:visited {
	color: var(--accent3);
}
.Sidebar2 { 
  grid-area: Sidebar2; 
  margin: 5px;
  padding: 10px;
  background: var(--main);
  border: 5px ridge var(--accent1);
  border-radius: 20px;
}
.Main { 
  grid-area: Main;
  margin: 5px;
  padding: 10px;
  background: var(--main);
  border: 5px ridge var(--accent1);
  border-radius: 20px;
}
.Big { 
  grid-area: Big;
  margin: 5px;
  padding: 10px;
  background: var(--main);
  border: 5px ridge var(--accent1);
  border-radius: 20px;
}
.scrollbox {
  overflow-y: auto;
  overflow-x: hidden;
}
.Small { 
  grid-area: Small; 
  margin: 5px;
  padding: 10px;
  background: var(--main);
  border: 5px ridge var(--accent1);
  border-radius: 20px;
}
.Footer {
  grid-area: Footer; 
  text-align: center;
  margin: 5px;
  padding: 10px;
  background: var(--accent2);
  border: 5px ridge var(--accent1);
  border-radius: 20px;
}
@media only screen and (max-width: 750px) {
  body {
    padding: 10px; 
  }
  .container {
    display: flex;
    flex-direction: column;
    height: max-content;
  }
  .Header, .marquee, .Main, .Big, .Small .Sidebar1, .Sidebar2,.Footer{
    height: max-content;
  }
}