@charset "UTF-8";
* {
  /* Återställa alla margin till 0 */
  margin: 0;
  /* Återställa alla padding till 0 */
  padding: 0;
  /* Inkludera padding och ramkanter i bredd och höjd. */
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

.icon {
  /* Ikonerna ska ha bredden 20px. */
  width: 20px;
  /* Ikonerna ska ha höjden 2 vh. */
  height: 2vh;
}

#logobild {
  /* Inkludera logobildkoden. */
  width: 250px;
  /* Låt breeden för logobilden ha 250 pixlar. */
  height: auto;
  /* Låt höjden för logobilden vara automatiskt. */
}

.rubrik {
  /* Låt rubrikerna ha 2 em storlek. */
  font-size: 2em;
}

#sidfoten {
  /* Låt texten ha fetstil i sidfoten. */
  font-weight: bold;
  /* Låt texten ha textstorlek: 1.5 em i sidfoten. */
  font-size: 1.5em;
}

#bornday {
  /* Flytta den till vänster 35 pixlar. */
  margin-left: 35px;
}

#bornlabel {
  /* Flytta födelsedatumlabel till vänster 20 pixlar. */
  margin-left: 20px;
}

/* Om bredden är true gör responvitet */
@media only screen and (max-width: 1140px) {
  body {
    /* Låt hela sidan ha bredden 100%. */
    width: 100%;
    /* Ta bort uttrymme från alla sidor. */
    margin: 0;
    /* Låt texten vara responsivt att ha 100% beroende på skärmens storlek */
    font-size: 100%;
  }
  .rubrik {
    /* Låt rubriken ha textstorlek: 2 em. */
    font-size: 2em;
  }
  #forgetpswbtn {
    /* Flytta knappen till vänster 40 pixlar. */
    margin-left: 40px;
  }
  #bornlabel {
    /* Flytta födelsedatumlabel till höger 10 pixlar. */
    margin-left: -10px;
  }
  img {
    /* Låt alla bilder ha bredd 100%. */
    width: 100%;
  }
  h1 {
    /* Låt alla h1 vara 100% textstorlek. */
    font-size: 100%;
  }
  #main {
    /* Visa innehållet som tabellcell. */
    display: table-cell;
    /* Låt innehållet ha bredden 1000 vw. */
    width: 1000vw;
  }
}