@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Lobster&family=Roboto+Mono:wght@300&display=swap');


html {
  background: #53d2dc;
  font-family: 'Prompt', sans-serif;
}

#bull-image{
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 100px;
    padding-top: 40px;
}
#response{
    font-size: 30px;
    color:#ff743d;
    font-family: 'Roboto Mono', monospace;
}
h1 {
    text-align: center;
    margin: 0 auto;
    font-family: 'Lobster', cursive;
    font-size: 50px;
    color: white;
    margin-top: 20px;
}

#container {
    height: 200px;
    width: 700px;
    margin: 0 auto;
    background-color: #53d3dc00;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: repeat(3, 1fr);
}

/*timers*/
.label {
    align-self: center;
    justify-self: center;

    font-size: 30px;
    font-weight: bold;
}

#work {
    grid-area: 1 / 2 / 1 / 2;
}
#break {
    grid-area: 1 / 4 / 1 / 4;
}
#points {
    grid-area: 1 / 3 / 1 / 3;
}


.timer {
    display: flex;
    align-self: center;
    justify-self: center;

    font-size: 30px;
    font-weight: bold;
}

p {
    margin: 0;
    padding: 0;
    letter-spacing: 5px;
    font-family: 'Roboto Mono', monospace;
}

#counter {
    grid-area: 2 / 3 / 2 / 3;
    color: red;
}

#work-timer {
    grid-area: 2 / 2 / 2 / 2;
}

#break-timer {
    grid-area: 2 / 4 / 2 / 4;
}

/*buttons*/

#start, #stop{
    margin-right: 30px;
}
#start{
    background-color: #7af8a0;
    border: 3px solid #7af8a0;
}
#stop{
    background-color: #f87a7a;
    border: 3px solid #f87a7a;
}
#reset{
    background-color: #f0f87a;
    border: 3px solid #f0f87a;
}
#start, #stop, #reset{
    width: 20%;
    height: 50px;
    font-size: 30px;
    border-radius: 10px;
    box-shadow: inset 10px 10px 10px 1px rgba(48, 48, 48, 0.199);
    font-family: 'Bebas Neue', Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
    color: white;
    transition: 0.15s;
}
#start:hover, #stop:hover, #reset:hover{
    transform: scale(1.2);
    cursor: pointer;
    box-shadow: 5px 5px 5px 5px rgba(87, 87, 87, 0.596);

}
.buttons{
    text-align: center;
    padding: 0px 40px;
    font-weight: 900px;
    
}








/*@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Lobster&display=swap');
body{
    background: #53d2dc;
    font-family: 'Prompt', sans-serif;
}

.title{
    text-align: center;
    margin: 0 auto;
    font-family: 'Lobster', cursive;
    font-size: 50px;
    color: white;
    margin-top: 50px;
}




.bull-image{
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 100px;
    padding: 30px 0px;
}


.start, .stop{
    margin-right: 30px;
}
.start{
    background-color: #7af8a0;
    border: 3px solid #7af8a0;
}
.stop{
    background-color: #f87a7a;
    border: 3px solid #f87a7a;
}
.reset{
    background-color: #f0f87a;
    border: 3px solid #f0f87a;
}
.start, .stop, .reset{
    width: 20%;
    height: 50px;
    font-size: 30px;
    border-radius: 10px;
    box-shadow: inset 10px 10px 10px 1px rgba(48, 48, 48, 0.199);
    font-family: 'Bebas Neue', cursive;
    color: white;
    transition: 0.15s;
}
.start:hover, .stop:hover, .reset:hover{
    transform: scale(1.2);
    cursor: pointer;
    box-shadow: 5px 5px 5px 5px rgba(87, 87, 87, 0.596);

}
.buttons{
    text-align: center;
    padding: 30px 40px;
    font-weight: 900px;
    
}
.clock{
    text-align: center;
}

.break, .session{
    width: 20%;
    height: 50px;
    font-size: 30px;
    border-radius: 10px;
    color: white;
    margin-right: 30px;
    transition: 0.15s;
}

.break:hover, .session:hover{
    transform: scale(1.2);
    cursor: pointer;
}

.break-buttons{
    text-align: center;
    padding: 30px 40px;
}*/