* {
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    background: rgb(3,3,17);
    background: linear-gradient(90deg, rgba(3,3,17,1) 0%, rgba(42,42,46,1) 71%);
    -webkit-background-clip: text;
    font-family: Franklin Gothic Medium;
    color: white;
  }

.title, .counter-plus,.counter-number, .counter-less, .reset {
    display: flex;
    align-items: center;
    justify-content: center;
}

.title, .counter {
    width: 100%;
    height: 33vh;
}

.reset {
    width: 100%;
    height: 34vh;
}


.title  h1 {
    font-size: 70px;
}

@media (max-width: 300px) {
    .title  h1 {
      font-size: 35px;
    }
}

@media (min-width: 301px) and (max-width: 600px) {
    .title  h1 {
      font-size: 45px;
    }
}

.counter {
    display: grid;
}

@media (max-width: 600px) {
    .counter {
        grid-template-columns: 20% 1fr 20%;
    }
}

@media (min-width: 601px) {
    .counter {
        grid-template-columns: 25% 1fr 25%;
    }
}

input[type=number] {
    font-size: 100px;
    text-align: center;
    width: 100%;
    border: none;
    outline: none;
}

@media (max-width: 300px) {
    input[type=number], .button-less, .button-plus {
        font-size: 50px;
    }
}

.button-less, .button-plus {
    width: 50%;
    height: 50%;
    text-align: center;
    border: solid;
    border-radius: 50%;
    font-size: 80px;
}

@media (max-width: 600px) {
    .button-less, .button-plus {
        width: 70%;
        font-size: 40px;
    }
}

.button-less:hover, .button-plus:hover, .button-reset:hover {
    cursor: pointer;
    color: orange;
}

.button-reset {
    width: 200px;
    height: 100px;
    border: solid;
    border-radius: 50%;
    font-size: xx-large;
}

@media (max-width: 300px) {
    .button-reset {
        width: 100px;
        height: 50px;
        font-size: 30px;
    }
}