style.css

body {
	background-color: #DF3B57;
	font-family: 'Rubik', sans-serif;
	margin: 0 auto;
}

.container {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  margin: 1em;
}

.logo {
  width: 5em;
  height: auto;
}

svg {
  clip-path: circle(49% at 50% 50%);
  -webkit-clip-path: circle(49% at 50% 50%);
}

.bgclass {
  fill: #95b8d1;
}

.towerclass {
  fill: black;
}

#cloud {
  animation: nudge 10s linear normal;
  animation-iteration-count: infinite;
  fill: white;
}

@keyframes nudge {
  0% {
    transform: translateX(-800px);
  }
  100% {
    transform: translateX(800px);
  }
}

h1 {
  padding: 0 0 0 0.25em;
  margin: 0;
  font-family: "Chivo", sans-serif;
  font-size: 2em;
  line-height: 1em;
}

nav {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
}

nav li {
  list-style-type: none;
/*   width: 50px;
  outline: solid green; */
}

nav a {
	padding: 0 1.5em 0 1.5em;
  text-decoration: none;
}

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 1.5em 1.5em;
  padding: 1.5em;
}

.module {
	object-fit: cover;
}

img {
	max-width: 100%;
	height: auto;
}

/* Safari/Animation fix */

/* Safari 11+ */
@media not all and (min-resolution: 0.001dpcm) {
  @supports (-webkit-appearance: none) and (stroke-color: transparent) {
    #cloud {
      animation: none;
    }
  }
}

/* Safari 10.1 */
@media not all and (min-resolution: 0.001dpcm) {
  @supports (-webkit-appearance: none) and (not (stroke-color: transparent)) {
    #cloud {
      animation: none;
    }
  }
}

/* Safari 6.1-10.0 (not 10.1) */
@media screen and (min-color-index: 0) and(-webkit-min-device-pixel-ratio:0) {
  @media {
    #cloud {
      animation: none;
    }
  }
}

@media only screen  
  and (max-device-width: 320px)
  and (-webkit-min-device-pixel-ratio: 2) {
  	.grid {
  		grid-template-columns: 1fr;
  	}
  	.module {
  		justify-self: center;
  	}
}

/* ----------- iPhone 4 and 4S ----------- */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 480px)
  and (-webkit-min-device-pixel-ratio: 2) {
  	.grid {
  		grid-template-columns: 1fr 1fr;
  	}
    .container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    }
    .logo {
      width: 50%;
      height: auto;
    }
    h1 {
      padding: 0.25em 0;
      font-size: 6em;
      line-height: 1em;
      text-align: center;
    }
}

/* ----------- iPhone 5, 5S, 5C and 5SE ----------- */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 568px)
  and (-webkit-min-device-pixel-ratio: 2) {
  	.grid {
  		grid-template-columns: 1fr 1fr;
  	}
}

/* ----------- iPhone 6, 6S, 7 and 8 ----------- */
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 667px) 
  and (-webkit-min-device-pixel-ratio: 2) { 
  	.grid {
  		grid-template-columns: 1fr 1fr;
  	}
    .container {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }
    .logo {
      width: 50%;
      height: auto;
    }
    h1 {
      padding: 0.25em 0;
      font-size: 6em;
      line-height: 1em;
      text-align: center;
    }
}

/* ----------- iPhone 6+, 7+ and 8+ ----------- */
@media only screen 
  and (min-device-width: 414px) 
  and (max-device-width: 736px) 
  and (-webkit-min-device-pixel-ratio: 3) { 
  	.grid {
  		grid-template-columns: 1fr 1fr;
  	}
}

/* ----------- iPhone X ----------- */
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 812px) 
  and (-webkit-min-device-pixel-ratio: 3) { 
  	.grid {
  		grid-template-columns: 1fr 1fr;
  	}
    .container {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }
    .logo {
      width: 50%;
      height: auto;
    }
    h1 {
      padding: 0.25em 0;
      font-size: 6em;
      line-height: 1em;
      text-align: center;
    }
}

/* ----------- iPad 1, 2, Mini and Air ----------- */
/*@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (-webkit-min-device-pixel-ratio: 1) {
  	.grid {
  		grid-template-columns: 1fr 1fr 1fr 1fr;
  	}
}*/

/* ----------- iPad 3, 4 and Pro 9.7" ----------- */
/*@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (-webkit-min-device-pixel-ratio: 2) {
  	.grid {
  		grid-template-columns: 1fr 1fr 1fr 1fr;
  	}
}*/

/* ----------- iPad Pro 10.5" ----------- */
/*@media only screen 
  and (min-device-width: 834px) 
  and (max-device-width: 1112px)
  and (-webkit-min-device-pixel-ratio: 2) {
  	.grid {
  		grid-template-columns: 1fr 1fr 1fr 1fr;
  	}
}*/

/* ----------- iPad Pro 12.9" ----------- */
/*@media only screen 
  and (min-device-width: 1024px) 
  and (max-device-width: 1366px)
  and (-webkit-min-device-pixel-ratio: 2) {
  	.grid {
  		grid-template-columns: 1fr 1fr 1fr 1fr;
  	}
}*/

/* ----------- Retina Screens ----------- */
/*@media screen 
  and (min-device-width: 1200px) 
  and (max-device-width: 1600px) 
  and (-webkit-min-device-pixel-ratio: 2)
  and (min-resolution: 192dpi) { 
  	.grid {
  		grid-template-columns: 1fr 1fr 1fr 1fr;
  	}
}*/

/* ----------- Width not device width ----------- */
@media only screen 
  and (min-width: 200px) 
  and (max-width: 800px) { 
  	.grid {
  		grid-template-columns: 1fr 1fr;
  	}
}