:root {
  --green1: #003300;
  --green2: #006633;
  --green3: #009933;
  --green4: #00CC33;
  --green5: #00f91a;
  --green6: #D6FFD8;
  --green7: #F1FCF2;
  
  --text-shadow-width: 2px;
  --text-shadow-blur: 0;
  
  --border-size: 3px;
  --border-radius: 8px;
}

/* FONTS */
@font-face {
    font-family: "Edd's Font"; 
    src: url("fonts/Edd's Font.ttf") format("truetype");
}
@font-face {
    font-family: "Eastwood"; 
    src: url("fonts/Eastwood.ttf") format("truetype");
}

/* STYLING */
html { /* FIREFOX SCROLLBARS */
  scrollbar-color: var(--green4) var(--green6);
}b
html::-webkit-scrollbar { /* OTHER SCROLLBARS */
  background-color: var(--green6);
}
html::-webkit-scrollbar-thumb {
  background-color: var(--green4);
}

body {
  background-color: var(--green7);
  background-image: url("images/greenbackground.gif");
  
  font-family: "Edd's Font";
  font-size: 18px;
  color: var(--green1);
}
a {
  text-decoration-style: wavy;
  color: var(--green3);
}
a:hover {
  color: var(--green4);
}
p {
  margin-top: 5px;
  margin-bottom: 5px;
}
h1, h2, h3, h4, h5, h6 {
  margin-top: 0;
  margin-bottom: 0;
  font-weight: normal;
}
iframe {
  border: var(--border-size);
  border-style: solid;
  border-color: var(--green3);
}
textarea {
  background-color: var(--green3);
  color: var(--green6);
  
  max-height: 100px;
  max-width: max-content;
}

.logo {
  font-family: "Eastwood";
  
  text-align: center;
  font-size: clamp(24px, 10vw, 80px);
  color: var(--green4);
  -webkit-text-stroke: calc(var(--text-shadow-width) / 1) var(--green2);
  text-shadow: var(--text-shadow-width) var(--text-shadow-width) var(--text-shadow-blur) var(--green2),
               calc(-1 * var(--text-shadow-width)) var(--text-shadow-width) var(--text-shadow-blur) var(--green2),
               calc(-1 * var(--text-shadow-width)) calc(-1 * var(--text-shadow-width)) 0 var(--green2),
               var(--text-shadow-width) calc(-1 * var(--text-shadow-width)) 0 var(--green2);

}
.main {
  width: 80vw;
  margin :auto;
  
  background-color: var(--green7);
  
  border: var(--border-size);
  border-style: solid;
  border-color: var(--green3);
}
.sectionbar {
  width: 65%;
  
  border-radius: 0 var(--border-radius) var(--border-radius) 0;
  background-color: var(--green4);
  
  font-family: "Eastwood";
  font-size: 24px;
  color: var(--green7);
  text-align: center;
}
.sectionbar#right {
  border-radius: var(--border-radius) 0 0 var(--border-radius);
  margin-left: 35%;
}
.characterbar {
  width: 100%;
  margin-bottom: 5px;
  
  border-radius: var(--border-radius);
  
  font-family: "Eastwood";
  font-size: 24px;
  color: var(--green7);
  text-align: center;
}
.flex {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  align-items: flex-start;
  align-content: flex-start;
  gap: 10px;
}
.charas > div {
  min-width: 250px;
  flex-basis: 21%;
  flex-grow: 1;
  flex-shrink: 0;
}
.video {
  aspect-ratio: 16/9;
  height: 100%;
  max-height: 169px;
  width: 100%;
  max-width: 300px;
  margin: auto;
}