.behind-box {
   width: 25vw;
  height: 70vh;

  background-color: transparent;
 
  position: fixed;
  align-self: flex-start;
      
      top: 90px;
      left: 20px;
     
      z-index: 30;
  padding: 10px;
 
}

.navigation-bar{
  
  width: 24vw;
  height: 10vh;
  border: solid  black 2px;
  border-radius: 5px;
 background-size: 90%;
  background-image: url('images/243966757972ea1f6a0ffcb3ce4e44ef~2.jpg');
  box-shadow: inset -1px -1px var(--window-frame), inset 1px 1px var(--button-face), inset -2px -2px var(--button-shadow), inset 2px 2px var(--button-highlight);
  
}

.navigation 
{
  font-family: 'sakemoru';
  color: #D68D22;
  text-align: center;
  font-size: 180%;
  text-shadow:
  -1px -1px 0 #000,  
   1px -1px 0 #000,
  -1px  1px 0 #000,
   1px  1px 0 #000;
  ;
  animation-name: floating;
 animation-duration: 3s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
}

@keyframes floating {
0% { transform: translate(0, 0px); }
50% { transform: translate(0, 15px); }
100% { transform: translate(0, -0px); }
}

.desktop-background
{ 
  width: 23vw;
  height: 40vh;
  border: 3px solid black;
  border-radius: 5px; 
  
  background-image: url('images/mimimi.jpeg');
  background-image: cover;
  background-size: 100%;
  image-rendering: pixelated;
  
  box-shadow: inset -1px -1px var(--window-frame), inset 1px 1px var(--button-face), inset -2px -2px var(--button-shadow), inset 2px 2px var(--button-highlight);
  overflow: scroll;
  
  position: fixed;
      
      top: 200px;
      left: 25px;
     
      z-index: 30;
  padding: 10px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  
  align-items: center;
  gap: 20px;
}