style.css

/* Select readable font and text/background colors with good contrast. To search for different Google Fonts, go to https://www.w3schools.com/howto/howto_google_fonts.asp */

body, html {
    height: 100%;
    margin: 0;
    font-family: 'Roboto';
    color: black;
    background-color: white;
  }  

.hero-image {
/* This selector controls the "hero image" class. You may need to change "hero.jpg" name/format to match your asset, or vice-versa */
    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("hero.jpg");
    height: 100%;
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
  }

/* This selector places text in the middle of the image */
.hero-text {
    text-align: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

/* The next two selectors control hero-text font properties. 2em is 2x inherited font-size value. 5 em is 5x stated value. */
.hero-text h1 {
    font-family: inherit;
    font-size: 5em;
    color: white;
  }

.hero-text h2 {
    font-family: inherit;
    font-size: 2em;
    color: white;
  }
  

 /* The text-block class selector controls the text-box on screens >800px. You will also need to adjust values in the next text-box selector. */
.text-block {
    display: block;
    width: 55%;
    background-color: inherit;
    padding: 0px;
    border: 0px solid black;
    margin-top: 100px;
    margin-bottom: 100px;
    margin-left: auto;
    margin-right: auto;
    font-family: inherit;
    font-size: 1.5em;
    color: inherit;
  }

 /* This code helps your text-block scale for screens ≤800px. */
  @media screen and (max-width: 800px) {
    .text-block {  
        display: block;
        width: 90%;
        background-color: inherit;
        padding: 0px;
        border: 0px solid black;
        margin-top: 100px;
        margin-bottom: 100px;
        margin-left: auto;
        margin-right: auto;
        font-family: inherit;
        font-size: 1.25em;
        color: inherit;
    }
  }


 /* The pull-quote class selector uses large text and border top/bottom properties.  */
.pull-quote {
    display: block;
    width: 70%;
    background-color: inherit;
    padding-left: 20px;
    padding-right: 20px;
    border-top: 3px solid #000;
    border-bottom: 3px solid #000;
    margin-top: 100px;
    margin-bottom: 100px;
    margin-left: auto;
    margin-right: auto;
    font: inherit;
    font-size: 1em;
    color: inherit;
  }


/* - Bulleted Points or List -
Unordered list element selector. Change unordered list from disc (default) to circle, square, or none. */
ul {
    list-style-type: default;
    padding-left: none;
    font: inherit;
    font-size: 1em;
    line-height: 2.2;
    color: inherit;
  }

/* Ordered list element selector. Change ordered list to upper-roman or lower-alpha. */
ol {
    list-style-type: default;
    padding-left: none;
    font: inherit;
    font-size: 1em;
    line-height: 2.2;
    color: inherit;
  }


/* - Link that Looks Like a Button -
Button-box class selector uses Flex Box Design (flex display) to scale the element in one dimension. */
.button-box {
    display: flex;
    height: 200px;
    border: 0px solid none;
    align-items: center;
    justify-content: center;
  }

/* Change button colors and other attributes here. */
.button {
    display: inline-block;
    background-color: #2A5DB0;
    padding: 15px 32px;
    border: none;
    cursor: pointer;
    font: inherit;
    font-size: 16px;
    color: white;
    text-align: center;
  }

/* Hover effect improves accessibility. */
.button:hover {
    background-color: #4682B4;
  }


/* - CSS Flexbox Layout -
CSS Flexbox creates responsive layouts for images, text, and other content. Reuse .column class to create additional grids with different proportions for specific content */

.flexbox-container {
  padding-top: 100px;
  padding-bottom: 100px;
  text-align: center;
 }

.row {
   display: flex;
   flex-wrap: wrap;
   padding: 0 4px;
   justify-content: center;
 }

/* Change max-width value depending on number of columns. */
.column {
   flex: 25%;
   max-width: 25%;
   padding: 0 4px;
 }

.column img  {
   margin-top: 8px;
   vertical-align: middle;
   width: 100%;
 }

/* CSS Grid Responsive layout - makes grid a one column-layout instead of two or three columns */
@media screen and (max-width: 800px) {
.column {
       flex: 75%;
       max-width: 75%;
   }
 }

 
/* - Frame class selector -
Use CSS box model to style image content. Adjust frame/filter class selector properties to customize. Copy, paste, rename class selector to quickly create alternative image stylings. */
.frame {
    display: block;
    background: orange;
    padding: 5px;
    border: 5px solid orangered;
    border-radius: 3%;
    margin-top: 0px;
    margin-bottom: 0px;
    margin-left: auto;
    margin-right: auto;
    filter: grayscale(%);
    filter: blur(px);
    filter: hue-rotate(deg);
}


/* - Polaroid - 
Polaroid class selector and container. Adjust Polaroid width here. */
.polaroid {
    display: block;
    width: 50%;
    background-color: white;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    margin-left: auto;
    margin-right: auto;
    margin-top: none;
    margin-bottom: none;
  }

.polaroid img {
    width: 100%;  /* Keep 100% */
    filter: grayscale(%);
    filter: blur(px);
    filter: hue-rotate(deg);
  }

.polaroid-caption {
    text-align: center;
    padding: 10px 20px;
  }


/*  - Image Container with Text Box -
Add text to your image and control text-box location*/
.image-container {
  display: block;
  position: relative;
  width: 90%;
  margin-top: 100px;
  margin-bottom:100px;
  margin-left: auto;
  margin-right: auto;
}

.image-container img {
  width: 100%;   /* Keep 100%. Add Filters.*/
}

.image-container-text {
  position: absolute;
  /*Using max-with property with pixels will prevent a left aligned box from over-scrolling*/
  max-width: 300px;
  /*Change location right/left and top/bottom. To center use top 50% left 50% */
  bottom: 20px;
  right: 20px;
  /*Using rgba (red,blue,green, alpha) allows us to control color and opacity. For a white tinted text box, use 255, 255, 255, .3 */
  background-color: rgba(0, 0, 0, .3);
  color: white;
  padding-left: 20px;
  padding-right: 20px;
  font-family: inherit;
  font-size: inherit;
}


/*  - Parallax -
This code controls that cool parallax image and scrolling effect. Change the image "fuego.jpg" below to match your asset.*/
.parallax {
    background-image: url("parallax.jpg");
/* Set a specific height */
    height: 500px;
/* control the parallax scrolling effect */
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    margin-top: 100px;
    margin-bottom: 0px;
  }

/* This code stops the parallax image and scrolling effect for small screens--at the moment, iPhones just don't like it.*/
@media screen and (max-width: 768px) {
    .parallax {
		    background-attachment: inherit;
        height: 400px;
	  }
  }


/*  - YouTube Video -
Uses container to control video across different screen sizes. */
.video {
    width: 75%;
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 100px;
    padding-bottom: 100px;
    margin: auto;
    text-align: center;
  }

.video-container {
  	position:relative;
    height:0;
  	overflow:hidden;
  	padding-bottom:56.25%;
  	padding-top:30px;
  }

.video-container iframe, .video-container object, .video-container embed {
  	position:absolute;
  	top:0;
  	left:0;
  	width:100%;
  	height:100%;
  }

  @media screen and (max-width: 800px) {
    .video {
        width: 90%;
        margin-top: 100px;
        margin-bottom: 100px;
    }
  }


/*  - Caption -
Style caption left, center, justify, right. */
.caption {
    display: block;
    padding: none;
    border: none;
    margin: none;
    text-align: center;
  }


/*  - Logo -
Logo width controlled inline */
.logo {
    display: block;
    padding: 10px;
    border: 0px solid black;
    margin-top: 200px;
    margin-bottom: 0px;
    margin-left: auto;
    margin-right: auto;
    font: inherit;
    font-size: 12pt;
    text-align: center;
  }


/*  - Footer -
Add a Copyright */
.footer {
    border: none;
    padding: 10px;
    margin: auto;
    font: inherit;
    font-size: inherit;
    text-align: center;    
  }