/*
TABLE OF CONTENT
=======================
======= 1. imports
======= 2. resets
======= 3. general
======= 4. header
======= 5. cards - general
======= 6. cards - specific
======= 7. cards - footer
======= 8. media queries
*/


/* =======================
======= 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(212, 208, 199);
    --clr-sec-contr: rgb(46, 46, 46);
    --clr-warn: rgb(95, 13, 13);

    --clr-trans: rgba(0, 0, 0, .6);
    --clr-trans-dark: rgba(0, 0, 0, .80);
    --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;
  }

.black_img {
      color: var(--clr-main);
      font-size: calc(.55rem + 1vw);
      margin: .5em .35em 0 0;
  }

.black_awe {
    font-size: calc(1rem + 1.5vw);
    margin: .5em .35em 0;
    padding: .3em .6em;
}

.black_materi {
    padding: .5em;
    font-size: calc(1em + 2vw);
}

.bold {
      font-weight: var(--ftn-wgh-bold);
  }

.margin_top {
    margin-top: .5em;
}

.margin_bottom {
    margin-bottom: 1em;
}

.margin_sides {
    margin-left: 1em;
    margin-right: 1em;
}

.flex_box {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    margin-top: 1em;
}

.pic__link:hover,
.pic__link:focus {
    opacity: 0.45;
}

.par__link_in {
    color: var(--clr-sec-contr);
}

.par__link_in:hover,
.par__link_in:focus {
    opacity: 0.45;
}

.par__link_in_light {
    color: var(--clr-sec);
}

.par__link_in_light:hover,
.par__link_in_light:focus {
    opacity: 0.45;
}

.red_icon {
    color: var(--clr-warn);
}

.icon {
    display: flex;
    flex-direction: column;
    text-align: center;
    margin: 0 .5em;
}

.icon a {
    color: var(--clr-main);
}

.black_hover a:hover,
.black_hover a:focus {
    color: var(--clr-txt-main);
    background-color: var(--clr-main);
}

.text__contrast {
    text-shadow: 0 0 4px rgba(255, 255, 255, 0.);
}

/* =======================
======= 4. header ========
======================= */

#home {
    background-color: var(--clr-main);
}

.header {
    background-image: url('pics/heroBig.jpg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    background-color: var(--clr-trans);
    background-blend-mode: overlay;
    height: 100vh;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr;
    grid-template-areas: 'logo . main_menu'
    '. . main_menu'
    'sec_menu sec_menu sec_menu';
}

.home__logo_wrap {
    grid-area: logo;
    width: 100%;
    text-align: center;
}

.logo_ex_frame {
    margin: .5rem 0 0 .5rem;
    padding: .1em;
    color: var(--clr-txt-main);
    clip-path: polygon(15% 0, 100% 0, 100% 90%, 85% 100%, 0 100%, 0 10%);
    background-color: var(--clr-txt-main);
}

.logo_frame {
    clip-path: polygon(15% 0, 100% 0, 100% 90%, 85% 100%, 0 100%, 0 10%);
    background-color: var(--clr-main);
}

.logo {
    width: calc(4.5em + 13vw);
    height: calc(4em + 13vw);
}

.home__logotype {
    text-transform: uppercase;
    font-family: var(--fnt-main);
    border-top: 1px solid var(--clr-txt-main);
    padding: 0 .2rem 0;
    font-size: calc(.85rem + 1vw);
}

.home__menu_main {
    grid-area: main_menu;
    display: grid;
    grid-template-columns: 6fr 1fr;
    grid-template-rows: 2fr 1fr;
    grid-template-areas: '. lime_bg'
    '. .';
}

.home__menu_list {
    grid-area: lime_bg;
    clip-path: polygon(0 5%, 100% 0, 100% 100%, 0 95%, 25% 90%, 0 85%);
    background-color: var(--clr-txt-main);
}

.home__first {
    margin: 1em auto 0;
}

.home__menu_list a {
    color: var(--clr-main);
}

.home__menu_list .material-icons {
    font-size: calc(.95rem + 1.15vw);
    padding: .6em;
}

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

.mini_box {
    grid-area: sec_menu;
}

.home__menu_bottom {
    text-align: center;
}

.home__menu_bottom a {
    font-family: var(--fnt-main);
    font-size: calc(.95rem + 1.6vw);
    text-decoration: none;
    color: var(--clr-txt-main);
    padding: 0 1.5em;
}

.home__menu_bottom a:hover,
.home__menu_bottom a:focus {
    color: var(--clr-main);
    background-color: var(--clr-txt-main);
}

/* =======================
=== 5. cards - general ===
======================= */

.box {
    height: 100vh;
    display: grid;
    grid-template-columns: 1fr 7fr 1fr;
    grid-template-rows: 1fr 5fr 1fr;
    grid-template-areas: 'title title arrow'
    'text_box text_box text_box';
    align-items: center;
    justify-content: center;
}

.title {
    grid-area: title;
    margin: 1em 0 auto 1em;
    clip-path: polygon(15% 0, 100% 0, 100% 70%, 85% 100%, 0 100%, 0 30%);
    background-color: var(--clr-trans-dark);
    color: var(--clr-txt-main);
    width: min-content;
    height: min-content;
}

.title__text {
    display: flex;
    font-family: var(--fnt-main);
    font-size: calc(.8rem + 1.1vw);
    padding: .3em .6em;
}

.back__link {
    grid-area: arrow;
    position: sticky;
    top: 0;
    text-align: right;
    margin: 0 0 auto;
}

.back__link .material-icons {
    font-size: calc(.8rem + 1.1vw);
    padding: .5em;
    color: var(--clr-main);
    background-color: var(--clr-txt-main);
    background-position: center;
    box-shadow: -3px 3px 12px var(--clr-trans);
}

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

.link {
    font-size: calc(.5rem + .5vw);
}

.card__text {
    grid-area: text_box;
    min-width: 5em;
    min-height: 10em;
    clip-path: polygon(0 0, 100% 0, 100% 90%, 90% 100%, 0 100%, 0% 50%);
    margin: 0 2em;
}

.black {
    background-color: var(--clr-trans-dark);
    color: var(--clr-sec);
}

.lime {
    background-color: var(--clr-trans-orn);
    color: var(--clr-sec-contr);
}

.text__wrap {
    padding: 1em;
}

.par__title {
    font-family: var(--fnt-head);
    text-transform: uppercase;
    text-align: center;
    line-height: var(--ln-hgh-cap);
    margin-top: .3em;
    font-size: calc(.8rem + 1.4vw);
    line-height: var(--ln-hgh-cap);
}

.in__text {
    font-family: var(--fnt-main);
    line-height: var(--ln-hgh-nor);
    font-weight: var(--ftn-wgh-lgh);
    font-size: calc(.45rem + 1.15vw);
    line-height: var(--ln-hgh-nor);
}

/* =======================
=== 6. cards - specific ==
======================= */

#backline,
#stage,
#management,
#portfolio,
#gallery,
#other_work {
    background-size: cover;
    background-position: center;
    background-blend-mode: overlay;
}

