:root{
    --first-bg-color: #aaaaaa;
    --second-bg-color: #e7e7e7;
    --main-color:#444444;
    --main-font: arial, sans-serif;
    --secondary-font: 'Orbitron', sans-serif;
    --code-font: monospace;
}
* {
    transition: all 0.25s;
    box-sizing: border-box;
}
.hide{
    display: none;
}
body {
    display: grid;
    grid-template-columns: 10em 1fr ;
    grid-template-rows: auto 1fr auto;
    grid-template-areas: 
    "header header"
    "nav main"
    "nav main"
    "footer footer";
    margin: 0;
    font-family: var(--main-font);
    min-height: 100vh;
    background-color: var(--second-bg-color);
    color: var(--main-color);
}
header {
    width: 100%;
    grid-area: header;
    padding: 20px;
    display: inline-block;
    background: linear-gradient(to bottom, var(--first-bg-color), var(--second-bg-color));
}
header img {
    transition: all 1s;
    width: 3em;
    border-radius: 10%;
    margin-right: 5%;
}
header .mainIcon {
    width: 11em;
    float: right;
}
header p {
    color: rgb(73, 73, 73);
    margin: 0;
}
header h1 {
    transition: all 1s;
    margin: 0;
}
header div{
    transition: all 1s;
    margin-top: 6em;
}
footer div{
    display: grid;
    grid-template-columns: 4fr 1fr;
}
.collegamenti{
    display: inline;
    align-items: center;
}
.collegamenti img{
    display: inline;
    width: 3em;
    border-radius: 10%;
    margin: 5px;
    transition: all 0.5s;
    padding: 0.25em;
    margin-right: 1em;
    box-shadow: 0.3em 0.3em 0.2em var(--first-bg-color);
}
.collegamenti img:hover{
    padding: 0.1em;
    box-shadow: 0.5em 0.5em 1em var(--first-bg-color);
}
footer div select{
    /*altezza gestita con la grandezza veritcali delle img*/
    float: right;
    height: 3em;
    width: 20ch;
    margin: 10px auto;
}
nav {
    grid-area: nav;
    text-align: center;
    background-color: var(--second-bg-color);
    border-right: var(--first-bg-color) 1px solid;
    border-radius: 25px;
    font-family: var(--secondary-font);
}
nav ul {
    list-style-type: none;
    padding: 0;
    padding-bottom: 2em;
}
nav li {
    display: inline-block;
    padding: 1em 0 1em 0;
    border-radius: 10px;
    margin: 2px;
    width: 75%;
}
nav li:hover {
    background-color: rgb(73, 73, 73, 0.5);
}
nav a{
    color: var(--main-color);
    font-size: 1em;
    padding: 1em 2em;
}
nav a:hover{
    text-shadow: 1px 1px 5px var(--second-bg-color);
}
main {
    background-color: var(--second-bg-color);
    grid-area: main;
    padding: 25px 20px 20px 20px;
}
footer {
    grid-area: footer;
    text-align: center;
    background: linear-gradient(to bottom, var(--second-bg-color), var(--first-bg-color));
    padding: 20px;
    width: 100%;
}
button{
    transition: all 0.5s;
    font-family: var(--secondary-font);
    background-color: var(--second-bg-color);
    color:  var(--main-color);
    font-weight: bold;
    border: var(--first-bg-color) 2px solid;
    padding: 10px 20px;
    font-size: 17px;
    margin: 0 1em;
    cursor: pointer;
    border-radius: 5px;
}
button:hover{
    background-color: var(--first-bg-color);
    border: var(--main-color) 2px solid;
}
a {
    font-weight: 600;
    color: var(--main-color);
}
@media (max-width: 700px) {
    body {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto 1fr auto;
        grid-template-areas: 
        "header"
        "nav"
        "main"
        "footer";
    }
    header .mainIcon {
        width: 6em;
    }
    header div p{
        display: none;
    }
    header div{
        margin-top: 3em;
    }
    nav{
        border: none;
    }
    nav li{
        width: min-content;
    }
    nav ul{
        padding: 0;
    }
}
@media (max-width: 400px) {
    header h1{
        padding: 0;
        margin: 0;
        font-size: 2em;
        text-align: center;
    }
    header div{
        margin-top: 1em;
    }
    header div a{
        display: inline-table;
    }
    header .mainIcon{
        margin: auto;
        float: none;
        display: block;
        width: 5em;
    }
    .collegamenti{
        text-align: center;
    }
    footer div{
        grid-template-rows: 1fr 1fr;
        grid-template-columns: auto;
    }
}