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

html {
      font-size: 62.5%; /* 1rem = 10px */
}

body {
      font-family: "Lato", sans-serif;
      font-weight: 400;
      line-height: 1.7;
      color: #777;
}

.main-title {
      text-align: center;
      margin-top: 4rem;
      margin-bottom: 8rem;
      text-shadow: 1px 0px 1px #ccc, 0px 1px 1px #eee, 2px 1px 1px #ccc,
            1px 2px 1px #eee, 3px 2px 1px #ccc, 2px 3px 1px #eee,
            4px 3px 1px #ccc, 3px 4px 1px #eee, 5px 4px 1px #ccc,
            4px 5px 1px #eee, 6px 5px 1px #ccc, 5px 6px 1px #eee,
            7px 6px 1px #ccc;
}

.main-title h1 {
      font-size: 4rem;
      text-transform: uppercase;
      font-weight: 800;
      color: #555;
}

.main-title h2 {
      font-size: 3rem;
      font-weight: 300;
      text-transform: uppercase;
}

.svg-img {
      display: block;
      margin: auto;
}

svg {
      display: block;
      margin: auto;
}

#clock {
      animation: clockHand 5s infinite linear;

      transform-box: fill-box;
      transform-origin: bottom;
}

#leftTree,
#righTree {
      animation: tree 2s ease-in-out infinite alternate;
      transform-box: fill-box;
      transform-origin: bottom;
}

#man {
      animation: manBody 1s ease-in-out infinite alternate;
      transform-box: fill-box;
      transform-origin: bottom;
}

.logoflex {
      margin-block: 4rem;
      display: flex;
      justify-content: center;
}

.logo {
      width: 10rem;
}

#pc-circle {
      fill: #6ace66;
      stroke-width: 4;
      animation: change-light 4s linear infinite alternate;
}

.footer {
      position: absolute;
      bottom: 0;
      width: 100%;
      height: 35px;
      line-height: 35px;
      background-color: #f5f5f5;
      font-size: 1.3rem;
      font-style: italic;
}

@keyframes clockHand {
      from {
            transform: rotateZ(0deg);
      }
      from {
            transform: rotateZ(-360deg);
      }
}

@keyframes manBody {
      from {
            transform: rotateX(0deg);
      }
      to {
            transform: rotateX(10deg);
      }
}

@keyframes tree {
      from {
            transform: rotateZ(10deg);
      }
      to {
            transform: rotateZ(-20deg);
      }
}

@keyframes change-light {
      0% {
            stroke: #cd61f8;
      }
      25% {
            stroke: #6ace66;
      }
      75% {
            stroke: #2995c0;
      }
      100% {
            stroke: #e92949;
      }
}

/* Media Queries */

@media (min-width: 640px) {
      .main-title h1 {
            font-size: 4rem;
            text-transform: uppercase;
            font-weight: 700;
            color: #555;
      }

      .main-title h2 {
            font-size: 3rem;
            font-weight: 300;
            text-transform: uppercase;
      }
}

@media (min-width: 768px) {
      .main-title h1 {
            font-size: 5rem;
            text-transform: uppercase;
            font-weight: 800;
            color: #555;
      }

      .main-title h2 {
            font-size: 4rem;
            font-weight: 300;
            text-transform: uppercase;
      }
}

@media (min-width: 1024px) {
      .main-title h1 {
            font-size: 6rem;
            text-transform: uppercase;
            font-weight: 900;
            color: #555;
      }

      .main-title h2 {
            font-size: 5rem;
            font-weight: 300;
            text-transform: uppercase;
      }
}

@media (min-width: 1200px) {
      .main-title h1 {
            font-size: 7rem;
            text-transform: uppercase;
            font-weight: 900;
            color: #555;
      }

      .main-title h2 {
            font-size: 5rem;
            font-weight: 300;
            text-transform: uppercase;
      }

      .main-title {
            text-align: center;
            margin-top: 4rem;
            margin-bottom: 4rem;
      }
}