style.css

/*! ----------- STYLESHEET RESET ----------- */
*,
::before,
::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/*! ----------- CSS CUSTOM VARIABLES DECLARATION -----------*/

:root {
  --clr-primary: #32c3ff;
  --clr-secondary: #fff;
  --clr-dark: #131313;

  --clr-btn-bg: #57e95c;
  --clr-stopBtn: #e23030;
  --clr-resetBtn: #e29403;

  --clr-author: #f8e056;

  --clr-outline: chartreuse;

  --font-timer: "Nunito";
  --font-secondary: "Roboto";
  --font-author: "Dancing Script", monospace;

  --html-clr: hsl(12, 73%, 51%);
  --css-clr: hsl(202, 73%, 51%);
  --js-clr: hsl(53, 87%, 53%);
}

/*! ----------- FOCUS STATES ----------- */

:focus {
  outline: 2px solid whitesmoke;
  outline-offset: 2px;
}

/*! ----------- TAGS ----------- */

html {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
    Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
}

html,
body {
  position: relative;
}

body {
  /* background: var(--clr-primary); */
  background: linear-gradient(320deg, #d299ec, #3092b5, #215bd7, #131f83);
  background-size: 400% 400%;
  animation: GradientLoop 30s ease-in-out infinite;

  color: var(--clr-secondary);
  display: grid;
  grid-auto-rows: auto 1fr auto;
  min-height: 100vh;
}

@keyframes GradientLoop {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

footer {
  position: absolute;
  width: 100%;
  bottom: 0;
  padding: 1.5em 1.5em;
  background-color: var(--clr-dark);
  text-align: center;
  font-style: italic;
}

h1 {
  text-align: center;
  margin: 1em auto;
  font-family: var(--font-secondary);
  font-size: 4em;
  font-weight: 300;
}

p {
  font-family: var(--font-timer), monospace;
  text-align: center;
  font-size: 3.5em;
}

button {
  background-color: var(--clr-btn-bg);
  font-size: 1.8em;
  letter-spacing: 0.4ch;
  font-weight: 700;
  padding: 0.8em 1.5em;
  border: none;
  color: var(--clr-secondary);
  text-align: center;
  margin: 2em auto 0;
  display: block;
  cursor: pointer;
}

/*! ----------- CLASSES ----------- */

.main-container {
  overflow: hidden;
  position: relative;
  padding-bottom: 100px;

  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  flex-wrap: wrap;
}

.author {
  font-family: var(--font-author);
  font-size: 1.3rem;
  color: var(--clr-author);
}

.bold {
  font-weight: 700;
}

.stop {
  background-color: var(--clr-stopBtn);
}

.setup {
  margin: 2em auto 0;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

/* Make the input number buttons disappear */
input[type="number"] {
  -webkit-appearance: textfield;
  -moz-appearance: textfield;
  appearance: textfield;
}

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
}

.seconds-container {
  margin-top: 1em;
}

.minutes-container,
.seconds-container {
  width: 300px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
}

.minutes-container > input,
.seconds-container > input {
  outline: 2px solid var(--clr-outline);
  border: none;
  padding: 0.7em 0.8em;
  font-size: 1.5rem;
  max-width: 8ch;
  border: 4px solid transparent;
  background-color: var(--clr-dark);
  color: var(--clr-secondary);
  font-family: var(--font-secondary);
  font-weight: 700;
  letter-spacing: 0.1ch;
}

.minutes-container > label,
.seconds-container > label {
  font-size: 1.9rem;
  font-family: var(--font-secondary);
  letter-spacing: 0.2ch;
  text-transform: uppercase;
}

.controls {
  padding: 0;
  font-size: 1.5rem;
  background-color: transparent;
  position: relative;
  margin: 0;
}

.minutes-increase-btn,
.seconds-increase-btn {
  position: absolute;
  top: 2px;
  right: 4px;
}
.minutes-decrease-btn,
.seconds-decrease-btn {
  position: absolute;
  right: 4px;
  bottom: 2px;
}

.btn-wrapper {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  width: 100%;
  max-width: 550px;
}

.btn-wrapper > button {
  margin: 1em auto;
  box-shadow: #1a0c6b63 0px 28px 90px 0px;
  border-radius: 5px;
}

.footer-html {
  color: var(--html-clr);
}
.footer-css {
  color: var(--css-clr);
}
.footer-js {
  color: var(--js-clr);
}

/*! ----------- ID's ----------- */

#time {
  font-family: var(--font-timer);
  font-size: 2.5em;
  filter: drop-shadow(2px 5px 1rem #5a5b66);
}

#upBtn {
  background: var(--clr-dark);
}
#downBtn {
  background: var(--clr-dark);
}

#resetBtn {
  background-color: var(--clr-resetBtn);
  display: none;
}

@media only screen and (max-width: 750px) {
  h1 {
    margin: 0.5em auto;
    font-size: 3.5em;
  }

  #time {
    font-size: 1.4em;
  }

  p {
    margin-top: 0.5em;
  }

  .btn-wrapper > button {
    margin: 1.8em auto;
    box-shadow: #1a0c6b63 0px 28px 90px 0px;
    border-radius: 5px;
    padding: 0.7em 1.1em;
    font-size: 1.4rem;
  }
}