html {
    background-color: rgb(244, 216, 250);
    color: rgb(255, 128, 0);
    font-family: "gunter", sans-serif;
    font-weight: 400;
    font-style: normal;
}
a {
    color: rgb(0, 84, 140);
}

.contents ul{
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    list-style: none;
    padding: 0;

    font-family: "pacaembu", sans-serif;
font-weight: 400;
font-style: normal;

}
.contents li {
    background-color: #faf4fd;   
    padding: 10px;
    border-radius: 12px;
    flex: 1 1 200px;            
    box-sizing: border-box;
    
}
.contents li:hover {
    transform: translateY(-4px);
    transition: 0.2s ease; }

header {
    text-align: center;
    font-size: larger;
}
.contents {
    border: solid rgb(255, 128, 0);
    border-radius: 10px;
    border-width: 4px;
    padding: 7px;
    margin: 20px;
}
.title {
    margin: 20px;
}


h3 {
    text-align: center;
    font-family: "pacaembu", sans-serif;
font-weight: 400;
font-style: normal;
color: rgb(0, 84, 140);
}

.words {
    margin-top: 8px;
}

@media (max-width: 700px) {

  body {
    text-align: center;
  }

  h2 {
    text-align: center;
  }

  .contents ul {
    justify-content: center;   /* centers the flex items horizontally */
  }

  .contents li {
    text-align: center;  
          /* centers text inside boxes */
  }

  .title, .contents {
    margin-left: auto;
    margin-right: auto;
  }

  .contents {
    margin: 40px 30px;         /* more space around the whole section */
    padding: 10px;             /* optional: adjust container padding */
  }


}