@import url('https://fonts.googleapis.com/css2?family=Gluten&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Nunito&display=swap');

* {

    margin: 0;
    padding: 0;
    box-sizing: border-box;

}

body {

    display: grid;
    font-family: 'Nunito', sans-serif;
    grid-template-areas: 
    'header header'
    'aside main'
    'footer footer';
    grid-template-columns: 200px auto;

}

body header {

    align-items: center;
    background-color: #3b66b6;
    display: flex;
    height: 60px;
    grid-area: header;
    justify-content: center;
    padding: 8px;
    position: sticky;
    top: 0;
    z-index: 1;

}

.logo {

    height: 60px;
    width: 70px;
}

h1 {

    color: #e1e9ee;
    font-family: 'Gluten', cursive;

}

body aside {

    background-color: #5a82cc;
    grid-area: aside;
    position: sticky;
    top: 60px;
    z-index: 0;
}

body aside nav {

    position: fixed;
}

ul {

    display: flex;
    flex-direction: column;
    gap: 40px;
    list-style-type: none;
    padding: 16px;

}

a {

    color: #e1e9ee;
    font-weight: bold;
    text-decoration: none;

}

a:hover {

    color: rgb(25, 48, 116);
}


body main {

    background-color: #b2cfeb;
    grid-area: main;

}

section {

    align-items: center;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
}


.foto-cidade {

    height: 450px;
    padding: 24px;
    width: 800px;

}

.titulo-cidade {

    color: #204e74;
    font-weight: bold;
    padding: 16px;
    text-align: center;

}

p {

    color: #396a92;
    margin: 0 50px 20px 50px;
    text-align:justify;

}

body footer {

    background-color: #4266a8;
    display: flex;
    justify-content: center;
    gap: 18px;
    grid-area: footer;
    z-index: 2;
}

.icone-rodape {

    height: 50px;
    padding: 10px;
    width: 50px;

}


@media (max-width: 425px){

    body {

        grid-template-columns: auto;
        grid-template-areas: 
        'header'
        'aside'
        'main'
        'footer';  
    }

    ul {

        flex-direction: row;
    }

    body aside nav {

         position: relative;
    }

}