/* ALLMÄNT */
/* tilldelar till alla taggar på en gång för att inte behöva upprepa samma kod.
Gill Sans är nog lättare att läsa så jag tar den. Byter fo headern och footern*/
* {
    box-sizing: border-box;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    /* font-family: 'Courier New', Courier, monospace; */
}


/* STORA CONTAINER-ELEMENTEN BODY, ASIDE och DIV.INNERBODY */

/* horisontell flex-display för att mittenpartiet och aside-elementen ska kunna växa dynamiskt 
   och göras centrerad*/
body {
    width: 100%;
    margin: 0;
    padding-left: 20px;
    padding-right: 20px;
    background-color: lightslategrey;
    display: flex;
    justify-content: center;
}


/* Repeterar bilden med ljus-blåa rutan vertikalt som bakgrundsbild (film-strip-design)
   Med functionen cover visas hela bilden och jag repeterar den i y-led.
   Sätter även passande max- och min-bredd.*/
aside {
    flex: 1;
    background-color: rgb(0, 0, 0);
    max-width: 200px;
    min-width: 40px;
    background-image: url("filmruta.png");
    background-repeat: repeat-y;
    background-size: contain;

}


/* med flex=5 blir bredden 5ggr större än aside-bredden där flex=1, 
så länge gränsvärdena inte är nådda. */
div.innerBody {
    max-width: 600px;
    min-width: 200px;
    flex: 5;
}



/* Sätter passande bredd-gränser, marginaler och padding. 
flex-wrap gör så att diven med knappen i footer kan byta rad när skärmen är liten */
.divFilmRuta {
    max-width: 600px;
    min-width: 150px;
    border-style: solid;
    border-color: black;

    border-width: 20px;

    padding-bottom: 50px;
    padding-top: 30px;
    padding-left: 25px;
    padding-right: 25px;

    flex-wrap: wrap;
}


/* har även klassen flexRow i html
skriver över tidigare angiven bakgrundsfärg som är mindre specifik selektor*/
header.divFilmRuta {
    /* background-color: rgb(182, 158, 97); */
    /* background-color: rgb(76, 67, 45); */
    /* background-color: rgb(88, 66, 52); */
    /* background-color: rgb(77, 66, 28); */
    background-color: rgb(93, 80, 34);
}

/* har även klassen flexColumn i html*/
nav.divFilmRuta {
    /* background-color:rgb(94, 82, 73); */
    background-color: rgb(65, 61, 43);
}

/* har även klassen flexColumn i html*/
main div.divFilmRuta {
    /* background-color:brown; */
    /* background-color: rgb(102, 83, 83); */
    background-color: rgb(57, 41, 41);
}


/* har även klassen flexRow i html.
Gjorde manga kontrasttest med bakgrundsfargen.*/
footer.divFilmRuta {
    /* background-color: rgb(107, 52, 40);
    background-color: rgb(92, 39, 34);
    background-color: rgb(106, 53, 48);
    background-color: rgb(138, 55, 48);
    background-color: rgb(158, 52, 42);
    background-color: rgb(125, 65, 51); */
    /* background-color: rgb(251, 138, 111); */
    /* background-color:rgb(88, 32, 32), */
    background-color:rgb(44, 16, 17);
}




/* klass som ger horisontell flex-display  */
.flexRow {
    display: flex;
    flex-direction: row;
}


/* klass som ger vertikal flex-display  */
.flexColumn {
    display: flex;
    flex-direction: column;
}



/* divarna med rubriklänkarna centreras och ges bredden som dess innehåll kräver */
nav div {
    width: fit-content;
    align-self: center;
}



/* Bild-kontainer som jag gör till flex för att mellanrummet mellan bildtext och bild försvinner
Sätter bilden till 40% av bredden och gör en float-left för att textstycket ska ta plats bredvid bilden. */
figure {
    width: 40%;
    float: left;
    margin-left: 0;
    margin-right: 20px;
    margin-bottom: 10px;
    margin-top: 15px;
    display: flex;
    flex-direction: column;
    border: 2px solid black;
    text-shadow: 1px 1px 1px black;
}


/* generella inställningar, som gäller för båda bilderna
så att de anpassar sig till kontainern som omsluter den */
img {
    width: 100%;
    height: auto;
    padding: 0;
    margin: 0;
}

/* Kollapsar tabellens dubbel-linjer och centrerar den i cross-direction till flex-direction. */
table {
    max-width: 500px;
    min-width: 100px;
    width: 80%;
    /* color: rgb(251, 218, 224); */
    border-collapse: collapse;
    align-self: center;
}


