body {
    margin: 100px;
    padding: 0;

}


.container {
  border: 6px ridge;
  border-color: #3da1aa;
  outline: 6px solid;
  outline-color: #1d2830;
  border-radius: 15px;
  margin: 10px;
  padding: 10px;
  width: 1345px;
  height: 577px;
}

.container {
  display: grid;
  gap: 10px;
  grid-template-columns: 1fr;
  grid-template-rows: 80px 1fr 80px;
  grid-template-areas: 
    "hd"
    "main"
    "ft";
}

@media (max-width: 768px) {
  .container {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    grid-template-areas: 
      "hd"
      "main"
      "ft";
  }
}

header { 
  grid-area: hd;
  padding: 0px;
}

main { 
  grid-area: main;
  padding: 0px;
}

footer {
  grid-area: ft;
  padding: 0px;
}


.upperright {
  position: relative;
  z-index: 2;
  top: -206px;
  left: -183px;
}

.lowerleft {
  position: relative;
  z-index: 2;
  top: -84px;
  left: 1191px;
}

.secret {
  position: absolute;
  z-index: 1;
  top: 137px;
  left: 1324px;
}

.imgcenter {
  position: absolute;
  z-index: 1;
  top: 185px;
  left: 400px;
}

.wordcenter {
  position: absolute;
  z-index: 1;
  top: 565px;
  left: 750px;
}