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

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

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

.main-title h1 {
font-size: 3rem; /* ~30px */
font-weight: 600;
color: white;
}


.main-title h2 {
font-size: 2rem;
font-weight: 400;
color: white;
}


.main-title h3 {
font-size: 1.6rem;
font-weight: 400;
color: white;
}


.svg-img, svg {
max-width: 100%;
height: auto;
display: block;
margin: auto;
}


.footer {
margin-top: auto;
width: 100%;
height: 40px;
line-height: 40px;
background-color: #f5f5f5;
font-size: 1.4rem;
text-align: center;
}


/* Larger screens */
@media (min-width: 768px) {
.main-title h1 { font-size: 5rem; }
.main-title h2 { font-size: 3rem; }
}


@media (min-width: 1024px) {
.main-title h1 { font-size: 7rem; }
.main-title h2 { font-size: 4rem; }
}


@media (min-width: 1200px) {
.main-title h1 { font-size: 8rem; }
.main-title h2 { font-size: 5rem; }
}


#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;
}

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


body {
font-family: "Lato", sans-serif;
font-weight: 400;
line-height: 1.7;
color: #333;
min-height: 100vh;
display: flex;
flex-direction: column;
background-image: url('bg.jpg');
background-size: cover;
background-repeat: no-repeat;
}

@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: 5rem; font-weight: 500; color: #555;}
.main-title h2 { font-size: 3rem;font-weight: 300; }
 
}
     
@media (min-width: 1200px) {
	.main-title h1 { font-size: 8rem; }
	.main-title h2 { font-size: 5rem; }
}