html,
body {
    margin: 0px;
    padding: 0px;
    width: 100%;
}

/* Använder klassen där det finns url-adress skriven i textform. 
Text-sträcken ska brytas så att den inte skapar overflow */
.breakLargeWord{
    overflow-wrap:break-word;
    word-wrap:break-word;
    -ms-word-break: break-all;
    word-break: break-word;
}




/* STORA CONTAINERS */

.grid-container {
    background-color: rgb(104, 58, 58);
}

/* Headern sätts till sticky när den når y-position 0 med sin topp när man skrollar ner sidan.
 Efterson headern redan är i y-position 0 från början så sitter den alltid fast där när man skrollar över 
 dess syskon.
  */
header {
    /* varje grid-item måste anges, jag namnger dem efter deras element-namn */
    grid-area: header;
    /*för Safari*/
    position: -webkit-sticky;
    /*för allt annat*/
    position: sticky;
    top: 0;
    /* background-color: rgb(90, 60, 70); */
    background-color: rgb(121, 81, 94);
    margin: 0;
    /* padding-right:50px; */
}


/* Gör den tomma top-diven ovanför aside till sticky, samma som ovan.
   Visas bara med stora skärmar */
.header-empty {
    grid-area: header-empty;
    /* background-color: rgb(187, 146, 154);
    background-color: rgb(53, 53, 53);
    background-color: rgb(141, 93, 95); */
    position: -webkit-sticky;
    position: sticky;
    top: 0px;
    background-color: rgb(104, 58, 58);
}



aside {
    /* har flyttat till andra css-filen */
    /* position: -webkit-sticky;
    position: sticky;
    top: 0;     */

    grid-area: aside;
    /* float: left; */
    /* width: 20%; */
    /* padding-right:20px; */
    /* padding-left:10px; */
    /* background-color: rgb(187, 146, 154); */
    /* background: linear-gradient(to bottom, #ff99cc 0%, #302d2f 100%);; */
    background-color: rgb(53, 53, 53);
    background-color: rgb(149, 110, 110);
    padding-top: 10px;

}

main {
    grid-area: main;
    background-color: rgb(230, 196, 196);
    margin-top: 0;
}



footer {
    grid-area: footer;
    background-color: rgb(182, 112, 126);
    padding-right: 20px;
    padding-left: 20px;
}

/* Tomma rutan till vänster i footer, visas bara med stora skärmar.
  En tom grå yta som dyker upp under aside-menyn när man scrollar ner till Referenslistan. */
.footer-empty {
    grid-area: footer-empty;
    /* background-color: rgb(153, 100, 100); */
    background-color: rgb(76, 61, 69);     
}

article {
    margin-left: 10px;
}


