/*
0 - 400px:          Phone portrait
400 - 600px:        Phone Landscape
600 - 800px:        Tablet portrait
800 - 1000px:       Tablet landscape
1000px - 1200px:    Laptop
1200 - 1800:        is where our normal styles apply
*/
/*
- phone-port
- phone-land
- tab-port
- tab-land
- laptop

1em = 16px
*/
@keyframes gradient {
  0% {
    background-position: 0% 50%; }
  50% {
    background-position: 100% 50%; }
  100% {
    background-position: 0% 50%; } }

@keyframes fadeInAnimation {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }

.hidden {
  visibility: hidden; }

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: inherit; }

html {
  box-sizing: border-box;
  font-size: 62.5%;
  user-select: none; }

body {
  font-family: "Nunito", sans-serif;
  line-height: 1.6;
  background-image: linear-gradient(-45deg, #dbe2ef, #3f72af, #112d4e, #033252, #0f4c75, #3282b8, #549ed0);
  background-size: 300% 300%;
  animation: gradient 40s ease infinite; }

.container {
  display: grid;
  grid-template-rows: 10dvh calc(100dvh - 10dvh);
  justify-items: center;
  align-items: center; }

.heading h1 {
  font-size: 5rem;
  font-weight: 700;
  background-image: linear-gradient(to right, #e3fdfd, #cbf1f5, #a6e3e9, #71c9ce);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent; }
  @media only screen and (max-width: 25em) {
    .heading h1 {
      font-size: 4rem; } }

#time {
  display: grid;
  grid-template-columns: [left-start] 1fr [left-end center-start] max-content [center-end right-start] 1fr [right-end];
  align-items: center;
  justify-items: center;
  grid-row-gap: 5dvh;
  grid-column-gap: 15vw; }
  @media only screen and (max-width: 37.5em) {
    #time {
      grid-column-gap: 10vw; } }
  @media only screen and (max-width: 25em) {
    #time {
      grid-row-gap: 4dvh;
      grid-column-gap: 7vw; } }
  #time__mins {
    grid-column: center-start;
    grid-row: 2;
    font-size: 30dvh;
    font-weight: 600;
    color: #0196a6; }
    @media only screen and (max-width: 75em) {
      #time__mins {
        font-size: 25dvh; } }
    @media only screen and (max-width: 62.5em) {
      #time__mins {
        font-size: 20dvh; } }
    @media only screen and (max-width: 50em) {
      #time__mins {
        font-size: 15dvh; } }
    @media only screen and (max-width: 37.5em) {
      #time__mins {
        font-size: 12dvh; } }
    @media only screen and (max-width: 25em) {
      #time__mins {
        font-size: 9dvh; } }
  #time__secs {
    grid-column: right-start;
    grid-row: 2;
    font-size: 15dvh;
    font-weight: 200;
    color: #04dfe3; }
    @media only screen and (max-width: 75em) {
      #time__secs {
        font-size: 12.5dvh; } }
    @media only screen and (max-width: 62.5em) {
      #time__secs {
        font-size: 10dvh; } }
    @media only screen and (max-width: 50em) {
      #time__secs {
        font-size: 7.5dvh; } }
    @media only screen and (max-width: 37.5em) {
      #time__secs {
        font-size: 6dvh; } }
    @media only screen and (max-width: 25em) {
      #time__secs {
        font-size: 4.5dvh; } }
  #time__enter, #time__reset {
    grid-column: center-start;
    grid-row: 1; }
  #time__increment {
    grid-column: left-start;
    grid-row: 2; }
  #time__decrement {
    grid-column: right-start;
    grid-row: 2; }
  #time__start, #time__pause {
    grid-column: center-start;
    grid-row: 3; }
  #time__decrement, #time__increment {
    background-color: #04dfe3;
    font-family: "Josefin Sans", sans-serif;
    color: #0196a6;
    border: none;
    border-radius: 0;
    cursor: pointer;
    transition: all 0.3s;
    padding: 2rem;
    font-size: 8dvh; }
    @media only screen and (max-width: 50em) {
      #time__decrement, #time__increment {
        padding: 0.4rem 1.3rem;
        font-size: 7.5dvh; } }
    @media only screen and (max-width: 37.5em) {
      #time__decrement, #time__increment {
        padding: 0rem 1rem;
        font-size: 6dvh; } }
    @media only screen and (max-width: 25em) {
      #time__decrement, #time__increment {
        padding: 0 0.5rem;
        font-size: 3.5dvh; } }
    @media only screen and (min-width: 62.5em) {
      #time__decrement, #time__increment {
        filter: drop-shadow(2px 2px 10px #0196a6); }
        #time__decrement:hover, #time__increment:hover {
          background-color: #005862; }
        #time__decrement:active, #time__increment:active {
          filter: drop-shadow(0px 0px 0px #0196a6); } }
  #time__enter, #time__reset, #time__pause, #time__start {
    background-color: #04dfe3;
    font-family: "Josefin Sans", sans-serif;
    color: #0196a6;
    border: none;
    border-radius: 0;
    cursor: pointer;
    transition: all 0.3s;
    padding: 1.3rem;
    font-size: 5dvh; }
    @media only screen and (max-width: 50em) {
      #time__enter, #time__reset, #time__pause, #time__start {
        padding: 1rem;
        font-size: 4dvh; } }
    @media only screen and (max-width: 37.5em) {
      #time__enter, #time__reset, #time__pause, #time__start {
        font-size: 3dvh; } }
    @media only screen and (max-width: 25em) {
      #time__enter, #time__reset, #time__pause, #time__start {
        padding: 0.8rem;
        font-size: 2.5dvh; } }
    @media only screen and (min-width: 62.5em) {
      #time__enter:hover, #time__reset:hover, #time__pause:hover, #time__start:hover {
        transform: scale(1.03); } }
  #time > * {
    animation: fadeInAnimation 3s; }