/***** THIS STYLESHEET IS COMMON TO ALL PAGES. 
HANDLES THE BASIC (HORIZONTAL) DIVISION IN TWO AREAS 
AND SETS UP THE ASIDE NAVIGATION BAR
AND ITS RESPINSIVITY WITH DIFFERENT SCREEN SIZE. 
OTHER STYLESHEETS SETS THE LEFT MAIN (AREA) *******/

* {
    max-width: 100vw;
}

body {
    margin: 0;
    /* padding: 0;
    box-sizing: border-box;  ASI VYHODIT */
}

:root {
    color: var(--bg-color4);
    font-family: 'Bookman Old Style';
    font-weight: bold;

    --bg-color1: rgb(0, 44, 73);
    --bg-color2: rgb(0, 191, 255);
    --bg-color3: rgb(255, 223, 116);
    --bg-color4: rgb(89, 61, 1);

    --border: 8px solid var(--bg-color4);
    --border2: 8px solid var(--bg-color3);
}

/* COLOR CLASSES */
.bg-vanila {background-color: var(--bg-color3);}
.bg-cafe {background-color: var(--bg-color4);}

.font-vanila {color: var(--bg-color3);}
.font-cafe {color: var(--bg-color4);}

/* FONT SIZE CLASSES */
.sz-p {font-size: calc();}
.sz-h1 {font-size: calc()}
.sz-h2 {font-size: calc();}
.sz-h3 {font-size: calc();}


/* LAYOUT */
main {
    display: grid;
    grid-template-columns: 1fr 300px;
}

aside {
    font-size: 2rem;
    background-color: var(--bg-color3);
    grid-column: 2 / 3;
    grid-row: 1 / 2;
    display: grid;
    grid-template-columns: 1fr;
    line-height: 1.4;
    height: 100vh;
    justify-items: center;
}

a {
    text-decoration: none;
    color: var(--bg-color4);
}

a:hover {
    text-decoration: underline;
}

.right-box {
    position: fixed;
    display: grid;
    align-content: space-between;
    height: 93vh;
}

ul {  
    list-style-type: square;
    margin-block: 0;  
    padding-top: 4vw;
    padding-right: 25px;
}

.low-box {
    font-size: 0.5em;
    font-weight: normal;
    align-self: center;
    justify-self: center;
    text-align: center;  
    padding-top: 30px;
}

footer {
    display: none;
}

@media (max-width: 1200px){
    
    main {
        grid-template-columns: 1fr;
    }

    aside {
        grid-column: 1 / 2;
        border-left: none;  
        height: 54px;
        
    }

    .right-box {
        height: unset;
        border-bottom: 5px solid var(--bg-color4);
        width: 100vw;  /*  pridano  - dela neplechu - presunuto z ul*/
        background-color: var(--bg-color3);
    }

    ul {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr;
        justify-items: center; 
        justify-self: center;
        list-style-type: none;
        padding-inline: 0;
        padding-top: 5px;
        padding-right: 4px;
        padding-left: 4px;
       /* max-width: 80%; */
        column-gap: 6px;
        top: 0px;
        
        /* padding-right: 4px;  pridano -odebrano, dat do mensiho breakpoint query */
        background-color: var(--bg-color3); /* pridano */
    }

    li {
        width: 100%;
        text-align: center;
        border: 2px solid transparent;
    }

    li a {
        padding-inline: 3.5vw;
        padding-top: 4px;
    } 

    li a:hover {
        text-decoration: none;   
    }

    li:hover {
        border: 2px solid var(--bg-color4);
        border-bottom: none;
        transition: 0.6s;
    }

    .blog-tab {
        color: var(--bg-color3);
        background-color: var(--bg-color4);
    }

    .blog-tab a {
        color: var(--bg-color3);
    }

    .low-box {
        display: none;
    }

    footer {
        display: unset;
    }

    .foot {
        padding-top: 40px;
        margin: auto;
        color: var(--bg-color3);
        font-weight: normal;
        text-align: center;
        background-color: var(--bg-color4);
        height: 200px;
    }
}

@media (max-width: 860px){
  /*  ul {
        max-width: unset;
    } */

}

@media (max-width: 560px){
    aside {
        height: 8vw;
        font-size: 5vw;
    }

    .foot {
        font-size: 0.9em;
    }

    ul {
        column-gap: 6px;
    }

    li {
        border: none;
    }

    li:hover {
        border: none;
    }
}