/*Global settings*/
*{
    background-color: tan; /* Origonal-lightskyblue*/
}
body {
  margin: 0px;
  


  }
  #main--home {
    margin-left: auto;
    margin-right: auto;

  }
/* image centered*/
.div-area--img{
  display:block;
  border:solid 1px;
  border-color: #60564a;
  position: fixed;
  z-index: 2;
  top: 48px;   /*GLOBAL*/
  margin-left: auto;
  margin-right: auto;
  
    
}
.div-img{
  position: relative;
  justify-content: center;
  margin-left: auto;
  margin-right: auto;
  width: 50vw;
}
/*NAV BAR*/
.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: -20px;
   
   
 }
 .nav-bar{
   list-style-type: none;
   margin: 0;
   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{
  position: static;
   /*GLOBAL*/ /* margin-left:335px ; */
  display: inline-block;
  font-size: 15px;
  font-family: 'Roboto', sans-serif;
  margin-left: 105px;
  margin-right: 0px;
  padding: 0px;
  }
 
 .nav-bar__item a {
   display: block;
   color: white;
   text-align: center;
   padding: 14px 0px;     /*GLOBAL*/
   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^^^^^*/
/*Graffiti Image Left Side*/



/*^^^^^Graffiti Can Image Left Side^^^^^*/
/*^^^^^Graffiti Can Image Right Side*/ 
.graffiti-img3{
  position: fixed;
  top: 100px;
  z-index: 3;
  right: 115px;
  display: inline-block;
}
/*^^^^^Graffiti Can Image Right Side^^^^^*/
/*Vertical writing*/
.div-vert{
  position: absolute;
  width: 100vw;
  display: block;
  
}
.vert{
  writing-mode: vertical-lr;
  font-size: 40px;
  position: fixed;
  right: 50px;
  top: 140px;
  font-family: 'Roboto', sans-serif;
  z-index: 1;
  display: flex;
  background-color: transparent;
  color: #000000;
  text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff;
}
/*^^^^^Vertical writing^^^^^*/
/*Hire Me */
.div-button{
  position: fixed;
  top: 450px;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 2;
  background-color: transparent;
  left: 360px;
  
}
.button-heading{
position: fixed;
margin-left: 40px;
font-family: 'Roboto', sans-serif;
color: #ffffff;
outline-color: #000000;
background-color: transparent;
text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;

}
.hire-button{
position: fixed;
margin-top: 135px;
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;
}
.hire-button:hover{
  background-color: blue;
}
/*^^^^^Hire Me^^^^^*/