*{
    box-sizing: border-box;
}
.icon{
    width: 10%;
    height: 15%;
    position: fixed;
    top: 0;
    left: 0;
}
html{
    scroll-behavior: smooth;
}
body{
    background-color: rgb(121, 228, 231);
}
h1, h2, h3{
    text-align: center;
    font-family: "Josefin Sans";
    color: rgb(204, 124, 50);
}
p{
    text-align: justify;
    font-family: "Josefin Sans";
}
header{
    padding: 0;
    display: grid;
    grid-template-columns: 1fr;
    align-items: center;
}
img{
    max-width: 100%;
    height: auto;
}
main{
    display: grid;
    grid-template-columns: 1fr;
    padding: 1rem;
}
section{
    align-items: center;
    padding: 0.5rem;
    display: grid;
}
section div{
    padding: 0.5rem;
}
aside{
    padding: 0.5rem;
}
.container{
    display: grid;
}
article{
    padding: 0.5rem;
}
footer{
    display: grid;
    grid-template-columns: 1fr;
    padding: 1rem;
}
.map{
    width: 100%;
    height: 25rem;
}
/*600px*/
@media screen and (min-width: 37.5rem){
    iframe{
        width: 100%;
    }
}
/*768px*/
@media screen and (min-width: 48rem){
    iframe{
        width: 100%;
    }
    footer{
        grid-template-columns: 1fr 1fr 1fr;
    }
}
/*960px*/
@media screen and (min-width: 60rem){
    iframe{
        width: 100%;
    }
    section{
        grid-template-columns: 1fr 1fr;
    }
    .container{
        grid-template-columns: 1fr 1fr;
    }
}
/*1280px*/
@media screen and (min-width: 80rem){
    body{
        margin: 0 auto;
        width: 80%;
    }
    iframe{
        margin: auto;
        width: 100%;
        padding: 0.5rem;
    }
    section{
        grid-template-columns: 1fr 1fr;
    }
}
/*1920px*/
@media screen and (min-width: 120rem){
    body{
        margin: 0 auto;
        width: 80%;
    }
    section{
        grid-template-columns: 1fr 1fr;
    }
    iframe{
        margin: auto;
        width: 100%;
    }
}