/* Det är övergripande diven under sidans titel som innehåller de två divarna med klasserna header_container1 och header_container2
Den görs till en horisontell flex-container där de två mindre divarna separeras genom att välja space-between i flex-riktningen. */
.header_container {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

/* diven centreras i flex-cross-direction, som i det här fallet är vertikalt. */
.header_container1 {
    /* display: flex; */
    width: fit-content;
    align-self: center;
}

/* den här diven som innehåller meny-knappen flyttas till nedre gränsen av flex-cross-direction. */
.header_container2 {
    align-self: flex-end;
    width: 50px;
    padding: 5px;
    margin:5px;
}


/* Diven som innehåller bilden flyts åt vänster */
.img_container {
    width: 45%;
    float: left;
    padding-top: 30px;
    padding-right: 20px;
    padding-left: 10px;
    padding-bottom: 5px;
    /* background-color: yellow; */
    /* margin-right: 20px; */
}




/* IMG, BUTTON */

img {
    width: 100%;
    height: auto;
}

/* sätter display flex för att bort tomrummet som uppstår mellan knappen och 
dess innre ikon, underkanten.
Vill också att alla knappar ska ha stilen outset och ha en rundad kant med vit border.*/
button {
    border-style: outset;
    display: flex;
    border-radius: 5px;
    border-color:white;
}

/* knappen har png-bild med genoskinlig backgrund
och tilldelas här en bakgrundsfärg */
header button {
    background-color: rgb(179, 138, 138);
    width: 50px;
    height: 40px;
    padding-top: 3px;
    padding-bottom: 3px;
}

/* Dessa knappar flyter till högerkanten
 och genomskinliga ikonen får bakgrundsfärg 
 och knappen rundas av med border-radius*/
main button,
footer button {
    background-color: rgb(189, 184, 184);
    margin-left: 5px;
    margin-top: 10px;
    margin-bottom: 15px;
    float: right;
    padding: 0;
}

/* Main-knapparna görs lite mindre */
footer button {
    width: 25px;
    height: 25px;
}

/* Footer-knappen görs lite större */
footer button {
    width: 40px;
    height: 40px;
}





/* ALL TEXT */

/* Med svart rand blir texten kanske lite mer läslig */
h1 {
    /* color: rgb(221, 196, 106); */
    /* color: rgb(255, 233, 151); */
    /* color: rgb(252, 224, 121); */
    color: rgb(253, 232, 157);
    text-shadow:
        1px 1px 1px black,
        -1px -1px 1px black,
        -1px 1px 1px black,
        1px -1px 1px black;

    margin-bottom: 0px;
}

/* försöker få färgkontrasten godkänd och samtidigt behålla rosa och gula designen. */
header p {
    /* font-weight: bold; */
    /* color: rgb(184, 170, 120);
    color: rgb(247, 231, 173); */
    /* color: rgb(255, 233, 151); */
    color: rgb(254, 247, 220);

    text-shadow:
        0.5px 0.5px 1px rgb(11, 9, 1),
        -0.5px -0.5px 1px rgb(40, 32, 6),
        -0.5px 0.5px 1px rgb(75, 61, 13),
        0.5px -0.5px 1px rgb(51, 42, 8);

}


aside>h2 {
    /* color: rgb(225, 209, 205); */
    /* color: rgb(215, 192, 186); */
    color: rgb(244, 217, 174);
    /* background-color: rgb(149, 110, 110); */
    /* background-color: rgb(137, 94, 94); */
    background-color: rgb(126, 91, 91);

    text-shadow:
        0.5px 0.5px 1px rgb(11, 9, 1),
        -0.5px -0.5px 1px rgb(40, 32, 6),
        -0.5px 0.5px 1px rgb(75, 61, 13),
        0.5px -0.5px 1px rgb(51, 42, 8);

    /* margin-left:10px; */

    border: 2px outset rgb(153, 127, 131);

    padding-left: 10px;
    padding-right: 5px;
    padding-top: 4.8px;
    padding-bottom: 4.8px;
    margin-top: 6.4px;
    margin-bottom: 6.4px;
}

/* Manual hyphens bryter ord där man anget en soft-break (­) för att förhindra
overflow. Ordet som bryts får ett bindestreck (hyphen). */
article>h2 {
    color: black;
    margin-top: 24px;
    hyphens:manual;

}

/* sätter font-sizen i relativ enhet så man kan skala upp */
article>p {
    color: black;
    margin-bottom: 20px;
    margin-top: 20px;
    font-size:1rem;
}

footer>h2 {
    color: rgb(34, 27, 4);
    /* padding-left: 32px; */
    margin-left: 0;

    /* Bara i riktningen snett höger och neråt. Försöker ge bättre kontrast */
    text-shadow:
        0.5px 0.5px 0px black;
    /* -0.5px -0.5px 0px black, */
    /* -0.5px 0.5px 0.5px black, */
    /* 0.5px -0.5px 0.5px black;  */
}

footer>p {
    font-weight: 600;
    /* color: rgb(34, 27, 4); */
    color: rgb(26, 20, 0);
    /* color: rgb(53, 14, 0); */
    /* padding-left: 32px; */
    margin-left: 0;
    margin-bottom: 40px;
    font-size:1rem;
}




/* LINKS */

/* generell färg för alla länkar */
a {
    color: rgb(15, 12, 75);
}

/* Länken i header ska ärva textfärg från omslutande p-element. 
Eftersom selektorn är mer specifik viktas den över den generella länkfärgen.*/
header a {
    color: inherit;
}

/* Länkarna i aside ska ärva textfärg från omslutande h2-element 
och understrukningen tas bort. */
aside a {
    text-decoration: none;
    color: inherit;
}


/* HOVER-EFFEKT */

/* gäller generellt för hovrade länkar */
a:hover {
    color: rgb(21, 11, 209);
}


/* aside-länken får samma hovringsfärg som omslutande h2-element har */
aside a:hover {
    color: inherit;
}

/* Sätter hovrings-effekten på h2 istället för länken för att
samtidigt kunna ändra bakgrundsfärgen. */
aside h2:hover {
    /* color:rgb(29, 6, 6);
    color:rgb(48, 10, 10); */
    color: rgb(82, 44, 44);
    background-color: rgb(158, 114, 114);
    border: 2px inset rgb(153, 127, 131);
}


/* header-länken får en lila hovrings-färg */
header a:hover {
    /* color:rgb(48, 10, 10);
    color:rgb(162, 171, 25);
    color:rgb(162, 171, 25);
    color:rgb(15, 12, 75); */
    color: rgb(24, 9, 28);
}


/* header-knappens hovrings-bakgrundsfärg */
.header_container2 button:hover {
    background-color: rgb(99, 52, 65);
    border-style: inset;
}

main button:hover,
footer button:hover {
    background-color: rgb(239, 221, 221);
    border-style: inset;
}




/* span-element med klassen pointerTipText ska vara osynliga. 
Med z-positionen högre än 0 lägger sig spannen över allt normalt innehåll på 
skärmen. Med position som är fixed har sätts koordinaterna relativt vieport
och då kan man ange spannens koordinater till samma som musens koordinater.*/
span.pointerTipText {
    visibility: hidden;
    background-color: black;
    color: white;
    font-size: 1rem;
    /* padding: 0; */
    z-index: 1;
    position: fixed;
    padding-left: 2px;
    padding-right: 2px;
}

/* När man hovrar på ett element som har argumentet target ska textinnehållet
i en span med klassen .pointerTipText bli synligt. Textinnehållet fylls i med js. */
a[target]:hover span.pointerTipText {
    visibility: visible;
}