/* #F66000 */

/* BASIC CSS RESET */
html, body, div, span, h1, a {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}

/* Actual useful CSS */

body{
  background: url('background.jpg') right center no-repeat;
  background-size: cover;
  font-family: 'Open Sans', sans-serif;
  font-size: 20px;
  color: white;
  text-shadow: 0 0 20px rgba(0,0,0,0.8);
}

#contentContainer{
  max-width: 50vw;
  min-height: calc(100vh - 100px);
  padding: 50px;
  display: flex;
  align-items: center;
  background: linear-gradient(270deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.73) 51%, rgba(0,0,0,1) 69%, rgba(0,0,0,1) 100%);
}

h1{
  color: #f66000;
  font-weight: 700;
  line-height: 1;
  font-size: 50px;
}

.largeText{
  font-size: 32px;
}

#itseezeXS{
  display: none;
}

@media screen and (max-width:900px){
  body{
    background: url('backgroundSmall.jpg') right center no-repeat;
    background-size: auto 100%;
  }

  #contentContainer{
    background: linear-gradient(270deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.51) 51%, rgba(0,0,0,1) 100%);
  }

  h1{
    font-size: 35px;
    line-height: 1.3;
  }

  .largeText{
    font-size: 25px;
  }
}

@media screen and (max-width:580px){
  body{
    background: url('backgroundXS.jpg') right center no-repeat;
    background-size: auto 100%;
  }

  h1{
    font-size: 28px;
    line-height: 1.3;
  }

  .largeText{
    font-size: 20px;
  }

  #itseezeXS{
    display: block;
  }

  #itseezeLarge{
    display: none;
  }


}