@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Public+Sans:ital,wght@0,100..900;1,100..900&display=swap');

:root {
    --lysebla: #66BDED;
    --morkebla: #0240D0;
    --lyserod: #EB92E5;
    --sort: #000;
    --overskrift: "Bebas Neue", sans-serif;
    --brodtekst: "Public Sans", serif;
    --vaegt: 200;
}

body {
    margin: 0px;
}

/*-----------------------------------Header og top navigation med burgermenu--------------------------------------*/
header {
    font-family: var(--overskrift);
}

/* Add a black background color to the top navigation */
.topnav {
    background-color: var(--lysebla);
    overflow: hidden;

  }

  
  /* Style the links inside the navigation bar */
  .topnav a {
    float: left;
    display: block;
    margin-right: 5%;
    color: var(--sort);
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 40px;
  }

  .links {
    margin-top: 70px;
  }
  
  /* Hide the link that should open and close the topnav on small screens */
  .topnav .icon {
    display: none;
  }


  /*Styling af footer*/
.footer {
  background-color: var(--lysebla);
  display: flex;
  justify-content: space-evenly;
  flex-wrap: wrap;
  margin: auto;
  width: 100%;
  padding-top: 30px;
  padding-bottom: 30px;
}

.footercontent {
  width: 30%;
}

.footer h5, .footer p {
  font-family: var(--brodtekst);
  font-weight: var(--vaegt);
  font-size: 18px;
}

.footer h5 {
  margin-bottom: 0px;
  font-weight: 600;
}

.footer p {
  margin-top: 0px;
}

.content2 {
  text-align: center;
}

#folgOs {
  padding-top: 30px;
}

#folgOs div {
  display: flex;
  flex-direction: row;
  justify-content: center;
}

footer img {
  width: 90%;
}

footer a {
  width: 25%;
}

#sendInd h3 {
  font-family: var(--overskrift);
  font-size: 30px;
  font-weight: 100;
  margin-top: 0px;
  margin-bottom: 4%;
}


form {
  background-color: var(--lyserod);
  border: 2px solid var(--morkebla);
  padding: 2%;
  padding-top: 10%;
  padding-bottom: 10%;
  width: 85%;
  margin: auto;
}

#mobil {
  display: none;
}


/*media regel for at fikse et problem der kom med lidt mindre skærme, pga den margin.right der er defineret tidligere*/
  @media screen and (max-width: 890px) {
    .topnav a {
        margin-right: 0%;
    }
    
  }



  /* When the screen is less than 600 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */
@media screen and (max-width: 700px) {
    .topnav a:not(:first-child) {display: none;}
    .topnav a.icon {
      float: right;
      display: block;
      background-color: var(--lysebla);
    }

    .links {
        margin-top: 0px;
    }

   
  }
  
  /* 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: 700px) {
    /*Styling af navigation/burgermenu */
    .topnav.responsive {position: relative;}
    .topnav.responsive a.icon {
      position: absolute;
      right: 0;
      top: 0;
    }
    .topnav.responsive a {
      float: none;
      display: block;
      text-align: left;
    }

    /*Styling af footer*/
    .footercontent {
      width: 90%;
      margin-bottom: 10px;
    }

    #sendInd h3 {
      margin-bottom: 0px;
    }

    #mobil {
      display: inline;
    }

    #pc {
      display: none;
    }

    form {
      padding-top: 10%;
      padding-bottom: 17%;
    }

    input {
      width: 70%;
      margin-top: 10px;
      padding: 20px;
    }

    
  }