/*Forhåndslaster hover-bilder*/
body::after{
    position:absolute; width:0; height:0; overflow:hidden; z-index:-1; /*skjuler bildene*/
    content:
    url(../bilder/logginn.svg); /*Laster bilder*/ 
 }

@media only screen and (max-width: 320px) {
    body{
        background: rgb(163,225,176);
        background: linear-gradient(90deg, rgba(163,225,176,1) 0%, rgba(163,176,225,1) 35%, rgba(225,212,163,1) 100%);
        padding-top: 4%;
        margin: auto;
    }

    section{
        height:100%;
        width:100%;
        margin: 0 auto;
    }
    
    input, button{
        display: block;
        height:60px;
        width:80%;
        margin: auto;    
    }
    
    #feilmelding{
        color: 	red;
        margin:auto;
        font-family: 'Dosis';
        text-transform: uppercase;
        font-size:large;
        font-weight: 900;
        padding-top:10px;
     }
     
     #feil{
        width:15%;
        margin-right: 10px;
        vertical-align: text-bottom;
     }
     
     #tilbakemeldingsboks{
        display: block;
        width: 50%;
        margin:auto;
        text-align: center;
     }
    
    #logginnknapp{
        display: block;
        margin:auto;
        width:80%;
        height:60px;
        font-size: large;
        font-weight: bolder;
        color:#758ad6;
        background-color: #E1D4A3;
        border:0;
        cursor: pointer;
        border-radius: 10px;
        background-image: url('../bilder/logginn_svart.svg');
        background-size: 10%;
        background-repeat: no-repeat;
        background-position:  2%;
        box-shadow: 0 4px 8px 0 rgb(0 0 0 / 20%), 0 6px 20px 0 rgb(0 0 0 / 19%);
     }
    
     #logginnknapp:hover{
        background-color:	#A3E1B0;
        background-image: url('../bilder/logginn.svg');
        background-size: 10%;
        background-repeat: no-repeat;
        background-position:  2%;
     }
    
     #passordfelt{
        background: rgb(163,225,176);
        background: linear-gradient(90deg, rgba(163,225,176,1) 0%, rgba(225,212,163,1) 100%);
        border:0;
        font-size: large;
        font-weight: bolder;
        border-radius: 10px;
        padding: 25px;
        box-shadow: 0 4px 8px 0 rgb(0 0 0 / 20%), 0 6px 20px 0 rgb(0 0 0 / 19%);
      
     }
    
     #bilde{
        display: block;
        margin-left: auto;
        margin-right: auto;
        width: 25%; 
        height:5%;
        margin-bottom:0px;
     }
    
     #overskrift{
        font-size:15px;  
        font-family: 'Architects Daughter';
        text-align: center; 
        font-weight: 600;
        letter-spacing: 3px;
     }

}

@media only screen and (min-width: 321px) and (max-width: 600px) {
    body{
        background: rgb(163,225,176);
        background: linear-gradient(90deg, rgba(163,225,176,1) 0%, rgba(163,176,225,1) 35%, rgba(225,212,163,1) 100%);
        padding-top: 4%;
        margin: auto;
    }

    section{
        height:relative;
        width:100%;
        margin: auto;
    }
    
    input, button{
        display: block;
        height:60px;
        width:80%;
        margin: auto;    
    }
    
    
    #feilmelding{
        color: 	red;
        margin:auto;
        font-family: 'Dosis';
        text-transform: uppercase;
        font-size:large;
        font-weight: 900;
        padding-top:10px;
    }
  
    #feil{
        width:15%;
        margin-right: 10px;
        vertical-align: text-bottom;
     }
  
    #tilbakemeldingsboks{
        display: block;
        width: 50%;
        margin:auto;
        text-align: center;
    }
    
    #logginnknapp{
        display: block;
        margin:auto;
        width:80%;
        height:60px;
        font-size: large;
        font-weight: bolder;
        color:#758ad6;
        background-color: #E1D4A3;
        border:0;
        cursor: pointer;
        border-radius: 10px;
        background-image: url('../bilder/logginn_svart.svg');
        background-size: 10%;
        background-repeat: no-repeat;
        background-position:  2%;
        box-shadow: 0 4px 8px 0 rgb(0 0 0 / 20%), 0 6px 20px 0 rgb(0 0 0 / 19%);
     }
    
     #logginnknapp:hover{
        background-color:	#A3E1B0;
        background-image: url('../bilder/logginn.svg');
        background-size: 10%;
        background-repeat: no-repeat;
        background-position:  2%;
     }
    
     #passordfelt{
        background: rgb(163,225,176);
        background: linear-gradient(90deg, rgba(163,225,176,1) 0%, rgba(225,212,163,1) 100%);
        border:0;
        font-size: large;
        font-weight: bolder;
        border-radius: 10px;
        padding: 25px;
        box-shadow: 0 4px 8px 0 rgb(0 0 0 / 20%), 0 6px 20px 0 rgb(0 0 0 / 19%);
      
     }
    
     #bilde{
        display: block;
        margin-left: auto;
        margin-right: auto;
        width: 25%; 
        height:10%;
     }
    
     #overskrift{
        font-family: 'Architects Daughter';
        text-align: center;
        font-size: 90%;
        letter-spacing: 7px;
        font-weight: 600;    
     }


}

