:root{
    --primary: salmon ;
    --secondary:black;
}

body,p,a,ul,li{
    margin: 0;
    padding: 0;
    text-decoration: none;

}

li {
    list-style-type: none;
}

html{
    overflow-x: hidden;
}
/* base styles */
body{
    background: var(--secondary);
    overflow-x: hidden;
    font-family: 'Ariel'; /* ARIEL ELLER ARIAL? */
}

.button{
    background: none;
    border: 2px solid var(--primary);
    color: var(--primary);
    padding: 6px 12px;
    border-radius: 20px;
    text-transform: uppercase;
    box-shadow: seashell;
    display: inline-block;
}


/* fonts */

@font-face {
    font-family: 'Rubik Regular';
    src: url('./assets/fonts/Rubik-Regular.ttf');
}


/*  font for alle headers */

h1{
font-size: medium;
color: snow;

}

h2 ,h3, h4{
    color:sienna;
    font-weight: normal;
    font-size: medium ;
    text-align: center;
}

/* skrift til elementene*/
p,a,li{
    color: white;
}

h1,h3{
    font-size: 1.2em;
}

h2{
    font-size: 1.6em;
}

b{
  color: sienna;
  font-size: 1.1em;
  margin-left: 10%;
  text-align: left;
}

h4{
    font-size: 1.1em;
}

.leading{
    font-size: 1.1em;
}


/* mobile-first  */
.grid{
    display: grid;
    grid-template-columns: repeat(8, 1fr);/*for å holde bilder 2 og 2 sammen*/
    gap: 10px;/*mellomrom mellom bildene*/
}

.site-nav{
    margin: 0 20px;
}

.nav-links{
    /* display: none; */
    position: fixed;
    right: 0px;
    height: 100vh;
    background-color: var(--primary);
    /*display: grid;*/
    /*grid-template-rows: repeat(12, 1fr);*/
    text-align:center;
    width: 100%;
    /* move container off the screen as a start position */
    transform: translateX(100%);
    transition: transform 0.5s ease-in-out;
}

.nav-active{
    transform: translateX(0%);
}

.nav-links li{
    opacity: 0;
    overflow: hidden;
}

.nav-links li:nth-child(1){
    grid-row: 3/4;
}

.nav-links li:nth-child(2){
    grid-row: 4/5;
}

.nav-links li:nth-child(3){
    grid-row: 5/6;
}

.nav-links li:nth-child(4){
	grid-row: 6/7;
}


.nav-links li:nth-child(5){
    grid-row: 7/8
 }


.nav-links li a{
    color: black;
    font-size: 1.8em;
    padding: 20px;
}

.nav-links li a:hover{
    cursor: pointer;
    color: gray;
}


.site-nav h1{
    grid-column: 1/4;
    grid-row: 1;
    padding-bottom: 10px;
    border-bottom: 3px solid var(--primary);
    z-index: 2;
}

.htmls {
        width: auto;
        margin: 40px 40px;
        border: 1px solid salmon;
        box-shadow: 1px 1px 25px seashell;
        border-radius:20px;
        }

#registrer
{
  margin-left: 40%;
}

.box{
    width:40px;
    height:20px;
    background: #FAFAFA;
    padding: 20px;
    margin: auto;
    box-shadow: 1px 1px 25px rgba(241, 194, 194, 0.12);
    border-radius:10px;
    border: 2px solid sienna;
  }

  .details {
  background:seashell;
  color:sienna;
  margin: 40px;
  padding: 30px;
  box-shadow: 1px 1px 25px rgba(241, 194, 194, 0.12);
  border-radius: 10px;
  border: 1px solid #305A72;
  }


#fieldsetR {
    margin: auto;

    }

.box1{
    width: auto;
    margin: auto;
    height: 40px;
    box-shadow: 1px 1px 25px rgba(241, 194, 194, 0.12);
    border-radius:10px;
    border: 2px solid sienna;
    }

  .field {
      min-height: 30px;
      float: left;
    border-color:seashell ;
    border-radius:10px;
      width: 100%;
    }
    .submit {
    background-color: seashell;
    color:sienna;
    border:2;
    border-color:3px solid seashell;
    border-radius: 10px;
    width: 40%;
    margin: 25px 25px;

  }


#Kandidater{
    padding: 1px 20px;
    background: rgb(247, 229, 206);
}

#Kandidater h3{
    text-align: center;
}

#Kandidater ul{
    margin: 40px 10px;
}

#Kandidater li{
    padding: 10px;
    background: rgba(0,0,0, 0.2);
    grid-column: span 4;
    text-align: center;
}

#Kandidater img{
    height: 90px;
    margin: 10px auto;
}


footer{
    padding: 30px 20px;
    background-color:black;
    background-size: 40%;
    background-repeat: no-repeat;
    background-position: top center;

}


/*
.fixedPosition{
    position: fixed;
}
*/ /*   HVA GJØR DENNE? INGENTING ENDRET SEG */
.burger{
    grid-column: 8/9;
    z-index: 2;
    justify-self: end;

}

.burger:hover{
    cursor: pointer;
}

.burger .line1{
    width: 28px;
    height: 3px;
    background-color: white;
    margin-top: 23px;
    border-radius: 3px;

    /*  animasjon funksjon */
    transition: all 0.5s ease-in-out;
}

.burger .line2{
    width: 28px;
    height: 3px;
    background-color: white;
    margin-top: 5px;
    border-radius: 3px;

    /*  animasjon funksjon */
    transition: all 0.5s ease-in-out;
}

.burger .line3{
    width: 28px;
    height: 3px;
    background-color: white;
    margin-top: 5px;
    border-radius: 3px;

    /*  animasjonsfunksjon for hamburger */
    transition: all 0.5s ease-in-out;
}

/*  animasjonsfunksjon for hamburger*/
    .is-active .line2{
        opacity: 0;
    }

    .is-active .line1{
        width: 35px !important;
        transform: translateX(3px) translateY(10px) rotate(45deg);
    }

    .is-active .line3{
        width: 35px !important;
        transform: translateX(2px) translateY(-6px) rotate(-45deg);

    }
/* slutt på animasjonsfunksjon for hamburger */

@keyframes navLinkFade{
    from{
        opacity: 0;
        transform: translateX(50px);
    }
    to{
        opacity: 1;
        transform: translateX(0px);
    }
}

/* liten tablet  */
@media screen and (min-width: 620px){


    .footer{
        background-size: 20%;
    }


}


/*  tablets & laptops */
@media screen and (min-width: 960px){
    body{
        font-size: 18px;
    }

/*   HVA ER POENGET MED DENNE?
    .grid{
        width: 100%;
        max-width: 1060px; //desktop first?
        margin: 0 auto;
        box-sizing: border-box;
    }*/



    .site-nav{
        padding: 0 20px;
    }

    .site-nav h1{
        grid-column: 1/3;
    }

    .burger{
        all: unset;
        display: none;
    }

    .nav-links{

        all: unset;
        display: flex;
        font-size: 0.5em;
        grid-column: 6/9;
        justify-content: flex-end;
        align-self: center;
    }

    .nav-links li{
        all: unset;
    }

    .nav-links a{
        all: unset;
        color:  white !important;
    }


    footer{
        padding: 20px 10px;
        background-size: 25%;
    }

}

/*  desktop  */
@media screen and (min-width: 1200px){
    body{
        font-size: 20px;
    }

      footer {
        padding: 10px 0;
        background-size: 10%;

    }
  }