box-sizing: border-box;
  margin: 0;
  padding: 0;
:root {
    --background: #f1e3c9;
    --border: #660630;
}

/*      FONTS       */

@font-face {
    font-family: "Hitchcut"; 
    src: url("Hitchcut-Regular.ttf") format("truetype");
}
@font-face {
  font-family: "Hitchcut";
  src: url("https://caninebrainz.neocities.org/outlfot_kor/Hitchcut-Regular.ttf");
}

img{
    max-width: 100%;
    max-height: 100%;
    min-width: 0;
    min-height: 0;
    display: block;
}

h1, h2, h3, h4, h5, h6 {
    font-family: "Hitchcut";
}

ul {
    list-style-position: inside;
    list-style-type: "\2765   ";
    text-align: left;
}

.no-bullet {
    list-style-type: none;
}

body {
    background-image: url("asphalt.jpg");
    background-position: 15px 15px;
    font-family: 'DS-Font';
    font-size: 24px;
}

.container {
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 1em;
    margin-bottom: 1em;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5em;
}

.headerbox {
  height: 20%;
  width:100%;
  position: relative;
  text-align: center;
  display: inline-block;
  top: -20px;
}

.main {
    display: grid;
    grid-template-columns: 1fr 4fr;
    gap: 1em;   
    padding: 0em 0.5em 0em 0.5em;
}

.sidearea{
    min-width: 25%;
}
.sidebar {
  box-shadow: 2px 2px 5px #000000;
}
.gallery {
  display:flex;
  flex-flow:row wrap;
  justify-content:space-around;
  margin-top:10px;
  margin-bottom:10px;
}

.card {
  margin:5px;
  width:350px;
  height: auto;
  border-style: outset;
  border-width: 4px;
  border-color: #4CFF16;
  transition: transform .2s;
}
.card:hover {
  transform: scale(1.3);
}
.anchors {
  background-image: url("garbage.jpg");
  background-size: cover;
  ul {
    display: flex;
    flex-flow: column wrap;
    list-style-type: none;
    padding: 0;
    place-items: center;
}
}
.navbutton1 {
  width: 225px;
  height: auto;
  transition: transform 0.5s ease;
}
.mavbutton2 {
  width: 225px;
  height: auto;
  transition: transform 0.5s ease;
}
.navbutton1:hover {
  transform: rotate(5deg);
}
.navbutton2:hover {
  transform: rotate(-5deg);
}
nav ul {
    text-align: center;
}

nav ul li{
    list-style-type: none;
    text-align: center;
    padding: 0;
}

nav ul li a {
    display: block;
    border: 2px solid var(--border);
    text-decoration: none;
    color: black;
    white-space: nowrap;
    max-width: 100%;
    padding: 5px 0 5px;
    background-color: var(--border);
    color: white;
    margin: 0.5em;
}

nav ul li a:hover {
    color: pink;
    transition: 0.2s;
}

.horizontal-list {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
}

.horizontal-list > li {
    list-style: none;
}

.section-title {
    background-image: url("garbage.jpg");
    background-size: cover;
    width: 100%;
    color: #4CFF16;
    font-size: 24px;
    height: fit-content;
    text-align: center;
    padding-bottom: 5px;
}

.section-title > h2 {
    text-shadow: -2px -2px 0 #000, 
        2px -2px 0 #000, 
        -2px 2px 0 #000, 
        2px 2px 0 #000;
}

.section-content {
    height: fit-content;
    background-image: url("cardboard.jpg");
    background-size: cover;
}

.content {
    min-width: 75%;
}

.explore-area {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 1em;
    justify-content: center;
    align-items: center;
}

.explore-list {
    text-align: justify;
}

.explore-title {
    margin-left: 0.5em;
    margin-right: 0.5em;
}

.explore-area > * {
    max-width: 30%;
    max-height: 30%;
}

.explore-back {
    font-size: 24px;
    font-family: 'DS-Font';
}

.explore-back > a{
    color: white;
}

#updatebox {
    max-height: 500px;
    overflow-y: scroll;
    padding: 0.5em;
}

.marquee {
 height: 30px;	
 overflow: hidden;
 position: relative;
 background: black;
 color: white;
 margin-bottom: 10px;
 margin-top:10px;
 border: 1px black;
}
.marquee p {
 position: absolute;
 width: 100%;
 height: 100%;
 margin: 0;
 line-height: 30px;
 text-align: center;
 /* Starting position */
 transform:translateX(100%);
 /* Apply animation to this element */
 animation: scroll-left 15s linear infinite;
}
/* Move it (define the animation) */
@keyframes scroll-left {
 0%   {
 transform: translateX(100%); 		
 }
 100% {
 transform: translateX(-100%); 
 }
}

.flex-row {
    display: flex;
    flex-direction: row;
}

.flex-column {
    display: flex;
    flex-direction: column;
}

.flex-center {
    justify-content: center;
    align-items: center;
}

.flex-bottom-align {
    align-items: flex-end;
}

.flex-wrap {
    flex-wrap: wrap;
}

.flex-item-equal {
    flex: 1 1 0px;
}

.simple-gap {
    gap: 1em;
}

.half-gap {
    gap: 0.5em;
}

.simple-padding {
    padding: 1em;
}

.half-padding {
    padding: 0.5em;
}

.center-text {
    text-align: center;
}

  @media screen and (max-width: 1000px) {
    .main {
        grid-template-columns: 1fr;
    }

    .explore-area {
        flex-direction: column;
    }

    .explore-area > * {
        max-width: 95%;
        max-height: 95%;
    }
}