@font-face {
    font-family: Leander;
    src: url(https://file.garden/ZWF5BS-4bkobrYeH/Leander.ttf);
}

body {
    background-color: brown;
    background: url("https://images.unsplash.com/photo-1541427468627-a89a96e5ca1d");
    background-size: cover;
}

.container {
    font-family: Leander;
  justify-content: center;
    width: 41vw;
    height: fit-content;
    position: absolute;
    top:0;
    bottom: 0;
    left: 0;
    right: 0;
margin: auto 19vw auto auto;
    background: url("https://file.garden/ZWF5BS-4bkobrYeH/gridful.png");
    filter: invert(1)
      background-repeat: no-repeat;
  background-size: cover;
    background-color: white;
    border-radius: 5px;
    box-shadow: 5px 5px 15px;
}

  .winbar{
    margin: 3px;
    padding: 1px;
    width: auto;
    display: block;
    height: 18px;
          border-radius: 3px;
      background: linear-gradient(90deg,rgba(193, 74, 5, 1) 0%, rgba(252, 176, 69, 1) 100%);
  }

.textful {
    margin: 10px 20px 10px 20px;
}

.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url("https://file.garden/ZWF5BS-4bkobrYeH/tree%20reverse(4).png") no-repeat;
  background-size: cover;
    background-position: right;
    pointer-events: none;
}

.arabella {
      position: absolute;
    margin-left: 100px;
    pointer-events: none;
      animation-name: float;
  animation-duration: 4s;
    animation-iteration-count: infinite; 
    animation-timing-function: ease-in-out;
}

.arabella img {
  max-width: 27vw;
}

@keyframes float { 
0% { 
transform: translate(0,  0px); 
} 

50%  { 
transform: translate(0, 15px); 
} 

100%   {
transform: translate(0, -0px); 
} 
}