/* @keyframes animatedBackground {
  0% {
    background-position: 30% 30%;
  }
  100% {
    background-position: 70% 70%;
  }
}

  @keyframes gradientShift {
  0%   { opacity: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 25% 50%; }
} */

.background{

  background: radial-gradient(circle, transparent 20%, #fff3ea 20%, #fff3ea 80%, transparent 80%, transparent), radial-gradient(circle, transparent 20%, #fff3ea 20%, #fff3ea 80%, transparent 80%, transparent) 20px 20px, linear-gradient(#000000 1.6px, transparent 1.6px) 0 -0.8px, linear-gradient(90deg, #000000 1.6px, #fff3ea 1.6px) -0.8px 0;
  background-size: 40px 40px, 40px 40px, 20px 20px, 20px 20px;
  /* animation: animatedBackground 5s linear infinite; */
}

.buttonjump{
  transition: transform 0.3s ease;
}

.button-link:hover{
  transform: scale(1.1);
  transition: transform 0.3s ease;
  rotate: -5deg;
  border: 1px solid white;
}

.background{
  position: fixed;
  inset: 0;
  z-index:-1;

  background: radial-gradient(circle, transparent 20%, #fff3ea 20%, #fff3ea 80%, transparent 80%, transparent), radial-gradient(circle, transparent 20%, #fff3ea 20%, #fff3ea 80%, transparent 80%, transparent) 20px 20px, linear-gradient(#000000 1.6px, transparent 1.6px) 0 -0.8px, linear-gradient(90deg, #000000 1.6px, #fff3ea 1.6px) -0.8px 0;
  background-size: 40px 40px, 40px 40px, 20px 20px, 20px 20px;

}

body{

  z-index:0;
  font-family: Roboto, sans-serif;
}

#container {
  width: 900px;
  height: 98vh;
  background-color: transparent;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  box-shadow: 0 0 15px rgb(0, 0, 0);
}


#header {
  height: 120px;
  background-color: white;
  text-align: center;

  border-radius: 10px;
}

#banner {
  position: relative;
  top: 0%;
  left: 55%;
  width: 250px;
  height: 475px;
  z-index: 1;
  filter: drop-shadow(0px 5px 1px );

    /* filter: drop-shadow(1px 0 0 rgb(255, 255, 255)) 
            drop-shadow(-1px 0 0 rgb(255, 255, 255)) 
            drop-shadow(0 1px 0 rgb(255, 255, 255)) 
            drop-shadow(0 -1px 0 rgb(255, 255, 255)); */

}


#middle {
  flex: 1;
  display: flex;
  overflow: hidden;
}

.Navi{
  background-color: black;
  color: white;
  padding: 10px 25px;
  display: inline-block;
  margin-top: 5px;
  width: 75%;
  border-radius: 8px;
  border: none;
  text-align: center;
  text-decoration: underline;
  font-weight: bold;
}

#sidebar {
  width: 200px;
  background: white;
  padding: 10px;
  color: black;
  border: 1px solid black;
  border-radius: 10px;

}

.Box1 {
    display: flex;
    padding: 10px 100px;
    border-style: double;
    text-align: center;
    background-color: black;
    color: white
    
}

.button-link {
  background-color: black;
  color: white;
  padding: 10px 25px;
  text-decoration: none;
  display: inline-block;
  margin-top: 5px;
  width: 75%;
  border-radius: 8px;
  cursor: pointer;
  border: none;
  text-align: center;
}

#content {
  flex: 1;
  background: white;
  padding: 15px;
  overflow-y: auto;
  color: black;
  border: 1px solid black;
  border-radius: 10px;
}


#footer {
  height: 30px;
  background: black;
  text-align: center;
  line-height: 0px;
  color: white;
  border-radius: 5px;
}