@charset "utf-8";

html, 
body {
    margin: 0;
    padding: 0;
    border: 0;
    min-height: 100vh;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    font-size: 100%;
    font-family: MessinaSans, Lato, Helvetica, Arial, sans-serif;
    font-size: 100%;
}

main {
    flex: 1;
}

header,
main,
footer {
    padding: 0;
    border: 0;
    margin: 0;
}


/*-----header-------*/
header {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    background-color: rgb(30, 30, 30);
    min-width: 50em;

}

header a {
    text-decoration: none;
}

.header-left {
    min-width: 20em;
    padding-top: 1em;
    flex: 3;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: left;
}

#logo-img {
    padding: 1em;
    width: 5em;
    height: 5em;
    margin-left: .5em;
}

#logo-img a img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

#logo-name a {
    font-size: 1.7em;
    color: rgb(231, 231, 231);
}

.header-right {
    min-width: 50em;
    padding-top: .7em;
    flex: 10;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-around;
    /*column-gap: 1em;*/
}

.header-right a {
    font-size: 1.3em;
    color: rgb(231, 231, 231);
    padding: .5em 0em;
    background-color: rgb(23, 23, 23);
    min-width: 23%;
    text-align: center;
}

.header-right a:hover {
    background-color: rgb(44, 45, 45);
}


/*-------main--------*/

main {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: stretch;
    min-width: 50em;

}

.main-left {
    min-width: 20em;
    flex: 3;
}

.main-right {
    min-width: 50em;
    flex: 10;
}

/*------footer-----------*/
footer {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    background-color: rgb(33, 33, 33);
    padding: 1em 0em;
    padding-bottom: .5em;
    min-width: 50em;
}

.footer-left {
    min-width: 20em;
    flex: 3;
}

.footer-right {
    min-width: 50em;
    flex: 10;
}