.wrapper {
      background-image: url(sun_tile.png);
position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  margin: 0;
  padding: 0;
    height: 100%;
    overflow: clip;
}

.parent {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: repeat(4, 3fr);
    background: white;
    margin-left: 20%;
    margin-right: 20%;
    margin-top: 2em;
    margin-bottom: 6em;
    border: 10px solid;
    border-image: url(frame3.png) 10 round;
    padding: 5px;
    background: url(2.png);
    position: unset;
    overflow: scroll;
}

.side {
    grid-row: span 5 / span 5;
    margin: 5px;
    margin-top: -10px;
}

.head {
    grid-column: span 4 / span 4;
    background: url(https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fi1.wp.com%2Fcuriousrambler.com%2Fwp-content%2Fuploads%2F2020%2F02%2Fmowing-devil-bottom.jpg%3Ffit%3D968%252C651%26ssl%3D1&f=1&nofb=1&ipt=27d689df16c1b69fe44dd04ff325b3c953f30267c94dc6037d264fdaa8323eb2);
    height: 20vh;
    background-position: right;
    border: 10px solid;
    border-image: url(frame3.png) 10 round;
        display: grid;
    overflow: clip;
}


.middle{
    grid-column: span 4 / span 4;
    grid-row: span 4 / span 4;
    grid-column-start: 2;
    grid-row-start: 2;
    text-align: center;
}

.mainiframe {
   width:80%;
   height:60%;
    border: 50px solid;
    border-image: url(frame2.png) 50; 
   margin-top: 5%;
   background: white;

}

#tree {
grid-column-start: 2;
grid-column-end: 2;
height: 100%;
width: 60%;
margin-left: 40%;
}

#navlist {
    list-style: none;
    padding: 0;
}

#navlist > li {
    background: #3b545e;
    padding: 0.5em;
    border: 2px outset #3c555f;
    color: black;
    /*! width: ; */
}

.nimg {
    margin-right: 10px;
}


.side > img {
    width: 100%;;
}

.navbarhd {
    background: #f0c023;
    display: flex;
    margin-top: 15px;
    background-image: url(bg.png);
    border: solid 1px black;
}

.navitm {
    display: flex;
    padding: 5px;
}

.nlink {
      text-shadow: 1px 1px 0 #4b2e1e;
      color: #fffbe9 ;
}

.navitm > img {
    padding: 5px;
}

.navitm > a {
  color: #4b2e1e;
  font-family: 'Georgia', serif;
  font-size: 1.1em;
  text-shadow: 1px 1px 0 #fffbe9;
  letter-spacing: 1px;
  cursor: pointer;
  transition: background 0.2s, box-shadow 0.2s;
  padding-top: 10%
}


.navbarhd > a:hover {
  background: linear-gradient(135deg, #c2a77a 0%, #e6d3b3 100%);
  box-shadow: 0 4px 16px rgba(80, 60, 40, 0.22), 0 0 0 2px #c2a77a inset;
  border-color: #a67c52;
}

#linklist {
    list-style: none;
    padding: 0;
}

#linklist > li {
    padding: 0.5em;
    color: black;
}

.gallery {
    display: grid;
  grid-template: 50% 50% / 50% 50%;
}

.galimg {
    width: 100%;

}

@media screen and (max-width: 600px) {
  .wrapper {
    width: 100vw;
    margin: 0;
    padding: 0;
  }

  .parent {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    border-width: 0px;
  }

  .side {
    order: 2;
    width: 100%;
    margin: 0;
    padding: 10px 0;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
  }

  #navlist {
    display: flex;
    flex-direction: row;
    width: 100%;
    padding: 0;
    margin: 0;
    overflow: scroll;
  }

  #navlist li {
    margin: 0;
    padding: 0;
    font-size: 0.95em;
    display: flex;
    align-items: center;
    border-width: 2px;
  }

  .nimg {
    width: 1.5em;
    height: 1.5em;
    margin-right: 0.3em;
  }

  .head {
    height: 100px;
  }

  .head img {
    max-width: 80vw;
    height: auto;
  }

  #tree {
    display: none;
  }

  .middle {
    order: 3;
    width: 100%;
    padding: 0;
    margin: 0;
    text-align: center;
    height: fit-content;
  }

  .navbarhd {
    flex-direction: row;
    align-items: center;
    margin-top: 0;
    border-width: 2px;
    background-size: cover;
    overflow: scroll;
  }

  .navitm {
    flex-direction: row;
    align-items: center;
    padding: 4px 0;
    width: 100%;
    justify-content: center;
  }

  .navitm img {
    width: 1.5em;
    height: 1.5em;
    margin-left: 0.5em;
  }

  .mainiframe {
    width: 98vw;
    height: 200ch;
    margin: 1vw 0;
    border-width: 0;
    min-width: 0;
    max-width: 100vw;
  }

  .side > img {
    display: none; /* Hide the cat image for mobile to save space */
  }
  .wrapper{
    overflow: unset;
  }
}

#cbox {
  border: 3px grey ridge;
  width: 96% !important;
}