body {
  margin: 100px;
  padding: 0;
  background-image: url("berri.png");
}


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

.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: 3;
  top: -206px;
  left: -183px;
}

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

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

.imgcenter {
  position: absolute;
  z-index: 2;
  top: 280px;
  left: 540px;
}

.wordcenter {
  position: absolute;
  z-index: 2;
  top: 680px;
  left: 890px;
}