body {
    font-family: 'Arial', sans-serif;
    background-color: #A56CD1;
    }

            
#container {
  max-width: 900px;
  margin: 0 auto;
  padding-bottom: 30px;
            }

            #container a {
          	 text-decoration: none;
                          }
                
       		#container li a: hover {
             color: #ecbe44
             text-decoration: none
                                    }   

#header {
  width: 100%;
  aspect-ratio: 1100 / 425;
  background-image: url("imagens/h.png");
  background-size: contain;
  background-position: bottom center;
  background-repeat: no-repeat;
        }
            

            /* nav */
#navbar {
    height: 40px;
    background-color: #ECECEC;
    width: 100%;
    background-image: linear-gradient(to right, #ECECEC 73.4%, #EBEBEB 73.4%); 
         }

        #navbar ul {
         display: flex;
         padding: 0;
         margin: 0;
         list-style-type: none;
         justify-content: center; 
         gap: 150px;                             
                    }

        #navbar li {
         padding-top: 10px;
                    }

        #navbar li a {
         font-family: 'Fredoka', sans-serif;
         font-size: 19px;
         color: #6F35A6;
         font-weight: 800;
         text-decoration: none;
         text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
                      }

        #navbar li a:hover {
         color: #31A1AD;
         text-decoration: underline wavy #413C4C;
         letter-spacing: 0.3px;
                            }


#flex {
 display: flex;
       }

        aside {
         background-color: #1c347d;
         width: 200px;
         padding: 20px;
               }

        main {
         background-color: #B0DED6;
         flex: 1;
         padding: 20px;
         order: 2;
              }

        .volumes {
         gap: 15px;            
         width: 100%;        
                }

        .explanation {
         box-sizing: border-box;
         background-color: #FFFFFF;
         padding: 20px;
         border: 3.5px solid #E4E3E4;
         border-radius: 9px;
         text-align: justify;
         display: flex;       
         gap: 20px;
                      }

        .capa {
         width: 160px;
         height: auto;
            }

.leitura {
            font-family: 'Fredoka', sans-serif;
            font-weight: 600; 
            color: #624F75;
            font-size: 22px;
        }

        .txtec {
         font-size: 17px;
        }

        footer {
         background-color: #000000;
         height: 30px;
         display: flex;
         align-items: center;            
         padding: 20px 40px;            
                }

        .m {
         width: 60px;
         height: auto;
            }

            /* RCT */
@media (max-width: 768px) {
    #navbar {
        height: auto;
        background-image: none;
        padding: 10px 0;
    }

    #navbar ul {
        flex-direction: column;
        align-items: center;
        gap: 12px;
    }

    .explanation {
        flex-direction: column;
        align-items: center;
        text-align: left;
    }

    .capa {
        width: 200px;
    }

    main {
        padding: 15px;
    }

    footer {
        justify-content: center;
        padding: 15px 20px;
    }
}