html{
    width: 100%;
    height: 100%;
}
body {
    width: 100%;
    height: 100%;
    
    background-image: url('BBB.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    margin:0px;
    padding:0px;
}
#wrapper {
    width: 100%;
    height: 100%;
    display:grid;
    grid-template-columns: 18% 20% 2% 20% 2% 20% 18%;
    grid-template-rows: 10% 10% 10% 10% 20% 20% 20%;
}
#bild{
    width: 30%;
    grid-row: 2/6;
    grid-column: 3/6;
}
.loggor{
    width: 30%;
    border-radius: 50%;
}

#knapp1{
grid-row: 3;
grid-column: 2;
display: flex;
align-items: center;
}
#knapp2{
grid-row: 3;
grid-column: 4;
display: flex;
align-items: center;
}
#knapp3{
grid-row: 3;
grid-column: 6;
display: flex;
align-items: center;
}

.knappar{
height: 60%;
width: 100%;

}
h2 {

letter-spacing: 1px;
font-size: 47px;
justify-self: center;
grid-row: 1;
grid-column: 1/8;
color: #cdccd17d;
}

a {
  all: unset;
}


.knappar {
  position: relative;
  font-size: 17px;
  
  color: #fffefee7;

  background: rgba(18, 18, 53, 0.08);
  backdrop-filter: blur(1px) saturate(90%);
  
  border: 1px solid rgba(18, 18, 53, 0.08);
  border-radius: 15px;
  box-shadow:
    0 0 20px rgba(165, 155, 192, 0.584),
    inset 0 0 18px rgba(255, 255, 255, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.4);
  text-shadow: 0 0 10px rgba(63, 63, 75, 0.9);
}