:root {
  --black: #332e2c;
  --white: #f7f6f5;
  --pink: #ff5c8f;
  --pink1: #d42059;
  --green: #8ef752;
  --green1: #8cc22f;
  --yellow: #ffd875;
  --yellow1: #f7ac43;
  
  --inset: inset 0 7px 7px -5px white, inset 7px 0 7px -7px gray, inset -7px 0 7px -7px gray, inset 0 -7px 7px -7px gray;
}

@font-face {
  font-family: vet;
  src: url(https://file.garden/ZXJkOcYwORXn2d9V/stamps/veteran%20typewriter.ttf);
}

@font-face {
  font-family: chaos;
  src: url(https://file.garden/ZXJkOcYwORXn2d9V/stamps/Les%20Flos%20Chaos.otf);
}

.main {
  width: 900px;
  margin-left: auto;
  margin-right: auto;
  font-family: vet;
}

.header {
  height: 215px;
  border: 3px solid var(--black);
  position: relative;
  overflow: hidden;
  background-image: url(https://file.garden/ZXJkOcYwORXn2d9V/stamps/4d4aaa9d99ba8f8a67aaf747fe93f26c.jpg);
  background-size: 100%;
  background-position-y: 97%;
  border-radius: 20px 20px 0px 0px;
}

.frame {
  background: var(--green);
  padding: 5px;
  border-radius: 10px;
  border: 2px solid var(--black);
}

.sitename {
  font-family: chaos;
  position: absolute;
  font-size: 90px;
  left: 40px;
  color: var(--pink);
    filter: drop-shadow( 0 3px var(--black)) drop-shadow( 2px 0 var(--black)) drop-shadow( 0 -1px #ffa9c2) drop-shadow( -1px 0 var(--black)) drop-shadow( 0 5px white) drop-shadow( 5px 0 white) drop-shadow( 0 -5px white) drop-shadow( -5px 0 white) drop-shadow(1px 1px 0 rgba(172,172,172,0.6)) drop-shadow(1px 1px 0 rgba(172,172,172,0.6)) drop-shadow( 0 0 2px #424242);
  bottom: 10px;
}

.header .gumi {
  position: absolute;
  bottom: 0;
  right: 10px;
  width: 40%;
	filter: drop-shadow(2px 2px var(--white)) drop-shadow(2px -2px var(--white)) drop-shadow(-2px 2px var(--white))drop-shadow(-2px -2px var(--white)) drop-shadow(0px 0px 5px black);
}

.marquee {
  border: 3px solid var(--black);
  background: var(--white);
  border-top: none;
  padding: 5px;
  color: var(--pink1);
    --gap: 5px;
  display: flex;
  overflow: hidden;
  user-select: none;
  gap: var(--gap);
} 

.marquee__content {
  flex-shrink: 0;
  display: flex;
  justify-content: space-around;
  min-width: 100%;
  gap: var(--gap);
  animation: scroll 15s linear infinite;
}

.buttons {
  position: absolute;
  top: 5px;
  left: 50px;
  padding: 5px;
}

.buttons a {
  display: inline-block;
  width: 60px; 
  padding-top: 20px;
  text-shadow: -1px 0 var(--white), 0 1px var(--white), 1px 0 var(--white), 0 -1px var(--white), 0 0;
  padding-bottom: 20px;
  border-radius: 50%;
  border: 2px solid var(--black);
  margin-top: 0px;
  margin-right: 10px;
  position: relative;
  text-align: center;
  background: linear-gradient(180deg,rgba(255, 179, 203, 1) 0%, rgba(255, 92, 143, 1) 100%);
  box-shadow: var(--inset);
  filter: drop-shadow(2px 2px var(--white)) drop-shadow(2px -2px var(--white)) drop-shadow(-2px 2px var(--white))drop-shadow(-2px -2px var(--white)) drop-shadow(0px 0px 5px black);
  transition: 0.5s;
  font-weight: 900;
}

.buttons a:nth-of-type(even) {
  background: linear-gradient(180deg,rgba(226, 255, 179, 1) 0%, rgba(157, 222, 73, 1) 100%);
  top: 25px;

}

flex {
  display: flex;
  
}

flex left, flex middle {
  display: block;
  margin-right: 5px;
}

flex right {
  display: block;
}

flex.one {
  border: 3px solid var(--black);
  background: var(--white);
  border-top: none;
  padding: 5px;
  
}

flex left, flex right {
  width: calc(20% - 5px);
}

flex middle {
  width: 60%;
}

.buttons a:hover {
  transform: scale(1.1) translateY(10px);
}

.marquee:hover  .marquee__content {
  animation-play-state: paused;
}

@keyframes scroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(calc(-100% - var(--gap)));
  }
}

.fanlists {
  font-family: chaos;
  color: var(--yellow);
  text-shadow: -1px 0 var(--black), 0 1px var(--black), 1px 0 var(--black), 0 -1px var(--black), 0 0;
  font-size: 25px;
}

.fanlists img {
  width: 30%;
  margin: 0px;
}