body {
    background-color: whitesmoke;
}

.center {
    margin-top: 10vh;
    text-align: center;
}

h1 {
    text-align: center;
}

h6 {
    text-align: center;
}

/* ----> KNAPPAR FÖR ATT NAVIGERA MELLAN DE OLIKA SIDORNA I UPPGIFTEN <----- */

.knappar {
    display: flex;                  /* tillåter diven att "flexa" dvs anpassa sig utifrån skärmstorlek osv med placering av element i diven vertikalt/horisontellt */
    flex-wrap: wrap;                /* knapparna ska kunna hamna på flera rader om det behövs */
    text-align: center;             /* texten centreras */
    width: 70vw;                    /* bestämd bredd på diven */
    height: 10vh;                   /* besämd höjd på diven */
    margin: auto;                   /* placering mitt på sidan horisontellt - marginaler automatiskt */
}

.knapp {
    flex-direction: row;			/* att allt ska placeras intill  varandra på rad */
    flex: 10%;                      /* varje knapp tar 10% av sidans bredd */
    width: 15%;
    height: 50px;
    background-color: peachpuff;
    margin: 0.5vw;
    align-content: center;          /* placerar texten mitt i vertikalt */
    border-style: solid;
    border-radius: 10%;
}

.knapp a {
    color: blue;
    font-weight: bold;
}

/* -----> ----------------------------------------------------------- <----- */

/* Responsivt - på mindre enhet - knapparna hamnar under varandra, tar större plats */
@media (max-width: 800px) {
    .knappar .knapp {
      flex: 100%;
    }
}

/* -----> ----------------------------------------------------------- <----- */

.run {
    background-color: green;      /* grön bakgrund på knappen */
    width: 20vw;                    /* bestämd storlek */
    height: 7vh;                    /* bestämd höjd för texten ska få plats i knappen */
    font-size: 2vw;                 /* textstorlek */
    color: white;                 /* textfärg */
    border-radius: 3vw;             /* rundade hörn på knappen */
    margin-top: 3vh;                /* utrymme mot texten ovanför knappen */
}

input {
    width: 25vw;
    padding: 12px 20px;
    margin: 8px 0;
    box-sizing: border-box;
    border: none;
    border-bottom: 3px solid black;         /* gör så att texten man skriver hamnar på en rad */
  }

  input:focus {
    background-color: lightblue;            /* när textrutan är vald blir den extra framträdande genom att ändra färg */
  }

  #rutaOrd {                                   /* när man ska skriva en mening ska rutan vara större för att rymma fler ord */
    width: 40%;
    padding: 12px 20px;
    margin: 8px 0;
    box-sizing: border-box;
    border: none;                               
    border-bottom: 3px solid black;         /* gör så att texten man skriver hamnar på en rad */
  }

/* ----------   FÖR UPPGIFT MED SLUMPADE TAL   ---------- */
#utskriftJS {   /* här styr jag utseendet på rutan som JS kommer att skriva ut talen i */
    background-color: lightyellow;            /* bakgrundsfärg på hela rutan */
    width: 50vw;                                /* rutan tar upp 50% av skärmen */
    margin: auto;                               /* rutan centreras på skärmen */
    margin-top: 7vh;                            /* litet mellanrum ovanför rutan mot texten */
    font-size: 2vw;                             /* textens storlek */
    padding: 3vw 3vw 3vw 3vw;                   /* "packning" runt, 3 viewport-width runt hela rutan för att få färgen utanför texten */
    border-radius: 3vw;                         /* rundning av hörnen på rutan */
}
/* ---------- ---------- ---------- ---------- ---------- */

/* ----------   FÖR UPPGIFT MED JS-VALIDERING TAL   ---------- */

.textVilkor {
    font-size: 1.2vw;
    width: 30%;
}

input[type=submit] {
    background-color: green;      /* grön bakgrund på knappen */
    font-size: 1.3vw;                 /* textstorlek */
    color: white;                 /* textfärg */
    border-radius: 3vw;
    margin-top: 1vh;
}

input[type=checkbox] {              /* ändra på kryssrutan i formulär */ 
    transform: scale(2);            /* skalar upp kryssrutan med x2 */
}

#checkVilkor:checked {
    background-color: green;      /* gör checkboxen grön vid "ikryssad" */
    font-size: 1.3vw;               /* textstorlek */
}

#rutaFelmeddelanden {
    color: white;
    font-weight: bold;
    background-color: red;
    width: 30vw;
    margin: auto;
    text-align: center;
    padding: 2vw;
    margin-top: 5vh;
    display: none;
}

/* ------------ ---------------------- ---------- ------------ */