*{
    margin:0;
    padding:0;
    border:0;
    /* reset de margin, padding e border para todos os elementos */
    /*pode colocar um position: relative; para todos os elementos */
}
 
main{
    position: relative;
    width:90%;
    height:auto;/* defina um tamanho para cmc 
    e ter uma base de como estar o tamanho do main 
    e depois coloque no height: automatica*/
    background-color: aquamarine;
    margin: auto;
    font-size: 16px;
    color: #006;
    font-family: verdana;
    text-align: center;
}
 
#cabecalho{
    position: relative;
    width:100%;
    height:90px;
    background-color: #FF0;
    /*padding-top: 30px; /* texto alinhado no meio do cabecalho ao colocar ele vai
    ter que diminuir no height o tamanho */
    display: flex;/* flexbox para alinhar o texto no meio do cabecalho */
    flex-direction: row; /*alinhar o texto em linha ou coluna */
    align-items: center; /*alinhamento vertical ou horizontal */
    justify-content: center; /*alinhamento horizontal do texto no meio do cabecalho*/
}
 
#cabecalho h1{
    text-align: center;
    font-size:30px;
    color:blueviolet;
}
 
/*
.borda{
    border:5px solid red;
}*/
 
nav{
    position: relative;
    width:100%;
    height:50px;
    background-color: rgb(175, 207, 160);
    display: flex; /* flexbox para alinhar os links no meio do cabecalho */
    flex-direction: row; /* alinhar os links em linha */
    align-items: center; /*alinhamento vertical ou horizontal */
    justify-content: space-around; /*alinhamento horizontal do texto no meio do cabecalho, 
    exixte outros tipos de espaçamentos com o space...*/
}
  nav a{ /* estilização dos links e navegação */
    position: relative;
     width: 100px; /* largura do link */
     color: aqua;/* cor do texto do link */
     background-color: blue; /* cor de fundo do link */
     text-decoration: none; /* retira o sublinhado do link */
    padding: 5px; /* espaçamento interno do link */
    transition-duration: 1s; /* tempo de transição do link */
 }
 nav a:hover{ /* estilização dos links entre outras coisas quando o mouse passar por cima */
    background-color: aqua; /* cor de fundo do link quando o mouse passar por cima */
    color: blue; /* cor do texto do link quando o mouse passar por cima */
    width: 120px; /* largura do link quando o mouse passar por cima */
    transition: 1s all; /* tempo de transição do link */
    
 }
 #lado_esquerdo{
    position: relative;
    width: 30%; /* largura do elemento lado esquerdo */
    height: 450px;  /* altura do elemento lado esquerdo */
    background-color: antiquewhite;
    float: left; /* flutua o elemento para a esquerda */
 }
  #meio{
    position: relative;
    width: 70%; /* largura do elemento meio */
    height: 450px;  /* altura do elemento meio */
    background-color: rgb(156, 38, 58);
    float: left; /* flutua o elemento para a esquerda */
 }
 #lado_esquerdo div{
    background-color: aqua; /* cor de fundo do elemento div */
    position: relative; /* posição relativa para o elemento div */
    width: 90%; /* largura do elemento div */
    height: 180px;  /* altura do elemento div */
    margin: auto; /* centraliza o elemento dentro do lado esquerdo */
 }
    #lado_esquerdo aside{
        position: relative; /* posição relativa para o elemento aside */
        width: 90%; /* largura do elemento aside */ 
        height: 180px;  /* altura do elemento aside */
        margin: auto; /* centraliza o elemento dentro do lado esquerdo */
    }
 img{
    width: 100%; /* largura da imagem */
    height: 100%; /* altura da imagem */
 }
 footer{
    position: relative;
    width:100%; /* largura do rodapé */
    height:80px; /* altura do rodapé */
    clear: left; /* limpa o flutuação dos elementos anteriores */
    background-color: #000;
    display: flex;/* flexbox para alinhar o texto no meio do cabecalho */
    flex-direction: row; /*alinhar o texto em linha ou coluna */
    align-items: center; /*alinhamento vertical ou horizontal */
    justify-content: center; /*alinhamento horizontal do texto no meio do cabecalho*/
}
footer h3{ /* estilização do texto do rodapé */
    color: beige;/* cor do texto do rodapé */
}