/* Import from google fonts */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&display=swap');

:root {
    --animation-fast: 150ms;
    --animation-slow: 300ms;

    --navbar-height: 10vh;
    --main-gap: 1rem;

    --color-accent: hsl(154, 50%, 55%);
    --color-white: hsl(0, 0%, 93%);
    --color-black: hsl(0, 0%, 10%);
    --color-shadow: hsla(0, 0%, 0%, 0.2);

    --heading-size-multiplier: 1.4;
    --text-size-small: calc(1rem * var(--heading-size-multiplier));
    --text-size-medium: calc(var(--text-size-small) * var(--heading-size-multiplier));
    --text-size-large: calc(var(--text-size-medium) * var(--heading-size-multiplier));
}

html {
    font-size: 16px;
    font-family: Inter, sans-serif;
    font-weight: 400;
}

body {
    display: grid;
    grid-template-rows: auto 1fr auto;
    
    min-height: 100vh;
    overflow-x: hidden;


    background-color: var(--color-accent);
}

*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:focus{
    outline-color: rgb(95, 91, 92);
    outline-offset: 0.2rem;
    outline-width: 00.15rem;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: 700;
    font-size: var(--text-size-medium);
    text-transform: uppercase;
}

h1 {
    font-size: var(--text-size-large);
    padding: 1em 1em 0.5em;
}

/* Header styling starts here */

header {
    display: flex;
    flex-direction: column;

    min-height: var(--navbar-height);

    color: var(--color-black);
    background-color: var(--color-white);
}

#index header {
    height: 100vh;
}

/* Nav styling starts here */

nav {
    position: fixed;
    z-index: 999;

    display: flex;
    justify-content: space-between;
    align-items: center;

    flex-wrap: wrap;
    row-gap: 1rem;
    
    width: 100%;

    color: inherit;
    background-color: inherit;
    box-shadow: 0px 3px 3px var(--color-shadow);
}

nav>* {
    min-height: var(--navbar-height);
    margin: 0 1rem;;
}

.logo {
    display: grid;
    place-content: center;
}

.logo h2 {
    font-size: var(--text-size-small);
    font-weight: 500;
}

.navbar-expanded {
    padding-bottom: 1rem;
}

.nav-toggle {
    display: flex;
    gap: 0.25rem;
    align-items: center;
    
    border: none;

    color: inherit;
    background-color: inherit;
    
    font: inherit;
    text-align: center;

    cursor: pointer;
}

.nav-links {
    display: none;

    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
    row-gap: 1rem;
    column-gap: 1rem;

    width: 100%;
    
    text-align: right;
}

.navbar-expanded .nav-links {
    display: flex;
}

.nav-links li {
    list-style: none;
}

.nav-links .active {
    position: relative;
    border-bottom: 4px solid var(--color-accent);
    margin-bottom: -4px;
}

.nav-links a {
    text-decoration: none;
    text-transform: uppercase;
    color: inherit;
}

.hamburger-icon {
    position: relative;
    width: 2rem;
    height: 1.5em;
}

.burger-line {
    position: absolute;
    width: 80%;
    left: 10%;
    top: 50%;
    height: 10%;
    background-color: var(--color-black);
}

.burger-line:nth-of-type(1) {
    transform: translateY(-300%);
}

.burger-line:nth-of-type(3) {
    transform: translateY(300%);
}

.navbar-expanded .burger-line {
    transform: rotate(45deg);
}

.navbar-expanded .burger-line:nth-last-of-type(2) {
    visibility: hidden;
}

.navbar-expanded .burger-line:nth-last-of-type(3) {
    transform: rotate(-45deg);
}

/* Nav styling ends here */

#title-container {
    display: grid;
    place-content: center;

    height: 100%;

    margin-top: var(--navbar-height);
    padding: 2rem;

    text-align: center;
}

#title-icon {
    color: var(--color-accent);
    font-size: min(200px, 40vw);
}

#title-container h1 {
    text-align: center;
    padding-top: 0;
}

/* Header styling ends here  */

main {
    display: grid;
    padding: var(--main-gap) 0;
    gap: var(--main-gap);

    width: 100%;
}

#index main {
    margin-top: 0;
}

