/* ===== Scrollbar CSS ===== */
  /* Chrome, Edge, and Safari */
  *::-webkit-scrollbar {
    width: 16px;
  }

  *::-webkit-scrollbar-track {
    background: #ffffff;
  }

  *::-webkit-scrollbar-thumb {
    background-color: #f74631;
    border: 3px double #ffffff;
  }

html {
      height: 90vh;
}

p {
  text-align: center;
  font-family: cursive;
  color: black;
}
h1 {
  text-align: center;
  font-family: cursive;
}
h2 {
  text-align: center;
  font-family: cursive;
}
 .image-btn{
        background: none;
        border: none;
        padding: 0;
    }
    .image-btn img{
        display: block; /* to remove extra space below image */
    }
body {
   background-image: url("background2.png");
   max-height: 100vh;
   background-attachment: fixed;
}
@font-face{
  font-family:adelia;
    src:url(ADELIA.otf);  
}
@font-face{
  font-family:ToJapan;
    src:url(ToJapan.otf); 
}
@font-face{
  font-family:Shogie;
    src:url(Shogie.otf); 
}
h1 {
    font-family:ToJapan;
    color: #3D835E;
      letter-spacing: 5px;
      font-size: 60px;
        text-align: right;
      -webkit-text-stroke-width: 1px;
        -webkit-text-stroke-color: #FFFFFF;
      
      
}
.header {
  background-color: #EBD3E2;
  height: 90px;
  width: 100%;
  border: 5px;
  border-color: #EBD3E2;
}
.container {
    
    display: flex;
      flex-direction: column;
  background-color: #FFF4BD;
  height: 90vh;
  width: 40%;
    margin: auto;
    margin-top: 30px;

}
.container3 {
      display: block;
    margin:auto;
    width: 60%;
      height: 1000px;
      flex-direction: row;
}
.container2 {
   display: flex;
   justify-content: center;
    margin:0px;
    margin-top: 2px;
    width:100.4%;
      flex-direction: row;
    height: 100%;

}
.container4 {
   display: flex;
   justify-content: center;
    margin:0px;
    width:100.4%;
      flex-direction: row;
    height: 100vh;

}
.left {
  width: 900px;
  text-align: center;
    background-color: #EBD3E2;
  border:  0px solid;
  border-color: #B94D80;
}

.left a {
  padding: 8px;
  margin: 7px;
  display: block;
  color: black;

}
.left2 {
    margin-top: 20px;
  width: 20%;
  text-align: center;
    background-color: #FFF4BD;
  border:  5px solid;
  border-color: #FCD509;}


.main {
    flex-grow: 1;
    width: auto;
  padding: 10px 20px;
  background-color:white;
    border:  5px solid;
    border-color: #BBF2CF;

}
.main2 {
    flex-grow: 1;
    width: auto;
  padding: 10px 20px;
   background-color: #d6cce3;
    border:  5px solid;
    border-color: #705E86;

}
.main2 a {
  padding: 8px;
  margin: 7px;
  display: block;
  color: black;

}

.right {
  
  width: 15%;
  text-align: center;
    background-color: #FFF4BD;
  border:  5px solid;
  border-color: #FCD509;
}

.right a {
  padding: 8px;
  margin: 7px;
  display: block;
  color: black;

}
.side {
  width: 15%;
  text-align: center;
    background-color: rgba(0,0,0,0);
  border:  5px solid;
  border-color: rgba(0,0,0,0);
        flex-direction: column;

}
@media only screen and (max-width: 620px) {
  /* For mobile phones: */
  .menu, .main, .right {
    width: 100%;
  }
}