@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;

    background-image: linear-gradient(155deg, rgb(229, 176, 124) 0%, rgb(229, 176, 124) 41%, rgb(198, 157, 133) 41%, rgb(198, 157, 133) 42%, rgb(167, 139, 142) 42%, rgb(167, 139, 142) 44%, rgb(136, 120, 151) 44%, rgb(136, 120, 151) 45%, rgb(105, 101, 159) 45%, rgb(105, 101, 159) 61%, rgb(74, 83, 168) 61%, rgb(74, 83, 168) 78%, rgb(43, 64, 177) 78%, rgb(43, 64, 177) 100%), linear-gradient(322deg, rgb(229, 176, 124) 0%, rgb(229, 176, 124) 41%, rgb(198, 157, 133) 41%, rgb(198, 157, 133) 42%, rgb(167, 139, 142) 42%, rgb(167, 139, 142) 44%, rgb(136, 120, 151) 44%, rgb(136, 120, 151) 45%, rgb(105, 101, 159) 45%, rgb(105, 101, 159) 61%, rgb(74, 83, 168) 61%, rgb(74, 83, 168) 78%, rgb(43, 64, 177) 78%, rgb(43, 64, 177) 100%), linear-gradient(33deg, rgb(229, 176, 124) 0%, rgb(229, 176, 124) 41%, rgb(198, 157, 133) 41%, rgb(198, 157, 133) 42%, rgb(167, 139, 142) 42%, rgb(167, 139, 142) 44%, rgb(136, 120, 151) 44%, rgb(136, 120, 151) 45%, rgb(105, 101, 159) 45%, rgb(105, 101, 159) 61%, rgb(74, 83, 168) 61%, rgb(74, 83, 168) 78%, rgb(43, 64, 177) 78%, rgb(43, 64, 177) 100%), linear-gradient(315deg, rgb(229, 176, 124) 0%, rgb(229, 176, 124) 41%, rgb(198, 157, 133) 41%, rgb(198, 157, 133) 42%, rgb(167, 139, 142) 42%, rgb(167, 139, 142) 44%, rgb(136, 120, 151) 44%, rgb(136, 120, 151) 45%, rgb(105, 101, 159) 45%, rgb(105, 101, 159) 61%, rgb(74, 83, 168) 61%, rgb(74, 83, 168) 78%, rgb(43, 64, 177) 78%, rgb(43, 64, 177) 100%), linear-gradient(41deg, rgb(229, 176, 124) 0%, rgb(229, 176, 124) 41%, rgb(198, 157, 133) 41%, rgb(198, 157, 133) 42%, rgb(167, 139, 142) 42%, rgb(167, 139, 142) 44%, rgb(136, 120, 151) 44%, rgb(136, 120, 151) 45%, rgb(105, 101, 159) 45%, rgb(105, 101, 159) 61%, rgb(74, 83, 168) 61%, rgb(74, 83, 168) 78%, rgb(43, 64, 177) 78%, rgb(43, 64, 177) 100%), linear-gradient(90deg, rgb(192, 100, 79), rgb(56, 158, 172));
    background-blend-mode: overlay, overlay, overlay, overlay, overlay, normal;
}

.container {
    width: 250px;
    height: 250px;
    background: #ffd000;
    color: rgb(0, 0, 0);
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    position: relative;
    border-radius: 15px;
    box-shadow: 0 10px 15px rgba(0, 0, 0, .6);
}

.counter {
    font-size: 62px;
}

.heading {
    font-family: 'Poppins', sans-serif;
    font-size: 36px;
    font-weight: bold;
    position: absolute;
    top: 20px;
}

button {
    width: 70px;
    height: 70px;
    position: absolute;
    cursor: pointer;
    font-size: 28px;
    background: #fff;
    color: rgb(34, 34, 34);
    border: none;
    border-radius: 50%;
    box-shadow: 0 0 10px rgb(51, 51, 51, 0.158);
}

.decr {
    left: -14%;
}

.incr {
    right: -13%;
}