/* Generelle stilarter */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Quicksand', sans-serif;
  }
  
  body {
    background-color: #F8F5E2; /* Beige */
    color: #F8F5E2;
  }
  
  /* Farver fra forside.css */
  :root {
    --primary-color: #F8F5E2; /* Beige */
    --secondary-color: #7D9A6C; /* Mørkegrøn */
    --tertiary-color: #F9F6E8; /* Lysere beige */
    --accent-color1: #769DC0; /* Himmel blå */
    --accent-color2: #FCF0BC; /* Smør gul */
    --text-color: #3C3D36; /* Mørkegrå */
    --btn-color: #fff; /* Hvid */
  }

  /* Typografi */

  h1 {
    font-family: 'Lora', serif;
    font-size: 46px;
    font-weight: 700;
    line-height: 60px;
    margin-bottom: 0.5rem;
    color: #3C3D36;

  }

  h2 {
    font-family: 'Quicksand', sans-serif;
    font-size: 22px;
    font-weight: 700;
    line-height: 35px;
    color: #3C3D36;
  }

  h3 {
    font-family: 'Quicksand', sans-serif;
    font-size: 18px;
    font-weight: 700;
    line-height: 35px;
    color: #3C3D36;
  }

   h4 {
    font-family: 'Quicksand', sans-serif;
    font-size: 16px;
    font-weight: 700;
    line-height: 35px;
    color: #3C3D36;
  }

  p {
    font-family: 'Quicksand', sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 30px;
    color: #3C3D36;
  }

  /* Buttons */

  buttons, .btn-blue {
  background-color: var(--accent-color1); /* #769DC0 */
  color: var(--btn-color); /* #fff */
  font-family: 'Quicksand', sans-serif;
  font-size: 16px;
  font-weight: 600;  
  width: 130px;
  text-align: center;

  border: none;
  border-radius: 20px;
  padding: 12px 24px;
  cursor: pointer;
  
  text-decoration: none;
  display: inline-block;
  margin: 2rem 0rem;
  transition: background-color 0.3s ease;
}


.btn-light {
  background-color: var(--btn-color); /* #fff */
  color: var(--text-color); /* #3C3D36 */
  font-family: 'Quicksand', sans-serif;
  font-size: 16px;
  font-weight: 600;
  width: 130px;
  text-align: center;
  
  border: none;
  border-radius: 20px;
  padding: 12px 24px;
  cursor: pointer;
  
  text-decoration: none;
  display: inline-block;
  margin: 2rem 0rem;
  transition: background-color 0.3s ease;
}

.btn-no-fill {
  color: var(--btn-color); /* #fff */
  background-color: transparent; /* Ingen baggrundsfarve */
  font-family: 'Quicksand', sans-serif;
  font-size: 16px;
  font-weight: 600;
  width: 130px;
  text-align: center;
  
  border: 2px solid var(--btn-color); /* #fff */
  /* Ingen fyldfarve */
  border-radius: 20px;
  padding: 12px 24px;
  cursor: pointer;
  
  text-decoration: none;
  display: inline-block;
  margin: 2rem 0rem;
  transition: background-color 0.3s ease;
}

.btn-no-fill1 {
  color: var(--text-color); 
  background-color: transparent; /* Ingen baggrundsfarve */
  font-family: 'Quicksand', sans-serif;
  font-size: 16px;
  font-weight: 400;
  width: 64px;
  text-align: left;
  
  border: 1px solid var(--text-color); 
  /* Ingen fyldfarve */
  padding: 12px;
  cursor: pointer;
  
  text-decoration: none;
  display: inline-block;
  transition: background-color 0.3s ease;
}

 .btn-blue-long {
  background-color: var(--accent-color1); /* #769DC0 */
  color: var(--btn-color); /* #fff */
  font-family: 'Quicksand', sans-serif;
  font-size: 16px;
  font-weight: 600;  
  width: 300px;
  text-align: center;

  border: none;
  border-radius: 20px;
  padding: 8px 20px;
  cursor: pointer;
  
  text-decoration: none;
  display: inline-block;
  margin: 2rem 0rem;
  transition: background-color 0.3s ease;
}

 .btn-blue-long1 {
  background-color: var(--accent-color1); /* #769DC0 */
  color: var(--btn-color); /* #fff */
  font-family: 'Quicksand', sans-serif;
  font-size: 16px;
  font-weight: 600;  
  width: 500px;
  text-align: center;

  border: none;
  border-radius: 20px;
  padding: 8px 20px;
  cursor: pointer;
  
  text-decoration: none;
  display: inline-block;
  margin-top: 2rem;
  transition: background-color 0.3s ease;
}

#btn-long {
  background-color: transparent;
  color: var(--text-color); 
  font-family: 'Quicksand', sans-serif;
  font-size: 16px;
  font-weight: 600;  
  width: 500px;
  text-align: center;

  border: 1px solid var(--text-color); /* #3C3D36 */
  border-radius: 20px;
  padding: 8px 20px;
  cursor: pointer;
  
  text-decoration: none;
  display: inline-block;
  transition: background-color 0.3s ease;
}


.btn-no-stroke {
  background-color: transparent; /* Ingen baggrundsfarve */
  border: none; /* Ingen kant */
  color: var(--text-color); /* #3C3D36 */
  font-family: 'Quicksand', sans-serif;
  font-size: 16px;
  font-weight: 700;  
  width: 300px;
  text-align: left;
  cursor: pointer;
  
  word-wrap: break-word; /* Gør at teksten kan brydes */
  text-decoration: none;
  display: inline-flex;
  margin: 2rem 0rem;
  transition: background-color 0.3s ease;
}

.buttons:hover, .btn-blue:hover, .btn-light:hover, .btn-blue-long:hover, .btn-blue-long1:hover {
  background-color: var(--accent-color2); /* #F9F6E8 */
  color: var(--text-color); /* #3C3D36 */
}

.btn-no-fill:hover, #btn-long:hover {
  background-color: var(--btn-color); /* #fff */
  color: var(--text-color); /* #3C3D36 */
}