* {
    margin: 0;
    padding: 0;
}

/* FONTS
Get fonts from local files */
@font-face {
    font-family: 'Open Sans';
    src: url("../fonts/Open_Sans/OpenSans-Regular.ttf");
}
@font-face {
    font-family: 'Patrick Hand';
    src: url("../fonts/Patrick_Hand/PatrickHand-Regular.ttf");
    font-weight: 700;
}
@font-face {
    font-family: 'FA Solid';
    src: url("../fonts/Font_Awesome/fa-solid-900.ttf");
    font-weight: 900;
}
@font-face {
    font-family: 'FA Regular';
    src: url("../fonts/Font_Awesome/fa-regular-400.ttf");
}
@font-face {
    font-family: 'FA Brands';
    src: url("../fonts/Font_Awesome/fa-brands-400.ttf");
}

.far {
    font-family: 'FA Regular';
}
.fas {
    font-family: 'FA Solid';
}
.fab {
    font-family: 'FA Brands';
}

:root {
    --white:       hsl(  75, 100%, 98%);
    --offwhite:    hsl(  75,  10%, 92%);
    --darkwhite:   hsl(   0,   0%, 88%);

    --lightgrey:   hsl( 260,  10%, 70%);
    --lightgrey-a: hsla(260,  10%, 70%, 0.5);
    --grey:        hsl( 260,   5%, 40%);
    --darkgrey:    hsl( 215,   5%, 30%);
    --darkgrey-a:  hsla(215,   5%, 30%, 0.5);

    --orange:      hsl(  25, 100%, 50%);
    --gold:        hsl(  50, 100%, 50%);
    --green:       hsl( 125,  50%, 60%);
    --cyan:        hsl( 170,  50%, 60%);
    

    --body-backg:         var(--darkwhite);
    --header-text:        var(--white);
    --main-backg:         var(--white);
    --p-text:             var(--darkgrey);

    --heading-text:       var(--darkgrey);
    --heading-shadow:     var(--darkgrey-a);

    --footer-text:        var(--lightgrey);
    --footer-backg:       var(--darkgrey);

    --nav-text:           var(--lightgrey);
    --nav-text-hover:     var(--gold);
    --nav-text-focus:     var(--darkwhite);
    --nav-backg:          var(--darkgrey);
    --nav-backg-hover:    var(--lightgrey-a);
    --nav-spacers:        var(--grey);
    --nav-subbackg:       var(--darkgrey-a);
    --nav-subbackg-hover: var(--lightgrey-a);

    --aside-text:         var(--darkgrey);
    --aside-backg:        var(--lightgrey);

    --hype-text:          var(--white);
    --hype-backg:         var(--orange);

    --form-backg:         var(--offwhite);
    --form-backg-focus:   var(--white);
    --form-border:        var(--darkwhite);

    --a-text:             var(--green);
    --a-text-visited:     var(--lightgrey);
    --a-text-active:      var(--cyan);

    --row-text:           var(--darkgrey);
}



/* GLOBAL */
main, img {
    max-width: 100%;
}

nav, nav ul, nav ul *, header a {
    width: 100%;
}

header, nav div, nav ul ul, aside, form label span, .hideitems ~ * {
    display: none;
}

nav input:checked ~ div, nav li button:focus ~ ul,
.hideitems:checked ~ *, .unhide, form label {
    display: block;
}

a, nav ul, nav li button::after {
    display: inline-block;
}



/* BASE */
html, body {
    min-height: 100vh;   /* height: 100%; breaks navbar, min-height: 100%; breaks flexbox*/
}

body {
    flex-direction: column;
    background-color: var(--body-backg);
    color: var(--p-text);
    font-family: 'Open Sans', sans-serif;
    overflow-y: scroll; /* Workaround to not shift the entire page left beacuse of the scrollbar*/
    overflow-x: hidden; /* Disable to know weather or not there is overflow*/
}

a {  /* Remove link funkyness beforehand */ 
    text-decoration: none;
    color: inherit;
}

header, nav > a, h1, h2, h3, h4, h5, h6 {
    font-family: 'Patrick Hand', serif;
}



