@font-face {
      font-family: 'DisposableDroidBB';
      src: url('DisposableDroidBB.ttf') format('truetype');
    }
    @font-face {
      font-family: 'Galmuri';
      src: url('Galmuri11.ttf') format('truetype');
    }
    @font-face {
      font-family: 'Aclonica';
      src: url('Aclonica.ttf') format('truetype');
    }

    body {
      margin: 0;
      padding: 0;
      background-color: transparent;
      cursor: default;
      overflow-x: hidden;
    }

    #minesweeper-bg {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: -1;
      image-rendering: pixelated;
    }

    .overlap {
      display: flex;
      position: absolute;
      top: 30px;
      left: 30px;
      right: 440px;
      text-align: center;
      height: 50px;
      margin: auto;
      width: 300px;
      z-index: 11;
      pointer-events: none;
    }
    .overlap a {
      pointer-events: auto;
    }

    .container {
      display: flex;
      flex-direction: column;
      height: auto;
      max-width: 820px;
      min-width: 300px;
      margin: 30px auto;
      padding: 1 15%;
      border-radius: 15px;
      box-shadow: 5px 30px 20px rgba(0, 0, 0, 0.4);
      overflow: hidden;
      position: relative;
      z-index: 10;
      background-color: rgba(255, 255, 255, 0.1);
    }

    header {
      background-color: #ede0b2;
      background-image: url("wood8.png");
      height: 50px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-bottom: 1px solid #bb6a18;
      border-top-left-radius: 15px;
      border-top-right-radius: 15px;
    }

    footer {
      background-color: #ede0b2;
      background-image: url("wood3.png");
      height: 60px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-bottom-left-radius: 15px;
      border-bottom-right-radius: 15px;
    }

    .main {
      display: flex;
      height: 525px;
      overflow: hidden;
    }

    .menu {
      width: 120px;
      height: 100%;
      background: linear-gradient(180deg, rgba(252,221,165,1) 0%, rgba(251,245,223,1) 40%, rgba(251,245,223,1) 100%);
      border-left: 1px solid #bb6a18;
      border-right: 1px solid #bb6a18;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      justify-content: center;
      text-align: center;
      align-items: center;
      padding: 5px;
    }

    .menu-item {
      height: 75px;
      width: 50px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      padding: 5px 0 0px 0;
      margin-bottom: 25px;
    }

    .menu a {
      color: #a14c00;
      text-decoration: none;
      font-family: 'Galmuri', sans-serif;
      font-size: 16px;
      line-height: 20px;
      text-shadow: 0px 2px 2px rgba(161, 76, 0, 0.5);
      cursor: url('https://onio.cafe/hover.gif'), auto;
    }

    .menu a:hover {
      color: #ffda45;
      text-shadow: 0 0 1px #ffbe41,
                   0 0 2px #ffb628,
                   0 0 4px #ffaf15,
                   0 0 8px #eb9b00,
                   0 0 12px #e38118;
    }

    .content {
      height: 100%;
      width: 100%;
      display: flex;
      align-items: flex-start;
      justify-content: center;
      overflow: hidden;
    }

    .inner {
      width: 100%;
      height: 100%;
      padding: 0;
      margin: 0;
      overflow: hidden; 
      background: transparent;
      border-right: 1px solid #bb6a18;
    }

    .inner iframe {
      width: 100%;
      height: 100%;
      border: none;
      display: block;
      scrollbar-width: none;         
      -ms-overflow-style: none;       
      overflow: hidden;             
    }

    .inner iframe::-webkit-scrollbar {
      display: none;                 
    }
    
    .banner {
      position: relative;
      background-image: url("banner3.png");
      left: 185px;
      width: 412px;
      height: 42px;
      top: 0px;
      font-family: 'Aclonica', sans-serif;
      font-size: 12px;
      color: #a14c00;
      text-shadow: 0 0 1px #ffffff,
                   0 0 2px #fff,
                   0 0 4px #fff,
                   0 0 8px #fff,
                   0 0 12px #fff;
      text-align: center;
    }

    .overlap a img {
      transition: 1s;
    }
    .overlap a img:hover {
      transform: rotate(360deg);
    }

    .whee {
      transition: 1s;
    }
    .whee:hover {
      transform: rotate(360deg);
    }
    
        @keyframes float {
      0% {
        transform: translateY(0);
      }
      50% {
        transform: translateY(-25px);
      }
      100% {
        transform: translateY(0);
      }
    }
    
    #floatin {
      animation: float 5s ease-in-out infinite;
    }
  </style>

  <script type="text/javascript">
    message = "welcome to the Onio.Café web chat ~ enjoy ur stay! ~ ";
    function step() {
      message = message.substr(1) + message.substr(0,1);
      document.title = message.substr(0,15);
    }

    function loadPage(page) {
      var frame = document.getElementById('contentFrame');
      if (frame) {
        frame.src = page;
      }
    }