body {
  background-image: url(https://media.istockphoto.com/id/1070923526/vector/abstract-background-blurred-dark-blue-and-purple-backdrop-smooth-banner-template-easy.jpg?s=612x612&w=0&k=20&c=MHeB4YFK3-OxRsmZYCAkll-BzYj53FPYSMismFmuNLU=);
  background-position: center;
  background-size: cover;
    font: 1.2em Helvetica;
  
    margin: 0 3%;
  
    background-color: rgba(255,0,80,0.2);
  
  }
  
  
  
  h1 {
  
    font-size: 1.8em; /* bagaimana kalau satuan px, rem, vw, wh, %  */
    color: white;
    margin: .9em 0 0 0;
    font-family: 'Oswald';
  }
  
  
  
  h2 {
  
    font-size: 1.5em;
    color: white;
    margin: 1.5em 0 0 0;
    font-family: 'Oswald';font-size: 22px;
  
  }
  
  h3{
    color: white;
    font-family: 'Oswald';font-size: 22px;
  }
  h4{
    color:white;
    font-family: 'Oswald';font-size: 22px;
  }
  abbr {
    
    color: whitesmoke;
    text-decoration: underline;
  }
  a{
    color: white;
    font-family: 'Oswald';font-size: 22px;
  }
  p{
      color: white;
      font-family: 'Oswald';font-size: 22px;
  }
  .photoArea {
  
    background: black;
  
    margin: 0px 10px 25px 0px; /* urutan: atas kanan bawah kiri */
  
    padding: 10px; /* jarak dari border ke content */
  
    text-align: center;  /* membuat posisi gambar/text di tengah */
  
  }
  
  
  
  .img {
  
    width: 90%; /* lebar gambar di class photoArea */
  
    border: 3px solid #eee;
  
  }
  .td,img{
    content: url();
    width: 90%; /* lebar gambar di class photoArea */
    content: url(https://media.istockphoto.com/id/1070923526/vector/abstract-background-blurred-dark-blue-and-purple-backdrop-smooth-banner-template-easy.jpg?s=612x612&w=0&k=20&c=MHeB4YFK3-OxRsmZYCAkll-BzYj53FPYSMismFmuNLU=);
    border: 3px solid #eee;
    margin: 0px 10px 25px 0px; /* urutan: atas kanan bawah kiri */
    padding: 10px; /* jarak dari border ke content */
    text-align: center;  /* membuat posisi gambar/text di tengah */
  
  }
  
  
  
  .caption {
  
    font-size: .8em;
  
    color: white;
  
  }
  
  
  @media screen and (min-width: 794px) {
  
    body {
      background-image: url(https://media.istockphoto.com/id/1070923526/vector/abstract-background-blurred-dark-blue-and-purple-backdrop-smooth-banner-template-easy.jpg?s=612x612&w=0&k=20&c=MHeB4YFK3-OxRsmZYCAkll-BzYj53FPYSMismFmuNLU=);
      background-position: center;
      background-size: cover;
  
      max-width:  1000px ;
  
    }
  
    
  
    .td,img{
      content: url();
      width: 200px; /* lebar gambar di class photoArea */
      content: url(https://media.istockphoto.com/id/1070923526/vector/abstract-background-blurred-dark-blue-and-purple-backdrop-smooth-banner-template-easy.jpg?s=612x612&w=0&k=20&c=MHeB4YFK3-OxRsmZYCAkll-BzYj53FPYSMismFmuNLU=);
      border: 3px solid #eee;
      margin: 2.5%; /* urutan: atas kanan bawah kiri */
      padding: 10px; /* jarak dari border ke content */
      float: left;
      text-align: center;  /* membuat posisi gambar/text di tengah */
    
    }
  
  }
  
  
  
  
  
  @media screen and (min-width: 1020px) {
  
    body {
  
      background-image: url(https://media.istockphoto.com/id/1070923526/vector/abstract-background-blurred-dark-blue-and-purple-backdrop-smooth-banner-template-easy.jpg?s=612x612&w=0&k=20&c=MHeB4YFK3-OxRsmZYCAkll-BzYj53FPYSMismFmuNLU=);
      background-position: center;
      background-size: cover;
  
      max-width: 100% ; 
  
    }
  
    .td,img{
      content: url();
      margin-right: 1.5%;
      width: 10%; /* lebar gambar di class photoArea */
      content: url(https://media.istockphoto.com/id/1070923526/vector/abstract-background-blurred-dark-blue-and-purple-backdrop-smooth-banner-template-easy.jpg?s=612x612&w=0&k=20&c=MHeB4YFK3-OxRsmZYCAkll-BzYj53FPYSMismFmuNLU=);
      border: 3px solid #eee;
      padding: 10px; /* jarak dari border ke content */
      text-align: center;  /* membuat posisi gambar/text di tengah */
    
    }
    
  
  }
.nav-logo-title{
  align-items: left;
  content: url(https://www.graphicpie.com/wp-content/uploads/2020/11/among-us-logo-png-1-1024x584.png);
  shape-outside: inset(25cm round 75cm);
  height: 50px;
  margin-left: 20px ;
  margin-top: 15px;
}

.page-wrapper nav ul li{
  background-position: center;
  padding-left: 60px;
  display: inline-block;
  margin: 100 px;
  color: white;
  list-style: none;
  text-decoration: none;
}
.page-wrapper nav ul li a{
  text-decoration: none;
  display: inline-block;
  align-self: center;
}
.page-wrapper nav ul{
  margin-left: 40px;
  flex : 1;
  text-align: right;
}
.page-wrapper nav{
  align-self: right;
  display: flex;
  height: 12%;
  flex:1;
  text-align: left;
  font-weight: bold;
  padding-left: 8%;
  padding-right: 8%;
  color: white;
  background-image: url(https://media.istockphoto.com/id/1070923526/vector/abstract-background-blurred-dark-blue-and-purple-backdrop-smooth-banner-template-easy.jpg?s=612x612&w=0&k=20&c=MHeB4YFK3-OxRsmZYCAkll-BzYj53FPYSMismFmuNLU=);
  background-size: cover;
  transition: transform 0.5s;
}
.page-wrapper aside{
  align-self: center;
  display: flex;
  height: 12%;
  flex:1;
  text-align: center;
  font-weight: bold;
  flex-direction: column;
  color: white;
  background-image: url(https://media.istockphoto.com/id/1070923526/vector/abstract-background-blurred-dark-blue-and-purple-backdrop-smooth-banner-template-easy.jpg?s=612x612&w=0&k=20&c=MHeB4YFK3-OxRsmZYCAkll-BzYj53FPYSMismFmuNLU=);
  background-size: cover;

}
.page-wrapper aside ul li{
  background-size: cover;
  background-position: center;
  padding-left: 10px;
  display: inline-block;
  margin: 100 pc;
  color: white;
}
.page-wrapper aside ul li a{
  text-decoration: none;
  text-align: left;
}
.page-wrapper aside ul{
  margin-left: 40px;
  flex : 1;
  text-align: center;
}
#header{

}
#content{
  background-image: url(https://media.istockphoto.com/id/1134068329/photo/violet-purple-and-navy-blue-defocused-blurred-motion-gradient-abstract-background.jpg?s=612x612&w=0&k=20&c=wLmYKhGgFtyYgBvn5UOJ0ZjPNAj9MYxg6nrYbHRQAHc=);
  background-size: cover;
}
.header-filler{
  margin: 10px;
}
.footer-form{
  margin-right: 14px;
  background-image: url(https://media.istockphoto.com/id/1134068329/photo/violet-purple-and-navy-blue-defocused-blurred-motion-gradient-abstract-background.jpg?s=612x612&w=0&k=20&c=wLmYKhGgFtyYgBvn5UOJ0ZjPNAj9MYxg6nrYbHRQAHc=);
  background-size: cover;
  width: 500px;
  border: 3px solid #eee;
}
label{
  color: white;
}
.header-texts{
  text-align: center;
}