@font-face {
  font-family: 'battlenet';
  src: url(battlenet.ttf);
}

p {
   font-family: 'battlenet';
  src: url(battlenet.ttf);
  color: black;
    line-height: 1.5;
}
h1 {
font-family: 'battlenet';
  src: url(battlenet.ttf);
  color: red;
}
h2 {
font-family: 'battlenet';
  src: url(battlenet.ttf);
  color: #2f97f0;
}
h3 {
font-family: 'battlenet';
  src: url(battlenet.ttf);
  color: #165bd2;
}

.broider {
    border-image:  url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFQAAABUCAYAAAAcaxDBAAAByUlEQVR4AezcQW7DMAxEUTf3v3OqLW2YxNgfQep+QxuW0jR5JrTMaxuet08RGLi2EXQKsF8FBK0etytBbxPWgANouTBW8eNTBBZJWZVz8w7dg9ytDxN6N/C/nxcUnoBXuRBWUS6MVcD/78/HLZKyFllZTij8igUVFBaA465MKPwRnhUnKPw+BRUUFoDjnFBBYQE4zgkVFBaA45xQQWEBOM4JFRQWgOM+NaHwx/7eOEHhdyOooLAAHOeECgoLwHFOqKCwABznhAoKC8BxTqigsAAc980TCn/Vz8QJCjsLKigsAMc5oYLCAnCcEyooLADHOaGCwgJwnBMqKCwAxz1tQmGePE7Q3Kw9IWjLkzcFzc3aE4K2PHlT0NysPSFoy5M3Bc3N2hOCtjx5U9DcrD0haMuTNwXNzdoTgm5bC5Q2BU3Fhv2CDkBpW9BUbNgv6ACUtgVNxYb9gg5AaVvQVGzYL+gAlLYFTcWG/YIOQGlb0FRs2C/oAHTSPv2zoKc01xqCXnM7PSXoKc21xqv8oPAqyg8Kr+Ja7HNPLZKyFllZTij87gUVFBaA4w4TWi6EVZQLw+K9SMrav48D6H6DdSYgaOY17hZ0JMo2/AIAAP//tk1IGQAAAAZJREFUAwCabX+32TJxywAAAABJRU5ErkJggg==") 28 /  28px / 0 round;
    border-width:  28px;
    border-style:  solid;
}


.navigation {
  display: grid;
  column-count: 3;
  grid-template-columns: 1fr 1fr 1fr;
  column-gap: 1%;
  padding: 30px;
  font-size: 1.5rem;
  margin-top: 1px;
  margin-left: -50px;

}

.rightbar {
  display: grid;
  border: 4px;
    border-image:  url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFQAAABUCAYAAAAcaxDBAAAByUlEQVR4AezcQW7DMAxEUTf3v3OqLW2YxNgfQep+QxuW0jR5JrTMaxuet08RGLi2EXQKsF8FBK0etytBbxPWgANouTBW8eNTBBZJWZVz8w7dg9ytDxN6N/C/nxcUnoBXuRBWUS6MVcD/78/HLZKyFllZTij8igUVFBaA465MKPwRnhUnKPw+BRUUFoDjnFBBYQE4zgkVFBaA45xQQWEBOM4JFRQWgOM+NaHwx/7eOEHhdyOooLAAHOeECgoLwHFOqKCwABznhAoKC8BxTqigsAAc980TCn/Vz8QJCjsLKigsAMc5oYLCAnCcEyooLADHOaGCwgJwnBMqKCwAxz1tQmGePE7Q3Kw9IWjLkzcFzc3aE4K2PHlT0NysPSFoy5M3Bc3N2hOCtjx5U9DcrD0haMuTNwXNzdoTgm5bC5Q2BU3Fhv2CDkBpW9BUbNgv6ACUtgVNxYb9gg5AaVvQVGzYL+gAlLYFTcWG/YIOQGlb0FRs2C/oAHTSPv2zoKc01xqCXnM7PSXoKc21xqv8oPAqyg8Kr+Ja7HNPLZKyFllZTij87gUVFBaA4w4TWi6EVZQLw+K9SMrav48D6H6DdSYgaOY17hZ0JMo2/AIAAP//tk1IGQAAAAZJREFUAwCabX+32TJxywAAAABJRU5ErkJggg==") 28 /  28px / 0 round;
    border-width:  4px;
  padding: 15px;
  width: 231px; 
  display: block;
  background: HSL(51, 91%, 85%);
  border-radius: 20px;
  position:relative;
  left: -105px;
  box-shadow: 5px 5px 10px 2px #f5bb0e inset
  
}

