/* 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 {
  margin: 0;
  background-color: #181818;
  color: white;
  text-align:center;
  font-family: Arial;
}

.status{
  margin: 0 0 10px 0;
  font-size:24px;
  font-weight:bold;
}

.header {
  padding: 10px 100px;
  background: #202020;
  margin: 0 0;
  /*
  border-style: none none solid none;
  border-color: red;*/
}

.headerimage{
  width: 25%;
}

.background {
  background-color: #0F0F0F;
  width: 65%;
  height: 100%;
  margin: auto;
  padding: 10px 0;
}

.background-art{
  float: left;
  margin: 0 17.5% 0 17.5%;
  background-color: #000000;
  width: 65%;
  height: 100%;
  padding: 10px 0;
  
  border-style: none solid none solid;
  border-color: red;
}

.aboutmeparagraph{
  width:75%;
  margin: auto;
}

.divider {
  width:70%;
  border-style: solid;
  color: #505050;
}

.columnholder{
  margin: 0 0 0 20%;
  width: 60%;
  overflow: hidden;
}

.colfirst{
  float: left;
  width: 50%;
}

.colsecond{
  float: right;
  width: 50%;
}

.content {
  text-align: left;
  margin: auto;
  width: 35%;
}

.sticky {
  position: fixed;
  top: 0;
  width: 100%;
}

.sticky + .content {
  padding-top: 102px;
}


.button {
  border-radius: 20px;
  width: 110px;
  height: 40px;
  border: solid;
  border-color: red;
  background-color: #303030;
  margin: 5px;
  transition: transform 0.25s ease-out 100ms
}

.button:hover{
  transform: scale(1.2); 
}

.buttonlink {
  font-size: 15px;
  text-decoration: none;
  color: white;
}

.generalnav{
  position: fixed;
  float: right; 
  width: 10%;
  margin: 15px 5% 15px 86.5%;
  padding: 10px 0 10px 0;
}

.portfolionav{
  position: fixed;
  float: left; 
  width: 10%;
  margin: 15px 5% 15px 3.5%;
  padding: 10px 0 10px 0;
}

.portfolionavbutton{
  border-radius: 20px;
  width: 110px;
  height: 40px;
  border: solid;
  border-color: red;
  background-color: #303030;
  margin: 10px 0 10px 0;
  transition: transform 0.25s ease-out 100ms
}

.portfolionavbutton:hover{
  transform: scale(1.2);
}


.portfolionavlink{
  font-size: 15px;
  text-decoration: none;
  color: white;
}

.gallery{
  width: 100%;
  clear:both;
  float:left;
  margin: 0 5% 20px 5%;
}

.galleryitem{
  float:left;
  width: 40%;
  margin: 20px 2.5% 20px 2.5%;
}

.galleryobject{
  width:80%;
  height: auto;
}

.work-video{
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.work-video-container{
  /*border: solid;
  border-color: red;*/
  background-color:#303030;
  width: 100%;
  padding-top: 56.25%;
  height: 0px;
  position: relative;
  transition: transform 0.25s ease-out 100ms
}

.work-video-container:hover{
  transform: scale(1.25);
}

.work-drawing{
  /*border: solid;
  border-color: red;*/
  width:100%;
  height: 100%;
  transition: transform 0.25s ease-out 100ms
}

.work-drawing:hover{
  transform: scale(1.25);
}

.paragraphlink {
  text-decoration: none;
  color: #2081FF;
  color: red;
}

.paragraphlink:hover{
  text-decoration: underline;
}

.requiredinput{
  color: #ff0000;
}

.homeimage{
  width: 35%;
  border-radius:500px;
  border: 5px solid;
  border-color:red;
  transition: transform 0.25s ease-out 100ms
}

.homeimage:hover{
  transform: scale(1.1);
}

.unfilled{
  color:#555555;
}

.extraordinaire{
  transition: transform 0.25s ease-out 100ms 
}

.extraordinaire:hover{
  transform: scale(1.2);
}

/* All Mobile Sizes (devices and browser) */
@media only screen and (max-width: 767px) {

  .content {
    text-align: left;
    margin: auto;
    width: 35%;
  }
  

  .background {
    width: 85%;
    height: 100%;
    margin: auto;
    padding: 10px 0;
  }
  
  .background-art{
    float: none;
    width: 85%;
    height: 100%;
    margin: auto;
    padding: 10px 0;
  }
  
  .homeimage{
    width: 75%;
  }
  
  .headerimage{
    width:100%;
  }
  
  .aboutmecanvas{
    width:80%;
  }
  
  .portfolionav{
    display:none;
  }
  
  .generalnav{
    display:none;
  }
  
  .gallery{
    float: none;
    width: 100%;
    margin: 0 0 20px 0;
  }
  
  .galleryitem{
    float: none;
    margin: 0 5% 20px 5%;
    width:90%;
    height: auto;
  }
  
  .status{
    margin: 0 0 5px 0;
    font-size:16px;
  }
  
  .headerbuttons{
    display:none;
  }
  /*
  .work-video{
    width:280px;
    height:157.5px;
  }
  
  .work-drawing{
    width:280px;
    height:auto;
  }*/
}

/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
@media only screen and (min-width: 480px) and (max-width: 767px) {
  
  .content {
    text-align: left;
    margin: auto;
    width: 35%;
  }
  
    /*Insert your tablet CSS in here!*/
}

/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
@media only screen and (max-width: 479px) {
  .content {
    text-align: left;
    margin: auto;
    width: 80%;
  }
}

@media only screen and (min-width: 767px) and (max-width: 1024px){
  
  /*
  .work-video{
    width:280px;
    height:157.5px;
  }
  
  .work-drawing{
    width:280px;
    height:auto;
  }*/
}