/* 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-image: url(https://i.pinimg.com/736x/2d/d6/68/2dd668712ffbca7e0c364ae15e5a54d9.jpg);
background-size: 10%;      
background-attachment: fixed; 
overflow-x: auto;
font-family: 'Bungee Outline';
}
#container /*dùng để chứa các phần tử*/
{
  margin: 0 auto;
  width: 1000px;
  height: 90vh;
  margin-top: 30px;
  padding: 5px;
}
a:hover { /* tạo hiệu ứng chuyển đổi mượt mà khi di chuột qua bất kỳ liên kết trên trang web*/
letter-spacing:1.5px;
transition:.3s;
    color:#f299d1;
    
}

a { letter-spacing:normal; transition:.3s;     text-decoration: none; color: black; font-size: 20px;

    
}
h1 {
  font-size: 35px;
}

h2 {
  font-size: 30px;
}

p {
  font-size: 20px;
  opacity: 1;
  text-align: left;
}
::-webkit-scrollbar {
width: 5px;
}

::-webkit-scrollbar-track {
width: 5px;
}

::-webkit-scrollbar-thumb { /*màu nền của thanh trượt*/
background-color: #f299d1;
}

::-webkit-scrollbar-thumb:hover { /*màu nền của thanh trượt khi di chuột qua*/
 background-color: #f299d1;
}

#sidebarleft
{	
  float: left;
  width: 200px;
  border: 1px solid #000;
  text-align: center;
  min-height: 700px;
  padding: 10px 5px 5px 5px;
  background-image: url('https://i.imgur.com/N8K8J1i_d.webp?maxwidth=520&shape=thumb&fidelity=high');
  background-size: 70%;
  text-shadow: 0.5px 0.5px 0px;
  color: #4a4a38;
}
#middle{
  float: left;
  width: 554px;
  border: 1px solid #000;
  margin: 0px 5px 0px 5px;
  background-color: #f2c9e6;
  height: 705px;
  text-align: center;
  padding: 5px;
  background-size: 20%;
}


#sidebarright{
  background-image: url('http://i160.photobucket.com/albums/t197/myntebuu/SOZAI/bgpinkheartribbon.gif');
  background-position: center;
  float: right;
  width: 200px;
  border: 1px solid #000;
  text-align: center;
  background-color: #EEEECD;
  min-height: 700px;
  padding: 10px 5px 5px 5px;
  text-shadow: 0.5px 0.5px 0px #fff;
}

.menubutton2 {
    width: 160px;
    height: 35px;
    background: #FFFFFF;
background: linear-gradient(to bottom, #FFFFFF 0%, #FFFFFF 50%, #FFE0F7 100%);
    margin: 0px auto;
    border-width: 2px;
    border-color: #e0e0e0;
    box-sizing: border-box;
    border-style: solid;
  	border-radius:30px;
    font-size: 1.0em;
    font-family: 'LeeSeoyun';
    color: #adadad;
    font-weight: bold;
    display:flex; 
    align-items:center; 
    padding: 0px 0px 0px 12px;
} 

.menubutton2:hover {
    background: linear-gradient(to bottom, #FFFFFF 0%, #FFFFFF 10%, #FFE0F7 90%);
}


.menubutton2 img {
  margin-right:6px;
  width:18px;
}


#content{
  background-color: #fdf8f7;
  border: 1px solid #000;
  margin: 0 auto;
  height: 430px;
  width: 90%;
  padding: 10px;
  overflow: scroll;
  overflow-x: hidden;
  margin-bottom: 5px;
  font-style: "Cooper Black";
}

#other{
  background-color: #ffffff;
  border: 1px solid #C57c7c;
  width: 97%;
  margin: 0 auto;
  padding: 10px;
  height: 33%;
  margin-top: 5px;
  overflow: scroll;
  overflow-x: hidden;
}

#box{
  border-radius: 10px;; 
  width: 200px;
  height: 100px;
}

#border{
	background-image: url('http://i160.photobucket.com/albums/t197/myntebuu/SOZAI/bgpinkheartribbon.gif');
	background-color: white;
	border: 3px solid;
	border-radius: 15px;
	border-color: #40343c;
}