@import url("https://fonts.googleapis.com/css2?family=Abel&family=Poppins:ital,wght@0,200;0,400;1,100&display=swap");

* {
  margin: 0px;
  box-sizing: border-box;
}
body {
  background-color: rgba(208, 208, 208, 0.1);
}
section.data {
    text-align: center;
    margin-top: 16px;
    font-size: 19px;
    font-family: cursive;
}
.audio {
    padding: 15px 0px;
}

nav.nav-container {
    background-color: aquamarine;
    height: 12vh;
    border-radius: 0px 0px 5px 5px;
    display: flex;
    justify-content: center;
    align-items: center;
}
nav.nav-container h3 {
    font-family: cursive;
    font-size: 25px;
}

.input-section h2 {
  font-family: cursive;
  text-align: center;
  margin: 6%;
}

.input-section input[type="text"] {
    width: 50%;
    height: 45px;
    font-size: 16px;
    padding: 10px;
}
.input-section button#search {
    background: paleturquoise;
    border: none;
    width: 101px;
    border-radius: 3px 11px 11px 3px;
    height: 48px;
    font-family: cursive;
    font-size: 15px;
    margin-left: -4px;
    margin-top: -2px;
    cursor: pointer;
    z-index: 0;
}
.input-section .horizontal {
  display: flex;
  justify-content: center;
}

section.data p.def {
    text-align: center;
    font-size: 18px;
    font-family: cursive;
    padding: 30px 138px;
}

/* HTML DOMTokenList to the webpages*/
.suggested {
  background: #8794f4;
  color: white;
  padding: 2px 10px;
  border-radius: 4px;
  margin-right: 10px;
  margin-top: 5px;
  display: inline-block;
  text-align: center;
}

.audio {
  text-align: center;
}
.main-container {
  margin: 6%;
  background-color: white;
  box-shadow: 2px 6px 15px 0px #aaaaaa;
}

/* responsive for button */
@media (max-width: 650px) {
    .input-section input[type="text"] {
        width: 65%;
        height: 33px;
        font-size: 14px;
        padding: 10px;
    }
    .input-section button#search {
        background: paleturquoise;
        border: none;
        width: 89px;
        border-radius: 3px 11px 11px 3px;
        height: 36px;
        font-family: cursive;
        font-size: 15px;
        margin-left: -4px;
        margin-top: -2px;
        cursor: pointer;
        z-index: 0;
    }
    .input-section h2 {
        font-family: cursive;
        text-align: center;
        margin: 6%;
        font-size: 18px;
    }nav.nav-container h3 {
        font-family: cursive;
        font-size: 20px;
    }
    section.data {
        text-align: center;
        margin-top: 16px;
        font-size: 17px;
        font-family: cursive;
    }
}