@media only screen and (min-width: 601px) and (max-width: 1024px){
    body{
        background: rgb(163,225,176);
        background: linear-gradient(90deg, rgba(163,225,176,1) 0%, rgba(163,176,225,1) 35%, rgba(225,212,163,1) 100%);
        padding-top: 4%;
        margin: auto;
    }
    
    section{
        height:relative;
        width:100%;
        margin: auto;
    }
    
    input, button{
        display: block;
        height:60px;
        width:65%;
        margin: auto;    
    }
    
    
    #feilmelding{
        color: 	red;
        margin:auto;
        font-family: 'Dosis';
        text-transform: uppercase;
        font-size:large;
        font-weight: 900;
        padding-top:10px;
     }
    
  
    #feil{
        width:10%;
        margin-right: 10px;
        vertical-align: text-bottom;
     }
  
    #tilbakemeldingsboks{
        display: block;
        width: 50%;
        margin:auto;
        text-align: center;
    }
    
    #logginnknapp{
        display: block;
        margin:auto;
        width:65%;
        height:60px;
        font-size: large;
        font-weight: bolder;
        color:#758ad6;
        background-color: #E1D4A3;
        border:0;
        cursor: pointer;
        border-radius: 10px;
        background-image: url('../bilder/logginn_svart.svg');
        background-size: 10%;
        background-repeat: no-repeat;
        background-position:  2%;
        box-shadow: 0 4px 8px 0 rgb(0 0 0 / 20%), 0 6px 20px 0 rgb(0 0 0 / 19%);
     }
    
     #logginnknapp:hover{
        background-color:	#A3E1B0;
        background-image: url('../bilder/logginn.svg');
        background-size: 10%;
        background-repeat: no-repeat;
        background-position:  2%;
     }
    
     #passordfelt{
        background: rgb(163,225,176);
        background: linear-gradient(90deg, rgba(163,225,176,1) 0%, rgba(225,212,163,1) 100%);
        border:0;
        font-size: large;
        font-weight: bolder;
        border-radius: 10px;
        padding: 25px;
        box-shadow: 0 4px 8px 0 rgb(0 0 0 / 20%), 0 6px 20px 0 rgb(0 0 0 / 19%);
      
     }
    
     #bilde{
        display: block;
        margin-left: auto;
        margin-right: auto;
        width: 25%; 
        height:25%;
     }
    
     #overskrift{
        font-family: 'Architects Daughter';
        text-align: center;
        font-size: 200%;
        letter-spacing: 15px;
        font-weight: 700;    
     }
    

}

@media only screen and (min-width: 1025px){
    body{
        background: rgb(163,225,176);
        background: linear-gradient(90deg, rgba(163,225,176,1) 0%, rgba(163,176,225,1) 35%, rgba(225,212,163,1) 100%);
        padding-top: 4%;
        margin: auto;
    }
    
    section{
        height:relative;
        width:100%;
        margin: auto;
    }
    
    input, button{
        display: block;
        height:60px;
        width:25%;
        margin: auto;    
    }
    
    
    #feilmelding{
        color: 	red;
        margin:auto;
        font-family: 'Dosis';
        text-transform: uppercase;
        font-size:large;
        font-weight: 900;
        padding-top:10px;
    }
      
      #feil{
        width:8%;
        margin-right: 10px;
        vertical-align: text-bottom;
     }
  
    #tilbakemeldingsboks{
        display: block;
        width: 50%;
        margin:auto;
        text-align: center;
    }
    
    #logginnknapp{
        display: block;
        margin:auto;
        width:25%;
        height:60px;
        font-size: large;
        font-weight: bolder;
        color:#758ad6;
        background-color: #E1D4A3;
        border:0;
        cursor: pointer;
        border-radius: 10px;
        background-image: url('../bilder/logginn_svart.svg');
        background-size: 10%;
        background-repeat: no-repeat;
        background-position:  2%;
        box-shadow: 0 4px 8px 0 rgb(0 0 0 / 20%), 0 6px 20px 0 rgb(0 0 0 / 19%);
     }
    
     #logginnknapp:hover{
        background-color:	#A3E1B0;
        background-image: url('../bilder/logginn.svg');
        background-size: 10%;
        background-repeat: no-repeat;
        background-position:  2%;
     }
    
     #passordfelt{
        background: rgb(163,225,176);
        background: linear-gradient(90deg, rgba(163,225,176,1) 0%, rgba(225,212,163,1) 100%);
        border:0;
        font-size: large;
        font-weight: bolder;
        border-radius: 10px;
        padding: 25px;
        box-shadow: 0 4px 8px 0 rgb(0 0 0 / 20%), 0 6px 20px 0 rgb(0 0 0 / 19%);
      
     }
    
     #bilde{
        display: block;
        margin-left: auto;
        margin-right: auto;
        width: 25%; 
        height:25%;
     }
    
     #overskrift{
        font-family: 'Architects Daughter';
        text-align: center;
        font-size: 200%;
        letter-spacing: 15px;
        font-weight: 700;    
     }
    
}

