#logo {
  position: relative;
  width: 250px;
  margin-top: 3%;
  left: 5%;
  transition: transform 0.3s ease-in-out; 
}

@media screen and (max-width: 900px) {
#logo {
  position: relative;
  width: 200px;
  margin-top: 3%;
  left: 5%;
  transition: transform 0.3s ease-in-out; 
} 
}

/* Common styles for h1 and p */
h1 {
  font-family: 'Cabin', sans-serif;
  font-weight: 700;
  color: black;
  text-align: center;
  font-size: 9vw;
  margin: 2% auto 3%;
}

/* Base style for p */
p {
  font-family: 'Quicksand', sans-serif;
  font-weight: 400;
  color: black;
  position: relative;
  width: 70%;
  text-align: center;
  font-size: 1.75vw;
  line-height: 3.5vw;
  margin: 3% auto 4%;
}

@media screen and (max-width: 900px) {
h1 {
  font-size: 14vw;
  margin: 3% auto 3%;
}

p {
  font-size: 4vw;
  line-height: 6.5vw;
  margin: 3% auto 10%;

} 
}

/* Container styles */
.container {
  position: absolute;
  background: none;
  transform: translate(-0%, -0%);
  z-index: 101;
  width: 100%;
  height: 100%;
  display: block;
  transition: background-color 0.5s ease;
}

.container:hover {
  background: rgba(0, 0, 0, 0.5);
}

/* Section styles */
.section {
  margin: 3% 5.5%;
}


/* Entertainment, Magazine, Fashion, Campaign, Web, and App styles */
#entertainment, #magazine, #fashion, #campaign, #web, #app {
  position: relative;
  float: left;
  width: 50%;
  height: 30%;
}


#entertainment img, #magazine img, #fashion img, #campaign img, #web img, #app img {
  width: 100%;
  height: 100%;
  display: block;
  z-index: 1;
}

#entertainment h1, #magazine h1, #fashion h1, #campaign h1, #web h1, #app h1 {
  position: absolute;
  font-size: 4vw;
  color: white;
  text-align: center;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -70%);
  z-index: 103;
  text-shadow: 1px 1px 8px #000000;
}

@media screen and (max-width: 900px) {
	  #entertainment, #magazine, #fashion, #campaign, #web, #app {
    width: 100%;
  }

  #entertainment h1, #magazine h1, #fashion h1, #campaign h1, #web h1, #app h1 {
  font-size: 10vw;
  line-height: 10vw;

}
}

footer {

  position: relative;
  left: auto;
  right: auto;
  font-family: 'Quicksand', sans-serif;
  font-weight: 400;
  font-size: 12px;
  color: black;
  margin-bottom: 3%;

}


@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
  footer {

  position: relative;
  left: auto;
  right: auto;
  font-family: 'Quicksand', sans-serif;
  font-weight: 400;
  font-size: 20px;
  color: black;
  margin-bottom: 3%;

}
}