/* CONTENT INDEX:
1.BASIC LAYOUT
2.FONT SIZING
3.HEADER
4.NAVIGACE
5.DECORATION IMAGES
6.MEDIA QUERIES
*/


/* BASIC LAYOUT */
body {width: 100vw; height: 100vh;}


/* FONT SIZING AND ALL TEXTS PROPERTIES */
h1 {
    /* font-size: clamp(2.1rem, 5rem, 6vw); */
    font-size: clamp(2.1rem, 6vw + 1rem, 7rem);
    font-weight: bold;
    letter-spacing: .2vw;
    padding-top: 4vh;
}

h2 {
    font-size: clamp(.85rem, 1vw + .7rem, 2rem);
    letter-spacing: .8vw;
    line-height: 2.6;   /* Tohle sjednotit s h1, asi padding top */
    text-transform: uppercase;
}

a {
    font-size: clamp(1rem, 1vw + .2rem, 2rem);
    font-weight: bold;
    letter-spacing: .2vw;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--black);
    padding-inline: 1.5vw;
    
}

a:hover {
    color: var(--pink);

}


/* HEADER LAYOUT */
header {
    display: grid;
    place-items: center;
    height: 90%;
}

.title {
    display: grid;
    place-items: center;
}


/* NAVIGACE */
nav {
    grid-row-start: 3;
}

ul {
    display: flex;
    flex-wrap: wrap;
    list-style-type: none;
    border-inline: 1px solid var(--black); 
}

li {
    border-inline: 1px solid var(--black);
}


/* HOME PAGE DECORATION CORNES & KEYHOLE HERO IMG*/
.corner {
    position: fixed;
    width: clamp(20px, 2.5vw, 2.5vw);
}

:root {
    --crnr-dist: 1vw;
}

.top {top: var(--crnr-dist);}
.bottom {bottom: var(--crnr-dist);}
.left {left: var(--crnr-dist);}
.right {right: var(--crnr-dist);}
.rotate-180 {transform: rotate(180deg);}

.keyhole-img {
    max-width: 20vh;
    max-height: 60vw;
    padding-bottom: 2vh;
}

/* FRONT PAGE MEDIA QUERIES */
@media (max-width: 383px) {
    ul {
        flex-direction: column;
        border: none;
    }

    li {
        border-block: 1px solid var(--black);
        padding: 10px 55px;        
        margin-block: 6px;
        text-align: center;
        border-radius: 30px;
    }

    .h1, .h2 {
        text-align: center;
    }

    .h1 { 
        padding-top: 3rem;
    }
};