/* I'm including the || marks, to make it easy to ctrl+f and jump between the headers */
/* Organising tips from: https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Organizing */

/* || General styles ---------------------------------------------------------------------------------------------------------- */

/*
Fonts:
H1: Inter regular: 48pt
H2: Inter regular: 36pt
text: Inter regular: 24pt
Nav-bar: Inter regular: 24pt
Caption-text: Inter regular: 20pt
Default fonts: sans family

Color scheme:
Text: #032C36
Background: #FCF7F4
Buttons: #E6921C
Logo: #0996B4

Body-width: 100%
Nav-bar: 150 px
Footer: 200 px
Images: 100%
Logo: 60 x 60 px in the upper left corner
*/

* {
  /* For å fjerne default html margin/padding på elementer */
  margin: 0;
  padding: 0;
}

/* Tekstfarge, bakgrunnsfarge på sidene, fontfamilie og tykkelse */


body {
  width: 100%;
  margin: auto;
  color: #032c36;
  background-color: #fcf7f4;
  font-family: 'Inter', Arial, Helvetica, sans-serif;
  font-weight: normal;
  margin-bottom: 5rem;
  /* for at burgermenyen er gjemt og ikke scroller fram fra siden når den er stor*/
  overflow-x: hidden;
}

.content{
  position: relative;
  width: 70%;
  height: auto;
  margin-left: auto;
  margin-right: auto;
  margin-top: 5rem;
}

ol{
  margin-inline-start: 2.2rem;
}

li{
  margin-bottom: 0.4rem;
}

/* css til menyen på toppen av siden  */
/* inspirert fra eksempel nr 6 her: https://alvarotrigo.com/blog/javascript-menus/ */

#nav{
  /* making the nav-bar stick to the top when you scroll */
  position: sticky;
  position: -webkit-sticky; /* for safari */
  top: 0;
  z-index: 100;

  background: #FCF7F4;
  display: flex;
  justify-content:space-around;
  align-items: center;
  color: #032c36;
  margin-top: 1.5rem;
  margin-bottom: 0;
  padding: 1rem 0rem;
}

#navLinks {
  display: flex;
  justify-content:space-around;
  width: 80%;
  text-transform: uppercase;
}

#navLinks a{
  display: block;
  text-transform: uppercase;
  text-decoration: none;
  color: #032c36;
  border-bottom:2px solid transparent;
  transition:0.5s ease;
  transform: translateX(0%);
}

#navLinks a:hover, .active{
  color:#0996B4;
  letter-spacing: 5px;
}


.burger{
  display: none;
}
.burger div{
  width: 25px;
  height: 3px;
  background: #032c36;
  margin: 5px;
  transition:all 0.5s ease;
}

@media only screen and (max-width: 760px){
  #nav{
   justify-content: space-between;
   padding: 0 5vw;
 }
 #navLinks{
   position: absolute;
   right: 0;
   top:8vh;
   min-height:92vh;
   background: #FCF7F4;
   display: flex;
   flex-direction: column;
   align-items: center;   
   width: 50%;
   margin: 0;
   padding: 0;
   transform: translateX(100%);
   transition:All 0.5s ease-in;
 }
 #navLinks a{
  font-weight: bold;
   opacity: 0;

 }
 .burger{
   display: block;
 }

}
@media only screen and (max-width: 640px){
 #nav{
   justify-content: space-between;
   padding: 0 5vw;
 }
}
.nav-active{
 transform: translateX(0);
}
@media only screen and (max-width: 460px){
  #navLinks{
   width: 100%;
   transition:All 0.5s ease;
 }
}
.nav-active{
 transform: translateX(0);
}

@keyframes navLinkFade{
 from{
   opacity: 0;
   transform: translateX(0px);
 }
 to{
   opacity: 1;
   transform: translateX(5%);
 }
}
.toggle .line1{
  transform: rotate(-45deg) translate(-5px,6px );
}
.toggle .line2{
  opacity: 0;
}
.toggle .line3{
  transform: rotate(45deg) translate(-5px,-6px );
}

/* || Typography ------------------------------------------------------------------------------------------------------------------ */

/* Fontstørrelser, responsive. */
/* clamp function for responsive font sizes. https://stackoverflow.com/a/62808509 https://developer.mozilla.org/en-US/docs/Web/CSS/clamp  */

/* PX to REM converter: https://nekocalc.com/px-to-rem-converter */
/* PX to VW converter, 1512 viewport width: https://web-development.space/tools/px-to-vw/  */

