/* Här har jag valt ett snirkligt typsnitt som används i sidhuvudet */
@font-face {
    font-family: 'Minecraft';
    src: url(fonts/minecraft-ten-font/MinecraftTen-VGORe.ttf);
}

/* Anger textstorlek till 100% samt väljer en bakgrundsbild på sidan som är en strand-bild för att följa temat */
html {
    font-size: 100%;
} 

/* I body ställer jag in bakgrundsbild/färg */
body{
    /* Väljer en bakgrundsbild som ger en härlig strandkänsla, bakgrundsfärgen är plockad från bilden och syns där bilden inte täcker */
    background: aquamarine url("images/wallpaperflare.com_wallpaper.jpg") no-repeat fixed top;
    background-size: 100% auto;     /* Tar upp 100% på bredden */
}

/* Sidhuvudet */
header {
    font: 5rem/7rem 'Minecraft', cursive;
    text-align: center;                 /* Centrerar texten */
    
    color: white;                     /* Textfärgen ska vara vit, det blir tydligt mot den blå bakgrunden. */

    border-TOP: 6px solid #1f436b;
    /* Luft */
    margin-top: 3rem;
    padding-top: 2rem;
}

/* Texten på stycken gör så att alla rader blir lika breda , väljer storlek, textjustering och luft */
p {
    font-size: 1rem;           
    text-align: left; 
    padding: 0.5rem 0;
}

h4 {
    text-align: left;
    font-size: 1.1rem;
    color: blue;
}

/* Det som är gemensamt för mina rubriknivåer 2 och 3*/
h2, h3 {
    text-align: center;
    margin: 1rem 0; /* Lite extra avstånd ovan och nedan rubrikerna */
}

/* Jag vill förtydliga rubriken med ett streck under rubriken och så centrerar jag h2-rubrikerna och lägger till luft */
h2 {
    padding-bottom: 0.8rem; /* Lite mer avstånd mellan text och ram */
    font-size: 1.7rem;      /* Bestämmer storlek på rubrik 2 */
    border-bottom: 1px solid #1f436b; /* Vill ha en ram under rubrik 2 */
}

/* Bestämmer storlek på rubrik 3 */
h3 {
    font-size: 1.4rem;      
}

/* Ställer in listor att inte visa någon symbol */
ul {
    font-size: 1rem;        
    margin: 0;
    list-style:inside;
    text-align: left;
}

/* För att få till min meny så använder jag flexbox för listan i nav, detta blir min container */
nav ul { 
    display: flex;
    flex-direction: row;                /* Läggs i en rad */
    justify-content: center;            /* Centrerar items */
    background-color: #1f436b;        /* Gör en lite mörkare blå färg för menyraden */
}

/* Detta är mina flex items */
nav ul li { 
    padding: 1rem;  /* Lägger på lite luft så menyraden inte ska vara så tunn */
    width: auto;
}

/* Jag behöver styla meny-länkarna lite, sätter färg, tar bort understryckning */
nav ul li a {
    color: #ffffff;
    background-color: #1f436b;
    text-decoration: none;
    padding: 1rem;
}

/* Ändrar förg på länk som man hovrar över med musen */
nav ul li a:hover {
    color: #3C74B5;

}

/* Här lägger jag luft till höger och vänster om innehållet i ett section element */
section {
    padding: 1rem;
    text-align: center;             /* Centrerar bilderna */
    border: 1px solid #1f436b;    /* En tunn blå ram */ 
    margin: 1rem;
    background-color: #fff;
}


/* Varje artickle ligger i en egen vit ruta där den blå bakgrundsfärgen ska synas runt den */ 
article {
    padding: inherit;
    background-color: white;
    border: 1px solid #1f436b;    /* En tunn blå ram */ 
    margin: 1rem 0;                 /* Lägger lite luft ovanför och under elementet */ 
}

/* Ser till så att tabellens text är vänsterjusterad och att tabellen ligger i mitten på sidan */
table {
    font-size: 1rem;        
    text-align: left;
    margin: auto;
    /* Vill ha en ram ovan och under tabellen */
    border-bottom: 1px solid #1f436b;
    border-top: 1px solid #1f436b;

}

/* Lägger till en lite tjockare ram under tabellrubriken */
th {
    border-bottom: 2px solid #1f436b;

}

td {
    padding: 0 1rem;
}

/* När varannan rad i tabellen är en lite annan färg blir den lättare att läsa */ 
tr:nth-child(even) {
    background-color: rgba(176, 196, 222, 0.7);
}

code {
    font-family: monospace;
    font-weight: 600;
    color: green;
}