/* Sätter färger, skuggor mm för både tabell och tabell-celler. */
table,
td,
th {
    border: 2px solid;
    margin: 0;
    padding-left: 5px;
    padding-right: 5px;
    color: rgb(251, 218, 224);

    text-shadow:
        1px 1px 1px rgb(100, 80, 80),
        -1px -1px 1px rgb(100, 80, 80),
        1px -1px 1px rgb(100, 80, 80),
        -1px 1px 1px rgb(100, 80, 80);
}





/* Footer behöver ingen padding. Sätter marginaler i divarna innanför istället,
och fördelar bredden i flex-riktningen med "space-around" */
footer {
    margin: 0;
    padding: 0;
    display: flex;
    /* height:100px; */
    align-items: center;
    justify-content: space-around;
}

footer>div {
    margin-top: 30px;
    margin-bottom: 30px;
    margin-left: 20px;
    margin-right: 20px;
}

/* Gör den till flexbox för att ta bort en marginal som dyker upp 
på botten mellan bilden och knappen. Rundar av knappen lite med border-radius 
och sätter stylen outset som får den att se ut som den sticker upp ur skärmen.*/
button {
    padding: 0;
    display: flex;
    border-style: outset;
    background-color: rgb(153, 127, 122);
    /* background-color: rgb(108, 71, 71); */
    border-radius: 10px;
    border-color: rgb(146, 130, 130);
    border-width: 4px;
}

/* När man hovrar på knappen så byts stilen till inset som får knappen 
att se ut att vara nertryckt i skärmen med hjälp av border-skugga som flyttas.
Jag gör även färgen på knappen lite mörkare då. */
button:hover {
    border-style: inset;
    background-color: rgb(75, 38, 31);
    background-color: rgb(70, 68, 73);
}





/* ALLA TEXT-ELEMENT */

/* Huvudrubriken färgas, centreras, ändras font och får två olika skuggor för att ge en dov gränseffekt. 
Sätter en stor textstorlek och minskar ner längst ner på denna sida ifall skärmbredden är liten
Tredje värdet för skuggan är dess diffusivitet.*/
h1 {
    font-size: 40px;
    line-height:60px;
    font-family:Georgia, 'Times New Roman', Times, serif;
    color: rgb(227, 192, 104);
    text-align: center;

    text-shadow:
        1px 1px 1px rgb(110, 97, 55),
        -1px -1px 1px rgb(110, 97, 55),
        1px -1px 1px rgb(110, 97, 55),
        -1px 1px 1px rgb(110, 97, 55),
        2px 2px 3px black,
        -2px -2px 3px black,
        2px -2px 3px black,
        -3px 3px 3px black;
}



/* Färgning och skuggning. 
bredden ska vara så bred som innehållet för det ska finnas utrymme att centrera rubrikerna*/
h2 {
    margin-bottom: 15px;
    color: rgb(182, 221, 221);
    font-size: 24px;
    width: fit-content;
    padding: 3px;
    align-self: center;
    text-shadow: 1px 1px 1px rgb(67, 82, 82),
        -1px -1px 1px rgb(67, 82, 82),
        1px -1px 1px rgb(67, 82, 82),
        -1px 1px 1px rgb(67, 82, 82),
        2px 2px 2px black,
        -2px -2px 2px black,
        2px -2px 2px black,
        -2px 2px 2px black;
}



/* Navigationens h2-rubrik får annan färg och större storlek, och jag tar bort marginalen*/
nav h2 {
    color: rgb(188, 204, 117);
    font-size: 30px;
    margin:0;
}

/* Speciellt för nav-rubrikerna som har länkar i sig, och exkl. raka sträcken
   Ger tillbaka vertikal margin till rubrik-länkarna.
   Det skriver över andra deklarationen eftersom den här har mer specifik selektor.*/
 nav div.navDiv h2{
    margin-top:20px;
    margin-bottom:20px;
} 

/* Ljusare färg när man hovarar */
nav h2:hover {
    color: rgb(240, 250, 233);
}



/* länk-elementet ska ärva färgen från dess förälder.
Jag anger även för tydlighets skull att jag vill ha understrykning*/
nav a {
    color: inherit;
    text-decoration-line: underline;
}


/* Genom att sätta spannen till block-display så kan man centrera texten 
även när den även efter radbrytning */
nav span{
    display:block;
    text-align:center;
}




