body,html {
  margin: auto;
  height: 100vh;
  display: flex;
  height: 100%;
  overflow: hidden;

}

html{
  background:radial-gradient(50% 100%, rgba(255, 255, 255, 0), rgba(255,255,255,0)),
    
             linear-gradient(90deg, rgba(50,100,170,.7) 1px, transparent 0),
             linear-gradient(180deg, rgba(50,100,170,.7) 1px, transparent 0),
    
             linear-gradient(90deg, rgba(50,100,170,.4) 1px, transparent 0),
             linear-gradient(180deg, rgba(50,100,170,.4) 1px, transparent 0),
    
             linear-gradient(90deg, rgba(50,100,170,1) 2px, transparent 0),
             linear-gradient(180deg, rgba(50,100,170,1) 2px, transparent 0);
  
  background-color:#0b54a3;
  
  background-size:100% 100%, 
    
                  50px 50px,
                  50px 50px,
    
                  25px 25px,
                  25px 25px,
    
                  100px 100px, 
                  100px 100px;
  
  background-attachment: local;
  
  width:100%;
  height:100%;
}


h1 {
  font: 400 3rem/1.5 'Oswald', sans-serif;
  color: white;
  text-align: center;
  font-size: 3rem;
  font-weight: 400;
  font-variant: small-caps;
}


.Effekt {
  animation: lights 15s 2s linear infinite;
}


.container {  
  width:100%;
  aspect-ratio: 16/9;
  display: grid; 
  grid-template-columns: 1fr 11fr 1fr; 
  grid-template-rows: .1fr 10% 1fr 1fr 1fr; 
  gap: 0px 0px; 
  grid-template-areas: 
   "Header Header Header"
   "A1 A2 A3 "
   "B1 B2 B3 "
   "C1 C2 C3 "
   "D1 D2 D3"; 
}

.Top { 
  grid-area: A2; 
  margin: auto;
}

.Middle{
  grid-area: B2;
  margin: auto;
}

.Lower{
  grid-area: C2;
  margin: auto;
}

.Footer{
  grid-area: D2;
  margin: auto;
}

.Refresh {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 110px;
  height: 50px;
  background-color: #0b54a3;
  border-radius: 10%;
  cursor: pointer;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease-in-out, background-color 0.3s;
  position: relative;
  border: 2px solid #fff;
}
.Refresh:hover {
  background-color:#073a70;
}
.Refresh::before {
  content:'Next';
  font-size: 30px;
  color: rgb(255, 255, 255);
  position: absolute;
}

.Logo{
  width: 400px;
  height: auto; 
}


@media screen and (min-width: 1200px) {
  .container {  
    grid-template-columns: 1fr 1000px 1fr; 
  }
}

@media screen and (max-width: 900px) {
  h1 {
    font-size: clamp(1.5rem, -1rem + 7.2vw, 3rem);
  }
  .Logo{
    width: clamp(200px, 45vw, 400px);
    height: auto;
  }
}