/* MAIN */
main {
    width: 64.5rem;
    background-color: var(--main-backg);
    flex-grow: 1;
    align-self: center;
    padding-top: 2rem; /* Accomidate fixed header */
}

section {
    margin: 1rem;
}

img {
    border-radius: 2rem 0;
}

article > p, article > img {
    margin: 0 0 1rem;
}

article > p {
    line-height: 2rem;
}

p a {
    color: var(--a-text);
    display: inline;
}
p a:visited {
    color: var(--a-text-visited);
}
p a:active {
    color: var(--a-text-active);
    text-decoration: underline;
}

h1, h2, h3, h4 {
    color: var(--heading-text);
    margin: 0.25rem 0;
}

h1, h2 {
    line-height: 4rem;
}

h1, h2, .hype {
    text-shadow: -0.125rem -0.125rem 0.25rem var(--heading-shadow);
}

h1 {font-size: 3rem}
h2, nav > a, nav input, nav > span {font-size: 2rem}
h3, .x3 {font-size: 1.5rem}
h4, nav ul, .x4 {font-size: 1.25rem}

article ul {
    margin: 0 0 1rem;
    padding-left: 1rem;
}



/* FOOTER */
footer {
    background-color: var(--footer-backg);
    color: var(--footer-text);
    padding: 0.5rem;
}



/* NAV */
nav {
    background-color: var(--nav-backg);
    color: var(--nav-text);
    position: fixed;
    top: 0;
    z-index: 2;
}

nav > a { /* Mobile "header" */
    line-height: 3rem;
}

/* Both */
nav li {
    list-style-type: none;
}
nav ul a, nav ul button {
    line-height: 2.5rem;
}

/* Overmenu */
nav div {
    position: fixed;
    height: 100%;
    width: 100%;
    background-color: hsla(  0,   0%, 0%, 0.9);
    z-index: 1;
}
nav ul {
    background-color: var(--nav-spacers);
}
nav div > ul > li {
    background-color: var(--nav-backg);
    margin-top: 0.25rem;
}
nav ul button {
    border: none;
    color: inherit;
    background-color: transparent;
    font-size: inherit;
    font-family: inherit;
}

nav ul button:focus {
    pointer-events: none; /* Pressing the button twice will unfocus it */
    color: var(--nav-text-focus);
    background-color: var(--nav-backg-hover);
}

/* Submenu */
nav li li {
    margin-top: 0.125rem;
    background-color: var(--nav-subbackg);
}
nav li li:first-child {
    margin-top: 0;
}

/* Menu Arrows */
nav li button::after {
    font-family: 'FA Solid';
    content: "\f104";
    margin-left: 0.5rem;
    width: 1rem;
}
nav li button:focus::after {
    content: "\f107";
}

/* Mobile menu-button */
nav input, nav span {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    height: 2rem;
    line-height: 2rem;
}
nav input {
    width: 2rem;
    z-index: 3;
    opacity: 0;
    cursor: pointer;
}



/* FLEX */
.row, .aside, .next-to, body, form {
    display: flex;
}

.next-to {
    flex-direction: column;
}

.next-to div {
    flex: 1 1 20rem;
}

.next-to img {
    align-self: center;
    margin: 0 0 1rem 0;
}

.row {
    margin-top: 1rem;
    flex-wrap: wrap;
    color: var(--row-text);
}

.row a {
    flex: 1 0 14rem;
}

.row, aside {
    white-space: nowrap;
}

.row a:hover, .row > a:focus {
    opacity: 0.8;
}



/* FORM */
form {
    flex-direction: column;
    align-items: center;
}

form label {
    padding: 0.125rem 0;
    line-height: 1.5rem;
    vertical-align: top;
}

form input {
    height: 1.5rem;
}

form input, form textarea, form select {
    margin: 0.25rem 0.25rem 2rem;
    background-color: var(--form-backg);
    font: inherit;
    border: 0.125rem solid var(--form-border);
    max-width: 100%;
}

form input:focus, form textarea:focus, form select:focus {
    background-color: var(--form-backg-focus);
}

