* {
    padding: 0%;
    margin: 0%;
}
header {
    background-color: rgb(255, 198, 75);
    padding-bottom: 15px;
}
#back {
    position: fixed;
    top:24px;
    left: 15px;
}
#back:hover{
    background-color: rgb(255, 172, 48);
}
h1, h3 {
    text-align: center;
    color: rgb(85, 44, 17);
}
h1 {
    padding-top: 15px;
}
h2 {
    color: rgb(121, 65, 28);
    padding-top: 15px;
    padding-bottom: 15px;
}
#web {
    display: grid;
    grid-template-columns: 2fr 2fr 2fr;
    text-align: center;
    gap: 15px;
    padding-top: 15px;
    padding-left: 15px;
    padding-right: 15px;
}
button {
    background-color: rgb(255, 231, 122);
    border-radius: 15px;
    border-style: none;
    font-size: larger;
    height: 45px;
}
#click {
    animation: fadeIn 1s ease-in-out;
}
button:hover {
    background-color: rgb(255, 197, 71);
}
button a {
    text-decoration: none;
    padding: 20px;
    color: rgb(121, 80, 28);
}
@keyframes fadeIn {
    from {
      opacity: 0;
      transform: translateY(20px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
h1, h2, h3, a {
    font-family: 'Unbounded', cursive;
}
#projects, #API, #demos {
    background-color: rgb(255, 242, 185);
    border-radius: 15px;
    padding-bottom: 15px;
}
div {
    margin: 0 auto;
    animation: fadeIn1 3s ease-in-out;
}
@keyframes fadeIn1 {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 100;
        transform: translateY(0);
    }
}