html {
    font-size: 100%;
    font-family: "Tw Cen MT", Arial, Helvetica, sans-serif;
    font-style: normal; /*normal, italic, oblique (obl.-similar to italic*/
    font-weight: normal; /*normal, bold*/
    text-align: justify; /*justify, left, right, center*/
    color: black;
}

a:link, a:visited{
    color:#3F2600;
}

a:hover{
    color: #8e9800;
}



body > * {
    margin: 0.5rem;
}

body > header{
    border-radius: 1rem;
    text-align:center;
    background-color: rgb(204,153,0);
}

body > nav{
    border-radius: 1rem;
    background-color: rgba(254, 238, 34, 0.35);
}

body > nav a{
    text-decoration: none;
}

body > footer{
    font-size: 0.8rem;
}

main > article{
    background-color: rgb(255, 246, 152);
    border-radius: 1rem;
    padding: 0.3rem;
    margin-bottom: 1rem;
    overflow-wrap: break-word;
}

main > article > *{
    padding-left: 0.5rem;
    padding-right: 0.5rem;
}

main > article > h2{
    background-color: rgb(253, 255, 162);
    border-radius: 1rem;
    margin: 0;
}

body > aside{
    background-color: rgb(253, 255, 162);
    border-radius: 1rem;
    color: #2a0707;
    font-size: 0.9em;

}

body > aside > ul{
    list-style-type: none;
    margin: 1rem;
    padding-left: 0;
}




.biglist > li {
    padding-bottom: 0.5em;
}

.infoItem {
    display: inline-block;
    width: 5rem;
    padding: 0.5rem;
}
.infoItem > img {
    max-width: 100%;
    width: 100%;
}

aside.logos {
    display: flex;
    align-items: center;
    justify-content: space-evenly;
}


dt {
    font-style: italic;
    font-weight: bold;
}


/*
GRID LAYOUT pre veľké obrazovky
GRID LAYOUT for big screens
*/
@media (min-width: 600px) and (max-resolution: 1.8dppx){

    body{
        min-width: 35rem;
        max-width: 60rem;
        margin-left: auto;
        margin-right: auto;

        grid-template-areas: "head head head"
                             "nav  main aside"
                             "foot main .";

        display: grid;



        grid-template-columns: auto 1fr auto;
        grid-template-rows: auto 1fr auto;

        display: -ms-grid;
        -ms-grid-columns: auto 1fr auto;
        -ms-grid-rows: auto 1fr auto;
    }

    body > header{
        grid-area: head;
    }

    body > main{
        grid-area: main;
    }

    body > nav{
        width: 8rem;

        /*position: fixed;*/
        /*left: auto;*/
        /*top: 6.4rem;*/

        grid-area: nav;
    }

    body > nav {
        height: 8.5rem;

    }

    body > aside {
        height: 28.3rem;

    }


    body > footer{
        width: 7rem;

        grid-area: foot;
    }

    body > aside{
        grid-area: aside;
    }

    aside.logos {
        flex-direction: column;
    }

    /*.menuLink{*/
    /*    display: none;*/
    /*}*/

    img{
        max-width: 60%;
    }

    img.smaller{
        width: 38%;
        max-width: 90%;
    }


}


/*
FLEXBOX LAYOUT pre malé obrazovky
FLEXBOX LAYOUT for small screens
*/
@media not all and (min-width: 600px) and (max-resolution: 1.8dppx){

    body{
        min-width: 16rem;
        margin:auto;
        width: 100%;
        display: flex;
        flex-direction: column;
    }
    nav > ul{
        list-style: none;
        display: flex;
        padding-inline-start: 1em;
        flex-direction: row;
    }
    li{
        flex-grow: 1; /*aby zabrali celu sirku*/
    }

    aside.logos {
        flex-direction: row;
    }



    body > footer{
        order: 1; /*aby bol posledny. Ostatne maju implicitne hodnotu 0, tzn. sa zobrazia podla poradia v html*/
    }

    img{
        max-width: 90%;
    }

    img.smaller{
        width: 90%;
        max-width: 90%;
    }


}