.nav {
  border: 4px;
    border-image:  url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFQAAABUCAYAAAAcaxDBAAAByUlEQVR4AezcQW7DMAxEUTf3v3OqLW2YxNgfQep+QxuW0jR5JrTMaxuet08RGLi2EXQKsF8FBK0etytBbxPWgANouTBW8eNTBBZJWZVz8w7dg9ytDxN6N/C/nxcUnoBXuRBWUS6MVcD/78/HLZKyFllZTij8igUVFBaA465MKPwRnhUnKPw+BRUUFoDjnFBBYQE4zgkVFBaA45xQQWEBOM4JFRQWgOM+NaHwx/7eOEHhdyOooLAAHOeECgoLwHFOqKCwABznhAoKC8BxTqigsAAc980TCn/Vz8QJCjsLKigsAMc5oYLCAnCcEyooLADHOaGCwgJwnBMqKCwAxz1tQmGePE7Q3Kw9IWjLkzcFzc3aE4K2PHlT0NysPSFoy5M3Bc3N2hOCtjx5U9DcrD0haMuTNwXNzdoTgm5bC5Q2BU3Fhv2CDkBpW9BUbNgv6ACUtgVNxYb9gg5AaVvQVGzYL+gAlLYFTcWG/YIOQGlb0FRs2C/oAHTSPv2zoKc01xqCXnM7PSXoKc21xqv8oPAqyg8Kr+Ja7HNPLZKyFllZTij87gUVFBaA4w4TWi6EVZQLw+K9SMrav48D6H6DdSYgaOY17hZ0JMo2/AIAAP//tk1IGQAAAAZJREFUAwCabX+32TJxywAAAABJRU5ErkJggg==") 28 /  28px / 0 round;
    border-width:  4px;
  padding: 15px;
  line-height: 0.7;
  width: 120px;
    margin-left: 238px;
     background: HSL(51, 91%, 85%);
  border-radius: 20px;
  height: 1000px;
  box-shadow: 5px 5px 10px 2px #f5bb0e inset
}
h2 {
  color: #165bd2;
}

.main  {
  line-height: 1.5;
  border: 4px;
    border-image:  url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFQAAABUCAYAAAAcaxDBAAAByUlEQVR4AezcQW7DMAxEUTf3v3OqLW2YxNgfQep+QxuW0jR5JrTMaxuet08RGLi2EXQKsF8FBK0etytBbxPWgANouTBW8eNTBBZJWZVz8w7dg9ytDxN6N/C/nxcUnoBXuRBWUS6MVcD/78/HLZKyFllZTij8igUVFBaA465MKPwRnhUnKPw+BRUUFoDjnFBBYQE4zgkVFBaA45xQQWEBOM4JFRQWgOM+NaHwx/7eOEHhdyOooLAAHOeECgoLwHFOqKCwABznhAoKC8BxTqigsAAc980TCn/Vz8QJCjsLKigsAMc5oYLCAnCcEyooLADHOaGCwgJwnBMqKCwAxz1tQmGePE7Q3Kw9IWjLkzcFzc3aE4K2PHlT0NysPSFoy5M3Bc3N2hOCtjx5U9DcrD0haMuTNwXNzdoTgm5bC5Q2BU3Fhv2CDkBpW9BUbNgv6ACUtgVNxYb9gg5AaVvQVGzYL+gAlLYFTcWG/YIOQGlb0FRs2C/oAHTSPv2zoKc01xqCXnM7PSXoKc21xqv8oPAqyg8Kr+Ja7HNPLZKyFllZTij87gUVFBaA4w4TWi6EVZQLw+K9SMrav48D6H6DdSYgaOY17hZ0JMo2/AIAAP//tk1IGQAAAAZJREFUAwCabX+32TJxywAAAABJRU5ErkJggg==") 28 /  28px / 0 round;
    border-width:  4px;
    border-style:  solid;
  padding: 15px;
  width: 610px;
  height: 500px;
  margin-left: -668px;
  background: HSL(208, 100%, 90%);
   border-radius: 20px;
  overflow-y: scroll;
  box-shadow: 5px 5px 10px 2px #165bd2 inset
}
.header {
  display: grid;
  margin: auto; 
  width: 1074px;
  border: 4px;
    border-image:  url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFQAAABUCAYAAAAcaxDBAAAByUlEQVR4AezcQW7DMAxEUTf3v3OqLW2YxNgfQep+QxuW0jR5JrTMaxuet08RGLi2EXQKsF8FBK0etytBbxPWgANouTBW8eNTBBZJWZVz8w7dg9ytDxN6N/C/nxcUnoBXuRBWUS6MVcD/78/HLZKyFllZTij8igUVFBaA465MKPwRnhUnKPw+BRUUFoDjnFBBYQE4zgkVFBaA45xQQWEBOM4JFRQWgOM+NaHwx/7eOEHhdyOooLAAHOeECgoLwHFOqKCwABznhAoKC8BxTqigsAAc980TCn/Vz8QJCjsLKigsAMc5oYLCAnCcEyooLADHOaGCwgJwnBMqKCwAxz1tQmGePE7Q3Kw9IWjLkzcFzc3aE4K2PHlT0NysPSFoy5M3Bc3N2hOCtjx5U9DcrD0haMuTNwXNzdoTgm5bC5Q2BU3Fhv2CDkBpW9BUbNgv6ACUtgVNxYb9gg5AaVvQVGzYL+gAlLYFTcWG/YIOQGlb0FRs2C/oAHTSPv2zoKc01xqCXnM7PSXoKc21xqv8oPAqyg8Kr+Ja7HNPLZKyFllZTij87gUVFBaA4w4TWi6EVZQLw+K9SMrav48D6H6DdSYgaOY17hZ0JMo2/AIAAP//tk1IGQAAAAZJREFUAwCabX+32TJxywAAAABJRU5ErkJggg==") 28 /  28px / 0 round;
    border-width:  4px;
    border-style:  solid;
  padding: 5px;
    margin-left: 218px
 
}

