/* =======================
======= 1. imports =======
======================= */

@import url('https://fonts.googleapis.com/css2?family=Averia+Serif+Libre:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Baloo+Tamma+2:wght@400;600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;600&display=swap');


/* =======================
======= 2. resets ========
======================= */

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

a {
    text-decoration: none;
}

ul {
    list-style: none;
}

/* =======================
======= 3. general ========
======================= */


*:hover, 
*:focus {
    transition: 250ms ease-out;
}

:root {
    --clr-main: rgb(0, 0, 0);
    --clr-txt-main: rgb(159, 175, 17);
    --clr-sec: rgb(233, 230, 223);
    --clr-warn: rgb(95, 13, 13);

    --clr-trans: rgba(0, 0, 0, .6);
    --clr-trans-dark: rgba(0, 0, 0, .68);
    --clr-trans-orn: rgba(159, 175, 17, .75);
    
    --fnt-head: 'Averia Serif Libre', cursive;    
    --fnt-main: 'Baloo Tamma 2', cursive;
    --fnt-sec: 'Orbitron', sans-serif;

    --ftn-wgh-lgh: 100;
    --ftn-wgh-nrl: 400;
    --ftn-wgh-bold: 600;
    --ftn-wgh-big: 700;

    --ln-hgh-cap: 1;
    --ln-hgh-nor: 1.6;
}

html {
    scroll-behavior: smooth;
}

h3 {
    font-family: var(--fnt-main);
    line-height: var(--ln-hgh-cap);
    padding: 0 0 1rem 0;
    font-size: calc(1.2rem + 1vw);
    text-align: center;
}

body {
    background-image: url('pics/blF_h.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    background-attachment: fixed;
    background-color: var(--clr-trans-dark);
    background-blend-mode: overlay;
}

p a {
    color: var(--clr-sec);
    font-size: calc(.65rem + .8vw);
}

/* grid */

.header {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: .5fr 105fr;
    grid-template-areas: 'top'
    'mid';
}

/* top with nav and logo */

.sub__top {
    display: grid;
    grid-template-columns: 1fr 5fr 1fr;
    grid-template-rows: 1fr;
    grid-template-areas: 'logo . home';
    grid-area: top;
}

.home__logo_wrap {
    grid-area: logo;
    display: flex;
    width: 100%;
    justify-content: center;
    margin-top: 1em;
}

.logo {
    width: calc(.9em + 6vw);
    height: calc(.9em + 6vw);
}

.home__logo_wrap .logo:hover,
.home__logo_wrap .logo:focus {
    opacity: 0.5;
}

.home__link {
    grid-area: home;
}

.material-icons {
    display: flex;
    justify-content: center;
}

.home__link .material-icons {
    color: var(--clr-main);
    font-size: calc(1rem + 1vw);
    padding: 1em;
    transition: 250ms ease-in-out;
}

.home__link .material-icons:hover,
.home__link .material-icons:focus {
    opacity: 0.5;
    color: var(--clr-txt-main);
}

.material-icons:hover,
.material-icons:focus {
    text-shadow: 1px 5px 5px var(--clr-main);
}

/* main */

.container {
    margin: 0 13vw;
    font-family: var(--fnt-main);
    grid-area: mid;
}

.gallery__frame {
    padding: 1em;
    min-width: 5em;
    height: min-content;
    background-color: var(--clr-trans-orn);
    color: var(--clr-sec);
}

.gallery__frame + .gallery__frame {
    margin-top: 1rem;
}

.gallery__frame:last-child {
    margin-bottom: 5rem;
}

.index,
.index a {
    color: var(--clr-main);
    transition: 250ms ease-in-out;
}

.index a:hover,
.index a:focus {
    opacity: .45;
}

.gallery__flex {
    display: flex;
    flex-direction: column;
}

.gallery__pics img {
    width: 100%;
}

.back__link {
    text-align: right;
    margin-bottom: 0.5rem;
}

.back__link .material-icons {
    font-size: calc(.8rem + 1.1vw);
    padding: .5em;
    color: var(--clr-main);
}

.mid__text {
    text-align: center;
}

.back__link {
    grid-area: arrow;
    display: grid;
    position: sticky;
    bottom: 1.5rem;
    background-color: var(--clr-txt-main);
}

.back__link .material-icons {
    font-size: calc(.7rem + .7vw);
    padding: 0.5em;
    color: var(--clr-main);
    background-color: var(--clr-txt-main);
    background-position: center;
}

.back__link .material-icons:hover,
.back__link .material-icons:focus {
    color: var(--clr-txt-main);
    background-color: var(--clr-main);
}

/* footer */

.footer {
    position: fixed;
    bottom: 0;
    font-family: var(--fnt-sec);
    display: flex;
    flex-direction: column;
    justify-content: end;
    align-items: center;  
    margin-top: 2em;
    background-color: var(--clr-txt-main);
    width: 100vw;
}

.footer__text {
    font-size: calc(.3rem + .5vw);
    display: flex;
    flex-direction: column;
    justify-content: end;
    align-items: center;
    color: var(--clr-main);
    width: 100%;
    padding: 1.5em 0;
    line-height: var(--ln-hgh-nor);
}

/* =======================
==== media queries ===
======================= */

@media (max-height:320px) {
    .back__link {
        bottom: 1.5rem;
    }

    .footer__text {
        font-size: calc(.4rem + .5vw);
        padding: 1.7em 0;
    }
}

@media (max-height:414px) {
    
    .gallery__flex {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .gallery__flex > * {
        flex: 1 1 15em;
    }

    .gallery__pics {
        padding: 0 .5rem;
    }

    .back__link {
        bottom: 1.8rem;
    }
}

@media (min-width:560px) {
    .back__link {
        bottom: 2.2rem;
    }
}

@media (min-width:900px) {
    .back__link {
        bottom: 2.7rem;
    }
}

@media (min-width:1024px) {
    .gallery__flex {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .gallery__flex > * {
        flex: 1 3 25em;
        justify-content: space-between;
    }

    .gallery__pics {
        padding: 0 .5rem;
    }

    .gallery__frame:last-child {
        margin-bottom: 8rem;
    }

    .back__link {
        bottom: 2.9rem;
    }

    @media (min-width:1400px) {
        .back__link {
            bottom: 3.4rem;
        }
    }
}

@media (min-width:1615px) {
    .header {
        grid-template-rows: 1fr 65fr;
        margin-bottom: 5rem;
    }

    .back__link {
        bottom: 3.7rem;
    }
}