body {
    font-family: -apple-system, system-ui, BlinkMacSystemFont, Roboto, Ubuntu;;
    margin: 0px;
    padding: 0px;
}
.topnav {
  background-color: #322f8d;
  overflow: hidden;
  /*De to linjene under er lagt inn for å få nav baren til å feste seg til toppen når du scroller, lagt til av Daniel*/
  position: sticky;
  top: 0;
  z-index: 2; /* dropdown menyen foran innloggingsformen */
}

.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}


.topnav a:hover {
  background-color: #2d82f1;
  color: white;
}


.topnav a.active {
  background-color: #056cf2;
  color: white;
}


.topnav .icon {
  display: none;
}
  .form {
  position: absolute;
  width: 90%;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%); /* kommer midten av skjermen */
  z-index: 1; /* innloggingsformen bak dropdown menyen */
  background: #ddd;
  padding: 30px 25px
}
h1.login-title {
    color: #666;
    margin: 0px auto 25px;
    font-size: 25px;
    font-weight: 300;
    text-align: center;
}
.login-input {
    font-size: 15px;
    border: 1px solid #ccc;
    padding: 10px;
    margin-bottom: 25px;
    height: 25px;
    width: calc(100% - 23px);
}
.login-input:focus {
    border-color:#6e8095;
    outline: none;
}
.login-button {
    color: #fff;
    background: #273273;
    border: 0;
    outline: 0;
    width: 100%;
    height: 50px;
    font-size: 16px;
    text-align: center;
    cursor: pointer;
}
#glemtPassord{
  float: right;
}
.link {
    color: #666;
    font-size: 15px;
    text-align: center;
    margin-bottom: 0px;
}
.link a {
    color: #666;
}
h3 {
    font-weight: normal;
    text-align: center;
}
@media (min-width:600px) {
  .form {
  position: absolute;
  margin: 50px auto;
  width: 300px;
  padding: 30px 25px;
}
}
@media screen and (max-width: 600px) {
  .topnav a:not(:first-child) {display: none;}
  .topnav a.icon {
    float: right;
    display: block;
  }
}

/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
@media screen and (max-width: 600px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive a.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
}

  /*Denne siden er utviklet av Casper Bjørnstad Vestengen, sist endret 12.10.2020 */
  /*Denne siden er kontrollert av Daniel Bergmann, sist kontrollert 16.10.2020 */