/* --- CSS reset --- */
* {
  margin: 0;
  padding: 0;
  text-decoration: none;
  box-sizing: border-box;
}

body {
  background-color: #010123;
}

img {
  border-radius: 50px;
  height: 2em;
  width: 2em;
  object-fit: cover;
  object-position: 0 15%;
}

h1 {
  color: #fff6ee;
  font-family: Great Vibes;
  font-weight: 100;
  font-size: 40pt;
  margin: 12% 0 2%;
  text-align: center;
}

h2 {
  color: #fff6ee;
  font-family: Montserrat;
  font-size: 11pt;
  font-weight: 300;
  padding-left: 4%;
  max-width: 20em;
  margin: 5% 0;
  line-height: 150%;
}

h3 {
  color: #15191e;
  font-family: Great Vibes;
  font-size: 20pt;
  font-weight: 500;
  text-align: center;
}

p {
  color: #15191e;
  font-family: Montserrat;
  text-align: center;
  margin: 0%;
  font-size: 11pt;
}

#p_name {
  color: #fff6ee;
  font-size: small;
  margin-top: 5em;
  margin-bottom: 3em;
  letter-spacing: 1.5px;
}

.intro_container {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 5%;
}

table {
  font-family: Montserrat;
  font-size: 10pt;
  line-height: 150%;
  border-collapse: collapse;
  width: 100%;
  color: #000;
}

td,
th {
  border: 1px solid #15191e;
  text-align: left;
  padding: 1.5em 8px;
  vertical-align: top;
}

.table_container {
  padding: 2em 0.5em 3em;
  border-radius: 25px;
  margin: 3% 5%;
}

.jan {
  background-color: #b8c0c5;
  border: 3px solid #717679;
}

.feb {
  background-color: #9db4bf;
  border: 3px solid #4f8398;
}

.mar {
  background-color: #bbc6a8;
  border: 3px solid #62704a;
}

.maal {
  background-color: #c3a5c1;
  border: 3px solid #8f6e8d;
}

.maal_container {
  padding: 2em 7em 1em;
}

ol li::marker {
  font-weight: bold;
}

li {
  padding: 0.5em;
  font-family: Montserrat;
  font-size: 11pt;
}

.date_w {
  width: 15%;
  text-align: center;
  font-weight: 700;
}

.spo_w {
  width: 40%;
  text-align: center;
  font-weight: 700;
}

.ref_w {
  width: 45%;
  text-align: center;
  font-weight: 700;
}

#curtain {
  height: 100vh;
  width: 100%;
  background-color: #0f0f5c;
  position: fixed;
  z-index: 10;
  top: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 12%;
}

.h2_curtain {
  padding: 0;
  font-size: 18px;
  margin-top: 8%;
}

#btn_fortsaet {
  height: 40px;
  background-color: #b4c29d;
  border-radius: 20px;
  padding-left: 24px;
  padding-right: 24px;
  display: flex;
  align-items: center;
  margin-top: 12%;
}

#btn_fortsaet:hover {
  opacity: 85%;
}

#input_curtain {
  height: 2em;
  width: 15em;
  font-size: 14px;
  text-align: center;
}

a {
  color: #15191e;
  font-family: Montserrat;
  font-size: 16px;
  font-weight: 400;
}

.toggle_btn {
  transform: rotate(90deg);
  height: 100%;
  width: 16px;
  margin-left: 1em;
}

.toggle_btn:hover {
  width: 20px;
  transition: ease 0.5s;
}

.toggle_btn:active {
  width: 12px;
}

.week_toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 3% 0 2%;
}

.toggle_table {
  display: none;
}

/* --- Styling tablet og pc --- */
@media screen and (min-width: 768px) {
  img {
    border-radius: 50px;
    height: 3.5em;
    width: 3.5em;
    object-fit: cover;
    object-position: 0 15%;
  }

  h1 {
    margin: 5% 0 2%;
  }

  h2 {
    padding-left: 2%;
    max-width: 35em;
    margin: 2% 0;
    line-height: 180%;
  }

  h3 {
    font-size: 28pt;
  }

  p {
    margin: 0;
    font-size: 12pt;
  }

  table {
    font-size: 11pt;
  }

  .table_container {
    padding: 2em 2em 3em;
    margin: 1.5% 3%;
  }

  #curtain {
    padding-top: 8%;
  }

  .h2_curtain {
    padding: 0;
    font-size: 18px;
    margin-top: 0;
  }

  #btn_fortsaet {
    margin-top: 3%;
  }
}