/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

body {
  background-color: #c9c0bb ;
  color: black;
  font-family: "Lucida Sans Unicode";
}
h1 {
  font-family: "MS Gothic";
  color: red;
  font-size: 2.5em;
  }
h2 {
  font-family:"Javanese Text";
  color:blue;
  font-size: 3em;
  text-align: right;
    }
    
h3 {
  font-family: "MingLiU_HKSCS-ExtB";
  color:green;
  font-size: 2em;
  text-align:center;
}


p {
  color: aqua;
  padding: 6px;
  background: #2A380F;
  }
  
  .special {
  font-family: "Corbel";
  color: orange;
  font-weight: bold;
}
.button {
  font-family: "Candara", Times, serif;
  background-color: red;
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  cursor: pointer;
}

.box1 {
    width: 200px;
    height: 100px;
    background-color: lightblue;
    border: 2px solid blue;
    padding: 10px;
    margin: 10px;
    position: relative;
    left: 100px;
}
.box2 {
    width: 100%;
    height: 100px;
    background-color: #898a74 ;
    border: 4px black;
    border-style: double;
    font-size: 2.5em;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.box3 {
    width: 85%;
    height: 55px;
    font-family: "MingLiU_HKSCS-ExtB";
    border: 4px black;
    border-style: none;
    font-size: 2.5em;
    color: #c9c0bb;
    position: relative;
    display: flex;
    justify-content: left;
    align-items: center;
    backdrop-filter: blur(5px);
    text-indent:20px;
}
  

.wrap {
  width: 100%;
  height: 110px;
  object-fit: cover;
  object-position: bottom;
}
    
.container1 {
  display: grid;
  grid-template-columns: 80px 1000px auto;
  grid-template-rows:80px 200px 320px; 
  background-color: dodgerblue;
  padding: 2px;
} 

.container1 div {
  border: 0 solid black;
  padding: 0px;
  font-size: 30px;
  text-align: center;
}

.icon_sidebar {
  grid-column: 1 / 2;
  grid-row: 1 / 4;
  background-color: #3f3f3f;
  margin: 0;
}

.header_grid {
  grid-column: 1/ 4;
  grid-row: 1 / 2;
  background-color: #c9c0bb;
  margin: 0;
}

.nav_bar {
  grid-column: 2/ 4;
  grid-row: 1 / 2;
  background-color: #47403B;
  margin: 0;
}

.main_area {
  grid-column: 2/ 3;
  grid-row: 2 / 4;
  background-color: #c9c0bb;
  margin: 0;
}
.rt_up{
  grid-column: 3/ 4;
  grid-row: 2 / 3;
  background-color: #898a74 ;
  border: 4px black;
  border-style: double;
  padding: 2px;
  margin: 0;
}
.rt_dwn{
  grid-column: 3/ 4;
  grid-row: 3 / 4;
  background-color: #898a74 ;
  border: 4px black;
  border-style: double;
  padding: 2px;
  margin: 0;
}

.ma_grid {
  display: grid;
  grid-template-columns: auto auto;
  grid-template-rows: 150px 150px 150px;
  padding: 5px;
} 

.med_click {
  display: grid;
  grid-template-columns: 10px auto 10px;
  grid-template-rows: 10px auto 50px;
  padding: 5px;
}

.h_txt{
  grid-column: 2 / 3;
  grid-row: 2 / 4;
  background-color: #c9c0bb;
  margin: 0;
}