.info {
    text-align: center;
    padding: 1rem 0.8rem;

}

span {
    text-align: center;
    padding: 0.4rem 0.8rem;
    font-weight: 600;
    color: blue;
    background-color: rgba(176, 196, 222, 0.7);
    border: 1px dotted #1f436b;
    
}

/* Stylar länkar i texten */
a {
    color: #8a2be2;
    text-decoration: none;
}

/* Visar understreck när man hovrar över, och tabbar till länk */
a:hover, a:focus {
    text-decoration: underline;
}

/* Lägger en ram runt bilderna */
img {
    border: 1px solid #1f436b;    
    max-width: 100%;
    height: auto;
}

#icon {
    border: 0;    
    max-width: 100%;
    height: auto;
}

/* Sätter vit färg på texten i aside-elementet eftersom bakgrundsfärgen är blå */
aside {
    color: white;
}

/* Fixar text och rubrik i aside-elementet */ 
aside p, aside h2 {
    text-align: center;
    border: 0;    
    padding: 0; 
}
li h3 {
    font-size: 1.2rem;
    text-align: left;
}



/* Fixar till formuläret, vill att det ska ligga centrerat */
form {
    padding: 1rem;
    margin: 1rem auto;
    max-width: 400px; /* Som bredast ska det vara 400px */
        
}

form ul {
    background-color: #1f436b;
    border: 4px double #3C74B5;
    padding: 1rem;
}
 
/* Lägger formuläret som en flexbox för att få lite raka linjer i det */ 
form ul li {
    padding: 0.2rem; /* Lite luft */
}

label {
    /* Läggs inline, alltså på samma rad, men behåll block-egenskaperna så vi kan ställa in bredd */
    display: inline-block;  
    width: 6rem;
}

/* Gör ett extra indrag för ul som ligger i en ul li i formuläret ... */
form ul li ul {
    margin-left: 2rem;  
    border: 0;  
}

/* Jag vill styra föräldraelementet för knappen då jag vill högerjustera den */ 
form ul li:last-child {
    text-align: right;
}

/* Men då måste jag vänsterjustera sista elementet så att inte sista radioknappen blir högerjusterad */
form ul li ul li:last-child {
    text-align: left;
}

/* Jag provade skriva ovan på följande sätt men då gick inte valideringen igenom
li:has(input[type="Submit"])
{
    text-align: right;
}
*/

/* Här kommer stilen för footern, färgen matchar menyraden.*/
footer {
    padding: 1rem;
    background-color: #1f436b;
    text-align: center;
    color: white;
}

/* Länkar i footern blev lite för svårläst pga bakgrundsfärgen så ändrar färgen till den sandfärgade istället */
footer a {
    color: #c5aba7;
}

/* Här är behållaren där allt innehåll sedan ligger */
#container {    
    font-family: Arial, Helvetica, sans-serif;
    max-width: 980px;                 /* Största bredden sidan ska få så den inte blir alltförför bred */
    color: #1f436b;                 /* Ställer in grundfärgen för text, blå som vatten :)   */
    background-color: #3C74B5;      /* Ställer in grundfärgen för bakgrunden för innehållet */
    margin: auto;                     /* Centrerar sidan på skärmen */
    line-height: 1.3rem;
}

/* Stylar section-elementet med id='products' som ska göras lite annorlunda */
#products {
    border: 0;
    background-color: #3C74B5;    
    padding: 0 1rem;
    margin: 0;
}

/* Här använder jag en media-regel så att när man har ett mindre fönster än 600px så hamnar menyn som en kolumn */ 
@media only screen and (max-width: 600px) {
    nav ul { /* flex container */
        flex-direction: column;
        align-items: center;
    }

    /* Provar också att fixa tabellen enligt föreläsningen */

    /* Elementen ska hanteras som block-element o */
    table, th, td, tr {
        display: block;
    }

    /* Så att tabellrubrilkerna inte ska synas */
    th {
        position: absolute;
        top: -9999px;
        left: -9999px;
    }

    /* Varje cell, lämna plats till vänster för rubriker */
    td {
        border: none;
        border-bottom: 1px solid #1f436b;
        position: relative;
        padding-left: 50%;
    }

    /* Här skapar vi platsen till vänster */
    td:before {
        position:absolute;
        left: 1px;
        width: 45%;
        padding-right: 10px;
        white-space: nowrap;
    }

    /* Sen lägger vi in rubrikerna för varje cell på före platsen*/
    td:nth-of-type(1):before { content: "Kommando"; }
    td:nth-of-type(2):before { content: "Beskrivning"; }
    td:nth-of-type(3):before { content: "Description"; }



  }