body{
    background-color: blue;
}

.BGSide1{
    background-image: url(BjornBGnr3.gif);
    
    background-size:cover;
    background-repeat: no-repeat;
}

a{
    border-radius: 3em;
    padding: 1.1em 0.9em;
    background-color: white;
    text-decoration: none;
    color: black;
    font-size: 1.44rem;

}


.button3{
    font-size: 30em;
    
}

.btn-tilbake {
    position: absolute;
    top: 5%;
    left: 3%;
}

.btn-center1{
    position: absolute;
    bottom: 29%;
    left: 30%;
    transform: translateX(-50%) ;
}

.btn-center2{
    position: absolute;
    left: 66%;
    bottom: 29%;
}

p{
    position: absolute;
    bottom: 60%;
    width: 100%;
    text-align: center;
    color: black;
    font-size: 1.44rem;
}

.btn-center3{
    position: absolute;
    left: 89%;
    bottom: 29%;
}



h1{
    position: absolute;
    bottom: 30%;
    width: 100%;
    text-align: center;
    color: white;  
}

.lærer{
    color: red;
    font-size: 1.5rem;
    width: 40%;
    padding: 1.1em 0.9em ;
    background-color: white;
    border-radius: 1em;
    bottom: 60%;
    left: 30%;

}


.bjorn{
    background-image: url(Bjorn_skriver_og_er_trott_laptop_flere.png);
    
    background-size:cover;
    background-repeat: no-repeat;
}

#kristoffer{
    font-size: 1.44rem;
    width: 40%;
    padding: 1.0em 0.5em;
    background-color: white;
    border-radius: 1em;
    bottom: 70%;
    left: 30%;
}

.Skolehall{
    background-image: url(kanin_siste_forsok_3.png);
    background-size: cover;
    background-repeat: no-repeat;
}

.PI{
    bottom: 75%;
    position: absolute;
    width: 40%;
    left: 25%;

    padding: 1.1em 0.9em;
    background-color: white;
    border-radius: 1em;
}

.PI2{
    position: absolute;
    bottom: 45%;
    color: white;
    font-size: 1.3rem;
    left: -13%;
}

.btn-info{
    position: absolute;
    bottom: 0%;
    left: 1%;
    text-decoration: dotted; 
    
    border-radius: -2%;
    padding: 4%;
    background-color: white;
    text-decoration: none;
    color: black;
    font-size: 1,4rem;
}

.Info-mid{
    bottom: 40%;
    position: absolute;
    width: 40%;
    left: 30%;

    border-radius: 2em;
    padding: 1.1em 0.9em;
    background-color: white;
    text-decoration: none;
    color: black;
    font-size: 1.44rem;
}

.Color-Info{
    background-color: burlywood;
}



.Bamse-rekker{
    background-image: url(Bamse_rekker_opp_hand.png);
    background-size: cover;
    background-repeat: no-repeat;
}

.PI3{
    bottom: 75%;
    position: absolute;
    width: 40%;
    left: 30%;

    border-radius: 1em;
    padding: 1.1em 0.9em;
    background-color: white;
    text-decoration: none;
    color: black;
    font-size: 1.44rem;


}

.skole{
    background-image: url(Skole_skolehallway.png);
    background-size: cover;
    background-repeat: no-repeat;  
}

.Bjorn-bak{
    position: absolute;
    left: 30%;
    top: 55%;
    width: 20%;
}

.Skole-bak{
    background-image: url(skole_gang3.png);
    background-size: cover;
    background-repeat: no-repeat;   
}

.snap{
    width: 40%;
    left: 30%;

    padding: 1.0em 0.1em;
    background-color: white;
    border-radius: 1em;
    font-size: 1,5rem;
}

.Midten{
    bottom: 70%;
    position: absolute;
    width: 40%;
    left: 30%;

    border-radius: 1.0em;
    padding: 1.0em 0.5em;
    background-color: white;
    text-decoration: none;
    color: black;
    font-size: 1.44rem;
}

.h1-farge{
    color: black;
    left: 30%;
    bottom: 67%;

    border-radius: 1em;
    padding: 1.1em 0.9em;
    background-color: white;
    text-decoration: none;
    color: black;
    font-size: 1.43em;
    font-weight: bold;
    width: 40%;
}

.Utgang{
    background-image: url(skole_hall4.png);
    background-size: cover;
    background-repeat: no-repeat; 
}