#backline {
    background-image: url('pics/backline_cover.jpg');
    background-color: var(--clr-trans-orn);
}

.backline_logo {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.bb {
    margin: .6em 0 1em;
    width: 6em;
}

.in__text_link {
    padding: .3em 1em;
    color: var(--clr-main);
    background-color: var(--clr-txt-main);
}

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

#stage {
    background-image: url('pics/stage_cover.jpg');
    background-color: var(--clr-trans);
}

#management {
    background-image: url('pics/mana_cover.jpg');
    background-color: var(--clr-trans-orn);
}

#portfolio {
    background-image: url('pics/portfolio.jpg');
    background-color: var(--clr-trans);
}

#gallery {
    background-image: url('pics/gallery_cover.jpg');
    background-color: var(--clr-trans-orn);
}

.gallery__link {
    width: calc(4rem + 14vw);
    margin: .2em;
}

#other_work {
    background-image: url('pics/other_work.jpg');
    background-color: var(--clr-trans);
}

/* =======================
==== 7. cards - footer ===
======================= */

.box__bottom {
    display: grid;
    grid-template-columns: 1fr 7fr 1fr;
    grid-template-rows: 1fr 6fr 1fr;
    grid-template-areas: 'title title arrow'
    'text_box text_box text_box'
    'footer footer footer';
}

.ow {
    min-width: calc(6em + 6.9vw);
}

.footer {
    grid-area: footer;
    font-family: var(--fnt-sec);
    display: flex;
    flex-direction: column;
    justify-content: end;
    align-items: center;  
    margin-top: 2em; 
}

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

.jarle {
    padding: .2em 1em;
    color: inherit;
}

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

/* =======================
==== 9. media queries ===
======================= */

@media (max-height:414px) {
    .header {
        grid-template-columns: 1fr 2fr 1fr;
        grid-template-rows: 1fr 1fr;
        grid-template-areas: 'logo sec_menu main_menu'
        '. sec_menu main_menu';
    }

    .mini_box {
        margin-top: 2em;
    }

    .in__text {
        font-size: calc(.3rem + 1.2vw);
        line-height: 1.4;
    }

    .gallery__link {
        width: calc(3rem + 10vw);
        margin: .2em;
    }
}

@media (min-width:1080px) {
    .header {
        grid-template-columns: 1fr 2fr 1fr;
        grid-template-rows: 1fr 1fr 1fr;
        grid-template-areas: 'logo . main_menu'
        'sec_menu . main_menu'
        'sec_menu . .';
    }

    .home__first {
        margin: 2em auto 0;
    }

    .home__menu_bottom a {
        font-size: calc(.55rem + 1.1vw);
        padding: 0 1.5em;
    }

    .home__menu_main {
        grid-template-columns: 6fr 1fr;
        grid-template-rows: 1fr;
        grid-template-areas: '. lime_bg';
    }

    .bb {
        width: 9em;
    }

    .mini_box {
        margin-top: 4em;
    }

    .card__text {
        margin: 0 9em;
    }

    .par__title {
        margin-top: .1em;
        margin-bottom: .7em;
    }

    .in__text {
        line-height: 1.5;
    }
}