/*Global settings*/
*{
    background-color: tan; /* Origonal-lightskyblue*/
}
body {
  margin: 0px;
  
  }
  
/*Scroll Bar*/
/* width */
::-webkit-scrollbar {
  width: 20px;
}

/* Track */
::-webkit-scrollbar-track {
  box-shadow: inset 0 0 5px grey; 
  border-radius: 10px;
}
 
/* Handle */
::-webkit-scrollbar-thumb {
  background: #c49567; 
  border-radius: 10px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #60564a; 
}
/**Scroll bar/
  /*NAV BAR*/

.header-div{
  width: 100vw;
  position: fixed;
  margin-top: -20px;

}
.header-icon{
  /* margin-bottom: 50px; TESTING FFOR HEAD*/
   overflow: hidden;
   border-color: #60564a;
   border:solid 1px;
   height: 90px; /* origonal 60px*/
   width: 92px; /* origonal 70px*/
   position:absolute;
   bottom: -22px;
   
 }
 .nav-bar{
   list-style-type: none;
   margin: 0;
   margin-bottom: 100px;
   padding: 0;
   overflow: hidden;
   background-color: #60564a;
   width: 100%; /*86%*/
   height: 50px;
 /*  margin-left: 20%; */
   border:solid 2px;
   border: black;
   display: inline-block;
   width:100vw;
  /* z-index: 102;*/
  z-index: 10;
   
   
   
   position: fixed;
  
 
 }
 
 .nav-bar__item{
   margin-left: 335px; /*GLOBAL*/
   display: inline-block;
   font-size: 15px;
   font-family: 'Roboto', sans-serif;
  }
 
 .nav-bar__item a {
   display: block;
   color: white;
   text-align: center;
   padding: 14px 16px;
   text-decoration: none;
   display: inline-block;
   background-color: #60564a;
   /*z-index: 4;*/
 }
 
 .nav-bar__item a:hover {
   background-color: darkgreen;
   z-index: 10;
 }
/*^^^^^NAV BAR^^^^^*/
.article-div {
  position: relative;
  padding: 0;
  z-index: 1;
}
#article-main_h1 {
  left: 400px;
  text-align: center;
  top: 100px;
  
}
#h2-form {
  margin-right: 12px;
}
/*FORM */
textarea {
  border-radius: 3%;
}
.container {
  position: absolute;
  text-align: center;
  justify-content: center;
  right: 45vw;
  top: 140px;

}

form {
  position: absolute;
  right: -125px;
  
}
#input-name {
padding: 5px;
margin: 5px;
border-radius: 6%;
}
#input-email {
padding: 5px;
margin: 5px;
border-radius: 6%;
}
 .article{
  position:relative;
 }
button {

padding: 10px 30px;
border-radius: 14%;
font-family: 'Roboto', sans-serif;
color: white;
background-color: #24a0ed;
font-size: large;
z-index: 1;
text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
justify-content: center;
align-items: center;
left: 20px;
background-color:  #24a0ed;
}
button:hover {
  background-color: blue;
}

/*ICON'S*/
.icon__received {
position: absolute;
right: 100px;
top: 300px;
z-index: -1;
}
.icon-compose {
position: absolute;
left: 100px;
top: 300px;
z-index: -1;
}
/*^^^^^^^ICON'S END^^^^^^^