h1 {
  /* Burde h1 være de store orange bokstavene "bak" siden? Ja det er jo det viktigste*/
  font-family: 'Inter', Arial, Helvetica, sans-serif;
  font-weight: 900;
  color: #E6921C;
  opacity: 15%;
  position: fixed;

  /* clamp function for responsive font sizes. https://stackoverflow.com/a/62808509 https://developer.mozilla.org/en-US/docs/Web/CSS/clamp  */
  font-size: clamp(6rem, 23.8vw, 20.1rem); /* 250px on a normal large pc screen */

  /* Makes the h1 able to float independently of other things, as well as stay in place despite scrolling. */
  padding: 0;
  /* Positions the h1 on the page. Not exactly correct atm. */
  margin-top: 75px;
  line-height: 1em;
  margin-left: 8vw;
}

h2 {
  font-size: clamp(1.95rem, 3.5rem, 4rem); /*32px 48px 64px   3.175vw */
}

h3 {
  font-size: clamp(1.25rem, 2.5rem, 3.5rem); /*20px 36px 52px*/
}

h4, 
legend {
  font-size: 1.6rem; /* 26px */
  font-weight: 600;
}

h5, 
button, 
#submit {
  font-size: clamp(1rem, 1.2rem, 2rem); /*16px 20px 32px*/
  font-weight: 500;

}

p {
  font-size: clamp(0.625rem, 1rem, 1.25rem); /*10px 16px 20px*/
}

.box p:last-of-type {
  font-size: 1.5rem;
}

input, 
select {
  color: #032c36;
  font-family: 'Inter', Arial, Helvetica, sans-serif;
  font-weight: normal;
}

ul {
  /* Had to set the margin to 0, because the default top margin was 1em, which pushed the whole body down 1em. */
  margin: 0;
}

/* Klasse vi kan sette på navbaren */
.navbarText {
  font-size: clamp(1rem, 1.5rem, 2rem); /*16px ~24px 32px*/
}

/* Standard design for knappene våre */
button, 
#submit {
  font-family: 'Inter', Arial, Helvetica, sans-serif;
  display: inline-block;
  background-color: #FCF7F4;
  border: 2px solid #032c36; 
  border-radius: 30px;
  /* With two values, you set the value for top&bottom and left&right. */
  padding: 12px 30px;
  text-align: center;
  box-shadow: 3px 3px 8px 0px rgba(0, 0, 0, 0.15);
}



button:hover, 
#submit:hover {
  background-color: #E6921C;
  border: 2px solid #E6921C;
}

.links:link, 
p a:link {
  color: #E6921C;
}
.links:visited, 
p a:visited {
  color: #0996B4;
}
.links:hover, 
p a:hover {
  color:#05596c;
}
.links:active, 
p a:active {
  color:#d17a00;
}


/* || For different screens ---------------------------------------------------------------------------------------------------- */

/* Default CSS layout for narrow screens, som gjelder for alle sidene. Sikkert lurt å legge dette til på */

@media screen and (min-width: 0px) and (max-width: 799px) {
  h2 {
    font-size: 2rem; 
  }
  
  h3 {
    font-size: 1.7rem;
  }
  
  h4, 
  legend {
    font-size: 1.1rem;
  }
  .box p:last-of-type {
    font-size: 1.3rem;
  }
}

@media screen and (min-width: 800px) and (max-width: 1299px) {
  h2 {
    font-size: 3rem; 
  }
  
  h3 {
    font-size: 2.2rem;
  }
  
  h4, 
  legend {
    font-size: 1.4rem;
  }
}



/* || Header and Main Navigation -------------------------------------------------------------------------------------------------- */

/* || SITEWIDE - CSS for ting som skal plasseres på alle sidene */


/* Form CSS */
input, 
select, 
textarea, 
.subButton, 
#outputF,
#chooseFiles {

  padding: 10px;
  border-radius:20px;
  border: 0.1px;
  background-color: #FFFFFF;
  box-shadow: 3px 3px 8px 0px rgba(0, 0, 0, 0.15); /* horizontal, vertical, blur, spread, colour */
  margin-top: 10px;
  margin-bottom: 40px;
}

#textbox{
 
  padding: 10px;
  border-radius: 20px;
  margin-top: 10px;
  box-shadow: 3px 3px 8px 0px rgba(0, 0, 0, 0.15);
  font-family: 'Inter', Arial, Helvetica, sans-serif;
  font-weight: normal;
}

input:focus, 
#textbox:focus {
    outline: 1px solid #E6921C;
}