* {
  box-sizing: border-box;
}

body {
  /* font-family: Arial, Helvetica, sans-serif; */
}

/* Container for flexboxes */
.NIAcontainer {
    display: -webkit-flex;     /* Safari */
    display: flex;             /* Setter elementene i kontaineren fleksibelt sammen, slik at de passer sammen på forskjellige skjermformater bl.a. */
}


/* Left column; menyKlasse */
.menyKlasse {
   -webkit-flex: 1;
   -ms-flex: 1;
   flex: 1;         /* Dette er et forholdstall, og må ses sammen med "flex: 6" i den andre kolonnen (det andre delelementet) */
}

/* Right column; hovedseksjonKlasse */
.hovedseksjonKlasse {
  -webkit-flex: 6;
  -ms-flex: 6;
  flex: 6;
}

/*.fornavnbakgrunn {
    background-image: url("Bilder/FornavnJPE.jpg");
    background-size: 1000px 1000px;
}  */

.Isbakgrunn {
    background-image: url("NorskNaturIs2.jpg");
    background-size: 1500px 1500px;
}

#logo {
    background-color:#ffffff;
    color:black;
    text-align:center;
    padding:5px;
}
.menyKlasse {
    background-color:#ffffff;
    padding:15px;
   /*border: 1px solid red;*/
}
.hovedseksjonKlasse {
    padding:30px;
    /*border: 1px solid red;*/ 
}
#footer {
    background-color:white;
    color:white;
    clear:both;
    text-align:center;
   padding:5px;	 	 
}

.animNia {
   color: blue;
   font-size: 60px;
   width: 0px;
   height: 0px;
   background-color: white;
   display: inline-block;
   position: relative; 
   animation-name: nordicadm;
   animation-duration: 20s;
   animation-iteration-count: 2;  /* "infinite" er uten stans */
   animation-timing-function: ease;
   animation-direction: alternate;

}

/*@keyframes nordicadm {
  from {font-size: 10px;}
  to {font-size: 100px;}
}   */

@keyframes nordicadm {
  0%   {font-size: 9px; left:0px; top:0px; width: 0px; height: 0px; transform: rotateX(45deg) rotateY(45deg) rotateZ(45deg);}
  15%  {font-size: 22px; left:200px; top:80px; width: 0px; height: 0px; transform: rotateX(90deg) rotateY(90deg) rotateZ(90deg);}
  30%  {font-size: 35px; left:400px; top:150px; width: 0px; height: 0px; transform: rotateX(135eg) rotateY(135deg) rotateZ(135deg);}
  45%  {font-size: 48px; left:0px; top:300px; width: 0px; height: 0px; transform: rotateX(180deg) rotateY(180deg) rotateZ(180deg);}
  60%  {font-size: 61px; left:50px; top:50px; width: 0px; height: 0px; transform: rotateX(225deg) rotateY(225deg) rotateZ(225deg);}
  75%  {font-size: 74px; left:50px; top:50px; width: 0px; height: 0px; transform: rotateX(270deg) rotateY(270deg) rotateZ(270deg);}
  90%  {font-size: 87px; left:50px; top:50px; width: 0px; height: 0px; transform: rotateX(315deg) rotateY(315deg) rotateZ(315deg);}
 100%  {font-size: 100px; left:50px; top:50px; width: 0px; height: 0px; transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);}

}

 .button {
    background-color: #dddddd; lys grå         /* Farger: https://www.color-hex.com/color/dddddd */
    color: black;
    padding: 10px 10px;
    text-align: center;
    text-decoration: none;
    font-size: 12px;
    margin: 3px 2px;  /* avstand mellom knappene */
    border: 1px solid blue;
    cursor: pointer;
    border-radius: 40%;   /* graden hjørnene på knappene avrundes; medfører ellipseform */
    height: 40px;
    width: 100px;
    box-shadow: 4px 4px;
    transition: 2s     /* Dette er tiden det tar før knappene endrer stil når man setter cursor over den enkelte knapp (se hva stilen endres til nedenfor under ".button:hover" */

   /* -webkit-transition-duration: 0.4s;*/ /* Safari */
   /* transition-duration: 0.4s;  */

}
.button:hover {
    background-color: #ffffff;  /* hvit*/
    color: blue;
    border: 1px solid black;
    width: 150px;
    height: 50px;
}

/* Responsive layout - her justeres forholdet mellom hoveddelene som funksjon av skjermstørrelse; tilpasses mobiltelefon, tablets og PC-skjerm */
@media (max-width: 600px) {
  .NIAcontainer {
  }
  .menyKlasse {
   -webkit-flex: 1;
   -ms-flex: 1;
   flex: 1;
  }
  .hovedseksjonKlasse {
   -webkit-flex: 2;
   -ms-flex: 2;
   flex: 2;
  }
}