.Teacher{
    position: absolute;
    left: 30%;
    top: 55%;
    width: 11%; 
}

.Bjorn-bak{
    position: absolute;
    left: 41%;
    top: 55%;
    width: 20%;
}

.Du_vinner{
    background-image: url(Skole_hall_45.png);
    background-size: cover;
    background-repeat: no-repeat;   
}

.Snakkeboble{
    width: 40%;
    left: 30%;

    padding: 1.1em 0.9em;
    background-color: white;
    border-radius: 1.5em;
    font-size: 150%;
}

.mot-slutt1{
    background-image: url(Skole_hall46.png);
    background-size: cover;
    background-repeat: no-repeat;    
}

.side8-tekst{
    width: 40%;
    left: 30%;

    padding: 1.1em 0.9em;
    background-color: white;
    border-radius: 1.5em;
    font-size: 140%;
}

.Gjem-side9{
    background-image: url(skolehall_49.png);
    background-size: cover;
    background-repeat: no-repeat;    
}

.side9-tekst{
    width: 40%;
    left: 30%;

    padding: 1.1em 0.9em;
    background-color: white;
    border-radius: 1.5em;
    font-size: 140%;
}

.Thomas{
    position: absolute;
    left: 55%;
    top: 66%;
    width: 7%; 
}

.Lukket{
    background-image: url(skap_lukket.png);
    background-size: cover;
    background-repeat: no-repeat;

    padding: 1.1em 0.9em;
    background-color: white;
    border-radius: 30px;
    

}

.Apen{
    background-image: url(skap_apen.png);
    background-size: cover;
    background-repeat: no-repeat;   

    padding: 1.1em 0.9em;
    background-color: white;
    border-radius: 1.5em;
}

#Minknapp{
    padding: 1.1em 0.9em;
    font-size: 1.37rem;
    color: black;
    border-radius: 1em;
    position: absolute;
    top: 25%;
    left: 5%;

}

#Tapt{
  display: none;
  position: absolute;
  top: 70%;
  left: 45%;
  transform: translate(-50%, -50%);
  width: 10%;
}

.Fri{
    background-image: url(vindu_bra.jpg);
    background-size: cover;
    background-repeat: no-repeat;   
}

.Bjorn-baks{
    position: absolute;
    left: 45%;
    top: 55%;
    width: 20%;
}

.side9h{
    width: 40%;
    left: 30%;

    padding: 1.1em 0.9em;
    background-color: white;
    border-radius: 1.5em;
    font-size: 150%;
    bottom: 68%;
}

.bjorn-front{
    position: absolute;
    left: 38%;
    top: 70%;
    width: 13%;
}

.Avslutning2{
    background-image: url(gul_hus.png);
    background-size: cover;
    background-repeat: no-repeat;   
}

.side10h{
    width: 40%;
    left: 30%;

    padding: 1.1em 0.9em;
    background-color: white;
    border-radius: 1.5em;
    font-size: 150%;
    bottom: 50%;
}

.side11-tekst{
    width: 40%;
    left: 30%;

    padding: 1.1em 0.9em;
    background-color: white;
    border-radius: 1.5em;
    font-size: 150%;  
}

.btn-center4{
    position: absolute;
    bottom: 80%;
    left: 10%;
    transform: translateX(-50%);
}

.side12-bak{
    background-image: url(ved_utgang.png);
    background-size: cover;
    background-repeat: no-repeat;   
}

.side12-tekst{
    width: 15%;
    left: calc(29% + 55px);

    padding:1.1em 0.9em;
    background-color: white;
    border-radius: 1.5em;
    font-size: 150%;
    width: 15%; 
    bottom: 260px; 
}

.bjorn-side12{
    position: absolute;
    left: calc(33% + 150px);
    top: 60%;
    width: 19%;
    
}

.side-13-bakgrunn{
    background-image: url(utsiden_av_skole.png);
    background-size: cover;
    background-repeat: no-repeat;   
}

.bamse-front{
    position: absolute;
    left: 30%;
    top: 70%;
    width: 10%;
}

.side_13tekst{
    width: 15%;
    left: 45%;

    padding: 1.1em 0.9em;
    background-color: white;
    border-radius: 1.5em;
    font-size: 150%;
    width: 20%; 
    bottom: 50%; 
}

@media (max-width: 768px){
    .container{
        flex-direction: column
    }
}