/* Define styles for the nested box */
.nested-box {
  width: 100%;
  height: 100%;
  margin: 1px;
  padding: 1px;
  border: 2px solid black;
  justify-content: center;
  align-items: center;
  display: flex;
}

/* Container */
.container {
  background-color: white;
  text-decoration-color: black;
  box-shadow: 5px 5px 5px black;
  height: 100%;
}

.container:hover {
  z-index: 1;
}

/* Navigation Bar Design */
nav {
  width: 98%;
  padding: 1%;
  display: flex;
  justify-content: space-between;
  background-color: white;
  
  font-family: 'Secular One', 'sans-serif';
  font-size: 20px;
}

nav a {
  color: black;
  text-decoration: solid;
}

nav a:hover {
  color: red;
}

/* Body default setting */
body {
  background-color: #6a6a6a;
  height: 1024px;
}

@media (min-width: 800px) {
  .content-grid {
    margin-top: 50px;
    
    display: grid;
    grid-template-columns: 12% 12% 12% 12% 4% 12% 12% 12% 12%;
    grid-template-rows: 10vh 10vh 10vh 10vh 10vh 10vh 10vh 10vh 10vh 10vh;
  }

  .content-flex {
    margin-top: 50px;

    display: flex;
    justify-content: space-between;
  }
}

img {
  box-shadow: 5px 5px 5px black;
}

/* Layout default setting */
.paragraph-box {
  background-color: wheat;
  width: 40%;
  text-decoration: none;
  position: relative;
  display: block;
  padding: 3px;
  margin-right: 5px;
  float: left;
}

.title {
  font-family: 'Russo One', 'sans-serif';
  font-size: 40px;
  margin-bottom: 0;
}

.subtitle {
  font-family: 'Russo One', 'sans-serif';
  font-size: 24px;
  margin: 0;
}

p {
  font-family: 'Merriweather', 'serif';
  font-size: 16px;
}

/* Image pop when hover */
#image-back:hover {
  z-index: 1;
}

/* Image stack */
.image-stack {
  display: flex;
  align-items: center;
  justify-content: center;

  box-shadow: 5px 5px 5px black;
}

#image-1 {
  position: absolute;
  z-index: 1;
}

#image-2 {
  position: absolute;
  z-index: 2;
  width: 40vw;
}

#image-3 {
  position: absolute;
  z-index: 3;
  width: 32vw;
}

#image-4 {
  position: absolute;
  z-index: 4;
  width: 24vw;
}

#image-5 {
  position: absolute;
  z-index: 5;
  width: 16vw;
}

#image-6 {
  position: absolute;
  z-index: 6;
  width: 8vw;
}