.bottom{
  display: grid;
  display: block;
   line-height: 1.5;
  border: 4px;
    border-image:  url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFQAAABUCAYAAAAcaxDBAAAByUlEQVR4AezcQW7DMAxEUTf3v3OqLW2YxNgfQep+QxuW0jR5JrTMaxuet08RGLi2EXQKsF8FBK0etytBbxPWgANouTBW8eNTBBZJWZVz8w7dg9ytDxN6N/C/nxcUnoBXuRBWUS6MVcD/78/HLZKyFllZTij8igUVFBaA465MKPwRnhUnKPw+BRUUFoDjnFBBYQE4zgkVFBaA45xQQWEBOM4JFRQWgOM+NaHwx/7eOEHhdyOooLAAHOeECgoLwHFOqKCwABznhAoKC8BxTqigsAAc980TCn/Vz8QJCjsLKigsAMc5oYLCAnCcEyooLADHOaGCwgJwnBMqKCwAxz1tQmGePE7Q3Kw9IWjLkzcFzc3aE4K2PHlT0NysPSFoy5M3Bc3N2hOCtjx5U9DcrD0haMuTNwXNzdoTgm5bC5Q2BU3Fhv2CDkBpW9BUbNgv6ACUtgVNxYb9gg5AaVvQVGzYL+gAlLYFTcWG/YIOQGlb0FRs2C/oAHTSPv2zoKc01xqCXnM7PSXoKc21xqv8oPAqyg8Kr+Ja7HNPLZKyFllZTij87gUVFBaA4w4TWi6EVZQLw+K9SMrav48D6H6DdSYgaOY17hZ0JMo2/AIAAP//tk1IGQAAAAZJREFUAwCabX+32TJxywAAAABJRU5ErkJggg==") 28 /  28px / 0 round;
    border-width:  4px;
    border-style:  solid;
  padding: 15px;
  width: 610px;
  height: 438px;
  position: static;
  margin-left: 400px;
  margin-top: -475px;
   background: HSL(208, 100%, 90%);
   border-radius: 20px;
   overflow-y: scroll;
   box-shadow: 5px 5px 10px 2px #165bd2 inset
  
}

body {
  background-image: url('images/background.png');
    cursor: url("images/cursor.png"), auto;
}

::-webkit-scrollbar {
  width: 10px;
  box-shadow: 5px 5px 10px 2px
}

/* Track */
::-webkit-scrollbar-track {
  background: #2f97f0;
  box-shadow: 5px 5px 10px 2px
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: #f4d20f;
  box-shadow: 5px 5px 10px 2px
}


/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #f5bb0e;
  box-shadow: 5px 5px 10px 2px
}