/* Färg, skugga och marginal. */
h3 {
    margin-bottom: 5px;
    color: rgb(251, 218, 224);
    text-shadow:
        1px 1px 1px rgb(100, 80, 80),
        -1px -1px 1px rgb(100, 80, 80),
        1px -1px 1px rgb(100, 80, 80),
        -1px 1px 1px rgb(100, 80, 80);
}


/* Färg, skugga och marginal för vanlig paragraf-text. */
p {
    margin-top: 5px;
    color: rgb(251, 218, 224);
    text-shadow: 1px 1px 1px rgb(100, 80, 80),
        -1px -1px 1px rgb(100, 80, 80),
        1px -1px 1px rgb(100, 80, 80),
        -1px 1px 1px rgb(100, 80, 80);
}



/* Ändra färg skugga och marginal för pragraf-text som har divFilmRuta-klassen
som direkt förälder - i det här fallet stycket direkt under h2-rubrikerna. */
div.divFilmRuta>p {
    text-align: center;
    margin-bottom: 40px;
    margin-top: 0;
    /* color: rgb(159, 248, 248); */
    color: rgb(182, 221, 221);
    text-shadow: 1px 1px 1px rgb(67, 82, 82),
        -1px -1px 1px rgb(67, 82, 82),
        1px -1px 1px rgb(67, 82, 82),
        -1px 1px 1px rgb(67, 82, 82),
        2px 2px 2px black,
        -2px -2px 2px black,
        2px -2px 2px black,
        -2px 2px 2px black;

}


/* Vänster-justerar caption-texten till tabellen. */
caption {
    text-align: left;
}

/* Description-list - används oftast för att förklara ett ord. 
Jag använder den här som rubrik till onumrerade listan 
som är nästlad inuti description-list. */
dl {
    justify-self: center;
    min-width: 100px;
    max-width: 500px;
    align-self: center;

    color: rgb(251, 218, 224);
    text-shadow:
        1px 1px 1px rgb(100, 80, 80),
        -1px -1px 1px rgb(100, 80, 80),
        1px -1px 1px rgb(100, 80, 80),
        -1px 1px 1px rgb(100, 80, 80);
}


/* Elementet för "termens" namn - i det här fallet min rubrik - ska ha understreck. */
dt {
    text-decoration: underline;
}

/* Nestlade onumrerade listan ska ha fyrkanter istället för prickar */
ul {
    list-style-type: square;
}

/* Färgen behöver inte anges igen för nästlade li-elementet. */
/* li {
    text-decoration: none;
    color: rgb(251, 218, 224);
} */



/* Footerns texter - färgas och justeras.

Kontrast-appen på https://wave.webaim.org godkanner inte den här kontrasten. 
Men https://contrastchecker.com/ godkänner yttre text-skuggan rgb(185, 185, 217) 
mot bakgrunden  rgb(44, 16, 17), plus att det inte är så viktigt att just den här texten 
är super läsbar.*/
h4 {
    font-family: monospace;
    font-size: 20px;
    color: black;
    margin-top: 10px;
    margin-bottom: 10px;
    text-shadow:
    0.5px   0.5px 0.75px rgb(50, 50, 52),
    -0.5px -0.5px 0.75px rgb(50, 50, 52),
     0.5px -0.5px 0.75px rgb(50, 50, 52),
    -0.5px  0.5px  0.75px rgb(50, 50, 52)
     ,
    1px 1px 2px rgb(185, 185, 217),
    -1px -1px 2px rgb(185, 185, 217),
    1px -1px 2px rgb(185, 185, 217),
    -1px 1px 2px rgb(185, 185, 217)
    ; 
}



/* Figur-caption till bilden färgas och justeras. */
figcaption {
    color: black;
    background-color: rgb(220, 181, 165);

    margin: 0;
    padding: 5px;
    margin-bottom: 0;
}





/* När skärmbredden är mindre än 380px  */
@media (max-width:450px) {


    /* görs div-FilmRutorna slimmare så att de kan visas utan att det blir 
    overflow innan 320px skärbredd för att den ska kunna visas på 
    små mobilskärman. */
    .divFilmRuta {
        border-left-width: 0px;
        border-right-width: 0px;
        border-top-width: 5px;
        border-bottom-width: 5px;
        padding: 10px;
    }


    /* Gör så att bild-kontainern tar upp hela bredden och att textstycket 
flyttas ner under bilden. */
    figure {
        width: 100%;
        float: none;
    }

    h1{
        font-size:30px;
        line-height: 50px;
    }

}