main img {
    display: block;
    max-width: 100%;
}


/* Utility class used on all pages */
.container {
    padding: 11.5%;

    color: var(--color-black);
    background-color: var(--color-white);

    box-shadow: 2px 2px 2px var(--color-shadow);
}

.container>*:not(:first-child) {
    margin-top: 1em;
    margin-bottom: 1em;
}

.text p {
    margin-top: 2em;
    
    max-width: 75ch;

    font-size: 1em;
    line-height: 1.5;
    word-spacing: 0.12em;
}

/* 
Quote style inspired by of https://freefrontend.com/css-quote-styles/ 
Copyright (c) 2021 by Chris Smith (https://codepen.io/chris22smith/pen/oQWavL)
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 */

 /* Utility class used to display blockquotes */
.quote {
    background-color: inherit;
    position: relative;
    
    padding: 1em;
    max-width: fit-content;

    border: solid 0.125em var(--color-black);
    
    font-size: 1.5em;
    line-height: 1.5;
    font-weight: 500;
    font-style: italic;

    display: inline-block;
}

.quote>* {
    position: relative;
    z-index: 1;
}

.quote>p {
    margin: 0%;
}

.quote::before {
    content: "";
    position: absolute;

    top: -1em;
    left: 2em;
    right: 2em;
    bottom: -1em;
    
    background-color: inherit;
}

/* Footer styling starts here */

footer {
    padding: 1rem min(4rem, 10vw);
    color: var(--color-black);
    background-color: var(--color-white);
}

footer li {
    margin: 0.5rem 0;
}

.fun main {
    position: relative;
    overflow: hidden;

    gap: 0;
    padding: 0;

    background-color: inherit;
    text-align: center;
}

/* Class to make the text centered and click trough on the fun page */
.overlay {
    position: absolute;
    top: 2rem;
    left: 50%;
    transform: translateX(-50%);

    display: grid;
    gap: 1rem;

    pointer-events: none;

    width: 100%;
}

.overlay>* {
    padding: 0;
}

/* The canvas of the fun page consisting of many square divs */
#fun-art{
    grid-row: 3;
    
    display: grid;

    /* The rows are different for different media sizes */
    grid-template-columns: repeat(5, 1fr);

    width: 100%;
    height: min(80vw, calc(100vh - var(--navbar-height)));


    background-image: url(Img/banner-2400.jpg);
    background-position: 70% 0%;
    background-color: var(--color-accent);
    background-size: cover;
    background-blend-mode: luminosity;
}


#fun-art div{
    width: 100%;
    aspect-ratio: 1 / 1;

    background-color: var(--color-accent);
    
    transition: all 1s ease-out 10s;

    box-shadow: 2px 2px 2px var(--color-shadow);
}

/* This is to make the squares clickable and hoverable on many platforms.
It works in combination with onclick="" on the squares */
#fun-art div:hover,
#fun-art div:focus,
#fun-art div:active {
    transition: all 0ms;
    background-color: transparent;
    box-shadow: none;
}

@media screen and (min-width: 800px) {
    :root {
        /* Increase the size ratio between small and large text (headings) */
        --heading-size-multiplier: 1.5;
    }

    nav {
        justify-content: space-around;
    }

    .navbar-expanded {
        padding-bottom: 0;
    }

    .nav-toggle {
        display: none;
    }

    .navbar-expanded .nav-links,
    .nav-links {
        display: flex;
        flex-direction: row;
        width: max-content;
    }

    main {
        grid-template-columns: 1fr 1fr;

        padding: var(--main-gap);
    }

    main>* {
        grid-column: 1 / -1;
    }

    /* Utility classes to display containers side by side */
    .left {
        grid-column: 1;
    }

    .right {
        grid-column: 2;
    }

    #fun-art{
        grid-template-columns: repeat(10, 1fr);
    }
}

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

    :root {
        --navbar-height: 10vh;
        --main-gap: 2rem;
    }

    html {
        font-size: 18px;
    }

    main {
        padding: var(--main-gap);
    }

    #fun-art{
        grid-template-columns: repeat(20, 1fr);
    }
}

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

    html {
        font-size: 20px;
    }

    main {
        padding: var(--main-gap) 11.5%;
    }
}