form input[type=text], form input[type=email], form textarea {
    width: 16rem;
}

form input[type=checkbox] {
    width: 1rem;
}

form input[type=number] {
    width: 4rem;
}

form select {
    width: 8rem;
    overflow-y: hidden;    /*Chromium Webkit*/
    scrollbar-width: none; /*Firefox*/
}

form input[type=submit] {
    padding: 0.125rem 0.5rem;
    height: 2rem;
}




/* MISC */
.float-left, .float-right {
    margin: 1rem 1rem 0;
}

.hype {
    border-radius: 0.5rem;
    padding: 0.25rem 0;
    background-color: var(--hype-backg);
    color: var(--hype-text);
}

.bold {
    font-weight: bold;
}

.center, nav, footer, header, h1, h2, .hype, .float-left, .float-right, form {
    text-align: center;
}

.red {
    color: red;
}



@media only screen and (min-width: 550px){

    div > a, div > a:hover, div > a:focus { /* Img bottom index */
        transition: 0.3s;
    }

    nav ul a, nav ul a:hover, nav ul a:focus { /* Nav links */
        transition: 0.2s;
    }

    nav > a, nav input, nav span {
        display: none;
    }

    header, nav div, nav li:hover ul {
        display: block;
    }



    /* HEADER */
    header {
        font-size: 4rem;
        background-image: url("../img/BlomsterHeader-100px.jpg");
        background-position: center;
        line-height: 100px;  /* Same as height = center vertically */
        text-shadow: 0 0 0.5rem black;
        color: var(--header-text);
    }



    /* NAV */
    nav div ul li:hover button, nav ul button:focus,
    nav div > ul > li > a:hover, nav div > ul > li > a:focus {
        background-color: var(--nav-backg-hover);
    }
    nav ul li:hover button, nav ul button:focus {
        color: var(--nav-text-focus);
    }
    nav ul a:hover, nav ul a:focus {
        color: var(--nav-text-hover);
    }

    nav ul ul a:hover, nav ul ul a:focus {
        background-color: var(--nav-subbackg-hover);
    }

    nav div {
        position: static;
        background-color: transparent;
    }

    main {
        padding-top: 0;
    }

    nav, nav div > ul {
        height: 2.25rem;
    }

    nav {
        position: -webkit-sticky; /*Webkit*/
        position: sticky;         /*Chromium Firefox*/
    }

    nav ul a, nav ul button {
        line-height: 2.25rem;
    }

    nav ul, nav input:checked ~ ul {
        display: flex;
        position: static;
        max-width: 64.5rem;
        margin: 0 auto;
    }

    nav div > ul > li {
        flex: 1 0 0;
        margin-top: 0;
    }

    nav ul ul {
        flex-direction: column;
        width: 100%;
    }

    nav li:hover button::after {
        content: "\f107";
    }


    
    /* FORM */
    form {
        display: grid;
        grid-template-columns: auto 18rem;
        gap: 0.25rem 1rem;
        text-align: left;
        max-width: 40rem;
        margin: 0 auto;
    }

    form input, form textarea, form select {
        margin: 0.25rem 0.25rem 0.25rem 0;
    }

    form label span {
        display: inline-block;
    }



    /* FLOAT */
    .float-left {
        float: left;
        margin: 0 1rem 0 0;
    }

    .float-right {
        float: right;
        margin: 0 0 0 1rem;
    }

    .float-left, .float-right {
        text-align: center;
    }
    
}



/* MEDIA QUERY */
@media only screen and (min-width: 750px){
    
    h1, h2 {
        text-align: left;
    }



    /* ASIDE */
    aside {
        display: block;
        color: var(--aside-text);
        background-color: var(--aside-backg);
    }

    aside img {
        border-radius: 0;
        width: 2.5rem;
        vertical-align: bottom;
        margin-right: 0.5rem;
    }

    aside p {
        line-height: 2.5rem;
        margin: 1rem 0;
    }



    /* FLEX */
    .next-to {
        flex-direction: row;
    }

    .next-to img {
        max-width: 40%;
        align-self: flex-start;
        margin: 0 1rem 0 0;
    }
}