@font-face {
    font-family: Metropolis-Bold;
    src: url(../assets/Metropolis-Bold.otf);
}
body {
    font-family: 'Metropolis-Bold';
    background-color: #F6FEAA;
    text-align: center;
    color: #333;
    margin: 0px 10%;
}
input {
    background-color: transparent;
    outline: none;
    border: none;
    height: 0px;
    width: 0px;
}
button {
    font-family: 'Metropolis-Bold';
    background-color: transparent;
    border: 2px solid #333;
    padding: 12px 23px;
    margin-top: 30px;
    transition: 0.4s;
    font-size: 14px;
    cursor: pointer;
    color: #333;
}
h1 {
    margin: 84px 0px 100px 0px;
    font-size: 55px;
}
h2 { font-size: 40px; }
p { font-size: 30px; }
#words {
    margin: 0 10px;
    color: #999;
}
.bg {
    background-color: #444;
    padding: 34px 0;
    margin: 0px -12.5%;
}
@media screen and (max-width: 580px) {
    h1 { font-size: 50px; }
    h2 { font-size: 35px; }
    p { font-size: 25px; }
}
@media screen and (max-width: 400px) {
    h1 { font-size: 47px; }
    h2 { font-size: 32px; }
    p { font-size: 22px; }
}
@media screen and (max-width: 360px) {
    .bg { margin: 0px -7.5%;}
    body { margin: 0px 5%; }
    h1 { font-size: 45px; }
    h2 { font-size: 29px; }
    p { font-size: 19px; }

}