@font-face {
    font-family: bubblegumSans;
    src: url('BubblegumSans-Regular.otf') format('opentype');
      font-weight: 400;
  }

  @font-face {
    font-family: espresso;
    src: url('EspressoDolce.ttf')format('truetype');
    font-weight: 600;
  }
  
  * {
    box-sizing: border-box;
    cursor: url('cursor_point1a.cur'), url('cursor_point1a.gif'), default;
    text-decoration: none;
  }

  h1,
  h2,
  h3 {
      color: #ffffff;
  }

  h1 {
    text-align: center;
    line-height: 100px;
    margin: 0;
    font-size: 25px;
  }

  h2, h3 {
    font-size: 1.1em;
  }

p {
    color: whitesmoke;
    font-size: 1em;
}

  strong {
      color: #870b8d;
  }

  #wrapper {
    max-width: 1400px;
    margin: auto;
    flex-direction: vertical;
    aspect-ratio: auto;
    overflow: auto;
    justify-content: center;
    height: 100vh;
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
  }

  body {
      font-family: espresso;
      margin: 0 auto;
      width: 100vw;
      height: 100vh;
      background-image: url(background.png);
      background-repeat: repeat;
  }
  

  
  .container {
      aspect-ratio: auto;
      max-width: 900px;
      margin: auto;
      Min-height: 50svh;
      --r: 11px;
      padding: calc(2 * var(--r));
      background: 
        radial-gradient(var(--r),#0000 98%,#d082fd) round
          calc(-1.5 * var(--r)) calc(-1.5 * var(--r)) / calc(3 * var(--r)) calc(3 * var(--r)),
        linear-gradient(#d082fd 0 0) no-repeat
          50% / calc(100% - 3 * var(--r)) calc(100% - 3 * var(--r));    
  }
  
  .container a {
      color: white;
  }
  
  #header {
      max-width: 900px;
      height: 90px;
      border: 10px groove;
      border-color: rgb(202, 92, 202);
      border-radius: 10px;
      aspect-ratio: auto;
      margin: auto auto 10px auto;
      background-color: #8967B3;
  }

  #header ul {
    display: flex;
      padding: 0;
      margin: center;
      justify-content: space-evenly;
      list-style-type: none;
      font-family: bubblegumSans;
  }
  #header li {
    color: #ffffff;
      text-decoration: none;
      font-size: 2em;
  }
  
  #navbar {
      background-color: #8967B3;
      margin: 0;
      padding-bottom: 10px;
      border: 10px groove rgb(202, 92, 202);
      width: auto;
      font-family: bubblegumSans;
      margin-bottom: 10px;
      border-radius: 10px;
  }
  
  #navbar ul {
      display: flex;
      padding: 0;
      margin: 0;
      list-style-type: none;
      justify-content: space-evenly;
  }
  
  #navbar li {
      padding-top: 15px;
  }
  #navbar li a {
      color: #ffffff;
      text-decoration: none;
      font-size: 1.1em;
  }
  
  #navbar li a:hover {
      text-decoration: underline;
  }

 
  #flex {
      display: flex;
  }
  
  aside {
      background-color: #8967B3;
      height: auto;
      padding: 10px;
      font-family: espresso;
      border: 10px groove rgb(202, 92, 202);
      margin: 0; 
      text-align: center;
      list-style: url("strawberry.gif");   
  }

  aside ul {
   list-style: none;
   text-align: left;
  }

  aside li a:hover {
    text-decoration: underline;
  }
.box12 {
  display: none;
}
  .box11 {
    margin: auto;
    width: 350px;
    }
    .u01 {
    background:url(f-ue.gif) repeat-x;
    height:45px;
    margin:0 50px
    }
    .s01 {
    background:url(f-sita.gif) repeat-x;
    height:13px;
    margin:0 50px
    }
    .box-top {
    background-image:url(f-kado1.gif), url(f-kado2.gif);
    background-position:top left, top right;
    background-repeat:no-repeat, no-repeat;
    height:45px
    }
    .box-center {
    background-image:url(f-migi.gif), url(f-hidari.gif) , url(f-naka.gif);
    background-position:top right, top left, top center;
    background-repeat:repeat-y, repeat-y ,repeat;
    padding:0 20px
    }
    .box-bottom {
    background-image:url(f-kado3.gif), url(f-kado4.gif);
    background-position:top left, top right;
    background-repeat:no-repeat, no-repeat;
    height:13px
    }

