:root {
  --black: #300033;
  --white: #EFE4DE;
}

@font-face {
  font-family: jambo;
  src: url(https://file.garden/ZXJkOcYwORXn2d9V/fonts/DK%20Jambo.otf);
}

banner.top {
  width: calc(100% - 13px);
  height: 50px;
  border-bottom: 3px solid var(--black);
  position: absolute;
  top: 0;
  left: 0;
}

graphic.a {
  display: block;
  height: 100%;
  background: linear-gradient(180deg,rgba(247, 161, 198, 1) 19%, rgba(226, 5, 109, 1) 100%);
  border: 3px solid var(--black);
  position: relative;
    font-size: 10cqw;
    font-family: jambo;
    letter-spacing: 10px;
  border-radius: inherit;
    text-align: center;
}

graphic.a img {
  position: absolute;
  width: 65%;
  left: 50%;
  transform: translate(-50%);
  bottom: 0;
}

graphic.a img:hover {
    animation: gelatine 0.5s 1 forwards;
}

window {
  display: block;
  border: 3px solid var(--black);
  background: linear-gradient(180deg,rgba(209, 201, 205, 1) 3%, rgba(161, 153, 160, 1) 32%, rgba(145, 124, 145, 1) 89%, rgba(173, 161, 173, 1) 100%);
  padding: 10px;
  color: var(--black);
}

window.graphic {
   width: 55vw;
  margin-left: auto;
  margin-right: auto;
  aspect-ratio: 2.5 / 1.35;
  margin-top: 97px;
  border-radius: 5px;
}

.btns {
  display: inline-block;
  float: right;
  margin-top: -5px;
}

.btns button {
  text-align: center;
  display: inline-block;
  width: 23px;
  height: 23px;
  border: 1px solid var(--black);
}


@keyframes gelatine {
  from, to { transform: translate(-50%); }
  50% { transform: translate(-50%, -10px); }
  75% { transform: translate(-50%); }
}
flex {
  display: flex;
}


flex.a {
  width:70vw;
  background: red;
  margin-left: auto;
  margin-right: auto;
}

flex left, flex right {
  display: block;
}

flex.a left {
  width: calc(25% - 5px);
  margin-right: 5px;
}

flex.a right {
  width: 75%;
  position: relative;
}

window.next {
  position: absolute;
  top: -100px;
  border-radius: 5px;
  width: 100%;
}

main {
  display: block;
  width: calc(100% - 16px);
  padding: 5px;
  border: 2px solid var(--black);
  border-radius: inherit;
  background:var(--white);
}

.imgs {
  width: calc(100% - 40px);
  padding-left: 20px;
  padding-right: 20px;
  text-align: center;
  margin-bottom: 10px;
}

.imgs img {
  display: inline-block;
  width: calc(20% - 9px);
  border: 2px solid var(--black);
  border-radius: 10px;
  aspect-ratio: 1 / 1;
}

.imgs img:first-of-type {
  margin-left: 0px;
}