style.css

/* Default style for all the text in body */
body {
  font-family: "Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial, Verdana, sans-serif;
}

/* Main container which contains my navbar and main images */
.container {
  position: relative;
  background-image: url('images/main_image.jpg');
  background-repeat: no-repeat;
  background-position: bottom;
  margin: 0 auto;
  height: 690px;
  max-width: 1442px;
}

/* Navbar styles */
.nav-flex {
  font-size: 16px;
  border: 1px solid rgb(109, 109, 109);
  background:
    linear-gradient(
      to bottom,
      rgb(134, 134, 134) 5%,
      rgb(128, 128, 128) 50%,
      rgb(107, 107, 107) 51%,
      rgb(99, 99, 99) 8%,
      rgb(121, 121, 121) 94%
    );
  border-right: 1px solid rgba(75, 75, 75, 0.5);
  color: rgba(255, 255, 255, 0.9);
  text-shadow:
    0 0 1px rgba(0, 0, 0, 0.753),
    1px 1px 1px rgba(66, 66, 66, 0.651);
  cursor: pointer;
  text-align: center;
  border-radius: 8px;
  margin: 0 auto;
  position: relative;
  top: 110px;
  display: flex;
  max-width: 982px;
  height: 35px;
}

/* Nav style for all items */
.nav-item {
  flex: 1;
}

/* Nav style for items from 1 to 7 | Input is excluded */
.nav-style {
  padding-top: 7px;
  border-right: 1px solid #999;
}

/* Style for my first item | Apple Logo */
.nav-item-1 {
  border-right: 1px solid #999;
}

/* Style for apple logo */
img.apple-logo {
  width: 20px;
  padding-top: -3px;
}

/* Hover effects for navbar */
.nav-style:hover,
.nav-item-1:hover {
  background: rgba(0, 0, 0, 0.4);
}

/* Style for the input inside my navbar */
input {
  border: 1px solid rgb(109, 109, 109);
  background:
    linear-gradient(
      to bottom,
      rgb(134, 134, 134) 5%,
      rgb(128, 128, 128) 50%,
      rgb(107, 107, 107) 51%,
      rgb(99, 99, 99) 8%,
      rgb(121, 121, 121) 94%
    );
  border-radius: 8px;
  width: 105px;
  padding-left: 20px;
  background-size: 16px;
  background-repeat: no-repeat;
  background-image: url('images/search_icon.png');
}

/* Style for input border */
input:focus {
  border-color: rgba(68, 64, 61, 0.8);
  box-shadow: 0 1px 1px rgba(102, 99, 98, 0.075) inset, 0 0 8px rgba(44, 35, 29, 0.6);
  outline: 0 none;
}

/* Style for my item number 8 | Div which contains input  */
.nav-item-8 {
  padding: 0 5px;
  margin-top: 5px;
}

/* Style for my main image | Image representing h1 */
.main-text-header {
  position: relative;
  top: 216px;
  max-width: 983px;
  height: 93px;
  margin: 0 auto;
  background-image: url('images/img_page_header.png');
  background-repeat: no-repeat;
}

/* Style for my secondary image | Image representing h2 */
.secondary-text {
  position: relative;
  top: 225px;
  height: 73px;
  max-width: 983px;
  margin: 0 auto;
  background-image: url('images/img_secondary_text.png');
}

/* Style for the image representing my h3 */
.your-verse {
  background-image: url('images/img_your_verse.png');
  position: relative;
  margin: 0 auto;
  top: 250px;
  height: 31px;
  max-width: 983px;
}

/* Hover effects for my Headers | Images */
.your-verse:hover,
.secondary-text,
.main-text-header {
  cursor: pointer;
}

/* Container for my secundary options, bellow main container */
.flex-container {
  margin: 0 auto;
  display: flex;
  height: 204px;
  max-width: 1442px;
}

/* Style for my flex items */
.flex-item {
  width: 100%;
  height: auto;
  flex: 1;
  border-top: 2px solid white;
  border-right: 3px solid white;
}

/* Hover effects */
.flex-item:hover {
  cursor: pointer;
}

/* Flex items from left to right  */

/* ************************************************* */
.item-1 {
  background-image: url('images/img_1.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  width: 100%;
  height: auto;
}

.item-2 {
  background-image: url('images/img_2.jpg');
  background-size: cover;
}

.item-3 {
  background-image: url('images/img_3.jpg');
  background-size: cover;
}

.item-4 {
  background-image: url('images/img_4.jpg');
  background-size: cover;
}

/* ************************************************* */

/* Main Footer */
footer {
  color: #6e6e6e;
  margin: 0 auto;
  position: relative;
  top: 23px;
  max-width: 982px;
  height: auto;
}

/* Style for all links */
a:link {
  text-decoration: none;
  color: #08c;
}

/* Hover effect for all links */
a:link:hover {
  text-decoration: underline;
}

/* Top container inside footer */
.footer-top-container {
  font-size: 11px;
  max-width: 982px;
  height: auto;
}

/* Left side text */
.footer-text-left {
  margin-top: 23px;
  margin-right: 30px;
}

/* right side text */
.footer-text-right {
  font-size: 11px;
}

/* bottom text */
.footer-text-bottom {
  margin-top: 10px;
}

/* bottom container inside footer */
.footer-bottom-container {
  margin-top: 10px;
  font-size: 11px;
}

/* Usa logo inside footer */
.usa-logo {
  vertical-align: middle;
}