main {
  order: 2;
}

  .house {
    background-color: rgb(88, 121, 73);
      background-image: url(115cottagerow.png);
      width: auto;
       background-size: cover;
       background-position: center;
      background-repeat: no-repeat;
      flex: 1;
      border: 5px solid rgb(182, 54, 194);
      margin-left: 10px;
      margin-right: 10px;
      margin-top: 20px;
      height: 500px;
  }

  .town {
    text-align: center;
    margin: auto;
  }
  .towntext {
    display: none;
    text-align: center;
    
  }
  .towntext a {
    color: rgb(255, 255, 255);
    background-color: rgb(153, 38, 230);
    font-family: espresso;
    font-size: 17px;
  }
  
  .town a {
    color: rgb(106, 29, 129);
    font-size: 20px;
    font-family: espresso;
  }
 
  .towntext a:hover {
   text-decoration: underline;
  }
.town a:hover {
  text-decoration: underline;
}
  #leftSidebar {
      order: 1;
      width: 250px;    
  }
  
  
  #rightSidebar {
      order: 3;
      width: 250px;
  }
     
      
  
  footer {
    font-family: foggy;
      background-color: #8967B3;
      max-width: 900px;
      height: 100px;
      padding: 25px;
      margin: 10px auto auto auto;
      text-align: center;
      display: flex;
      border: 10px groove rgb(202, 92, 202);
      border-radius: 10px;
  }

  footer a:hover {
    text-decoration: underline;
  }

  footer p {
    font-size: 12px;
    margin: auto;
  }

  footer a {
    color: white;
  }

  .bottom {
    background-color: #8967B3;
      max-width: 900px;
      height: 100px;
      padding: 25px;
      margin: 10px auto auto auto;
      text-align: center;
      display: flex;
      border: 10px groove rgb(202, 92, 202);
      border-radius: 10px;
  }

  .bottom a {
    color: white;
  }

  #guestbook {
    margin: auto;
  }
  
  #guestbook img:hover {
   width: 100%;
  }

  
  /* this is just a cool box, it's the darker colored one */
  .box {
      background-color: #624E88;
      border: 1px solid #4b0250;
   padding: 0;
   margin: auto;
      max-width: 140px;
  }

  .box ul {
    text-align: left;
    list-style-image: url(strawberry.gif);
    list-style-position: outside;
  }

  .box li {
    color: white;
    font-size: 14px;
  }

  .box p {
    text-align: center;
  }

 #scrollbuttons {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
 }

 .eightyeight {
  flex: 0 0 auto;
 }

  #abutton {
    width: 3.3em;
    height:25%;
    vertical-align: middle;
    margin-bottom: 8px;
}

#stamp {
    width: 3.3em;
    height:30%;
    vertical-align: middle;
}

#secret {
  list-style: none;
  display: inline-block;
  padding: 0;
  margin-top: 10px;

}

#secret li + li {
  margin-top: 30px;
}
  
  #topBar {
      width: 100%;
      height: 30px;
      padding: 10px;
      font-size: smaller;
  }

  .tooltip {
    position: relative;
    display: inline-block;
  }
  
  /* Tooltip text */
  .tooltip .tooltiptext {
    visibility: hidden;
    width: 120px;
    background-color: rgba(255, 96, 207, 0.753);
    color: #fff;
    text-align: center;
    padding: 5px 0;
    border-radius: 6px;
   
    /* Position the tooltip text - see examples below! */
    position: absolute;
    z-index: 1;
  }
  
  /* Show the tooltip text when you mouse over the tooltip container */
  .tooltip:hover .tooltiptext {
    visibility: visible;
  }



  #statuscafe {
    padding: 5px;
    background-color: #624E88;
     border: 1px solid #4b0250;
     margin: auto;
     margin-bottom: 20px;
     max-width: 140px;
  }
  #statuscafe-username {
    margin-bottom: .5em;
    color: rgb(152, 255, 255);
  }
  #statuscafe-content {
    margin: 0 1em 0.5em 1em;
    color: white;
    font-family: foggy;
    font-size: 14px;
  }



  @media screen and (max-width: 800px) {
    .box11 {
      width: 250px;
    }
  }

  @media screen and (max-width: 650px) {
    .box12 {
      display: block;
      margin: auto;
      width: 150px;
      }
    main {
      background-image: none;
      background-color: #d082fd;
      border: none;
    }

    .house {
      display: none;
    }
    .box11 {
      display: none;
    }

  .town2 {
    background-color: rgb(88, 121, 73);
    background-image: url(115cottagerow.png);
   width: 300px;
     background-size: cover;
    background-repeat: no-repeat;
    margin: auto;
    margin-top: 20px;
    border: 5px solid rgb(182, 54, 194);
    height: 400px;
  }

  .towntext {
    display: none;

  }
  .town {
    display: block;
  }

  }


  @media screen and (max-width: 450px) {

    main {
      display: none;
    }

    aside {
      width: auto;
    }
    .box11 {
      display: none;
    }
  }