html {
  height: 100%;
  width: 100%;
}

/*Sets the background color of webpage and font family  */
body {
  background-color: #020204;
  background-image: repeating-linear-gradient(to bottom, #020204, #161515, #020204);
  background-size: cover;
  color: #b0b5ba;
  justify-content: left;
  min-height: 100vh;
  font-family: Arial, sans-serif;
}

/*To style line breaks*/
hr {
  color: #b0b5ba;
}

/*navigation bar rules */
.navbar ul {
  list-style-type: none;
  padding: 0px;
  width: 18vw;
  height: 100%;
  border-right: 0.5px solid;
  border-color: #b0b5ba;
  position: fixed;
  top: -15px;
  left: 0;
  /* Background source - https://www.pexels.com/photo/black-and-gray-motherboard-2582937/ */
  background-image: url("../assets/navbar_background.jpeg");
  background-color: black;
  background-size: cover;
  font-family: Arial, sans-serif;
}

.navbar a {
  text-decoration: none;
  color: #d6e0e5;
  padding: 15px;
  display: block;
  text-align: left;
}

.navbar ul li {
  font-size: 3rem;
}

.navbar a:hover {
  background-color: hsl(0, 0%, 10%);
}

/* sets the margin for all contents except the navbar*/
.margin {
  margin-left: 19vw;
}

/* Header sizes and styling*/
h1 {
  color: #b0b5ba;
  text-align: center;
}

h2 {
  color: #b0b5ba;
  text-align: left;
}

h3 {
  color: #b0b5ba;
  text-decoration: underline;
  text-align: center;
}

.formFeedback {
  text-align: center;
  text-decoration: underline;
}

/*Sections for index page*/
.block_title {
  text-align: left;
  width: 36vw;
}
/*Find us here photo*/
#store {
  width: 100%;
  display: block;
}

.block_two {
  text-align: left;
  width: 36vw;
  padding-left: 2vw;
  padding-top: 1vw;
  font-size: 1vw;
}

/*List style and size*/
li {
  font-size: 1rem;
}

ol li {
  font-size: 1vw;
  text-align: left;
  width: 36vw;
}

ol li p {
  font-size: inherit;
  font-family: inherit;
  text-align: inherit;
  width: inherit;
}

/* Sizes the image on the build page*/
#pcbuild {
  width: 30vw;
  height: auto;
  float: right;
  padding-top: 14rem;
  padding-right: 5%;
}

/*Styling for links to external webpages*/
#calc {
  text-decoration: none;
  color: #293dd1;
}

#parts {
  text-decoration: none;
  color: #293dd1;
}

.container {
  padding-bottom: 1vw;
  padding-top: 1vw;
}

p {
  font-size: 1rem;
  text-align: left;
}

/*Style for music box*/
.music {
  padding-bottom: 1rem;
  float: left;
}

audio::-webkit-media-controls-panel {
  background-color: #b0b5ba;
}

/*To hide any media not meeting resolution needed*/
.mobile_media {
  display: none;
}

/*To Style the youtube link on index and the google link on find_us*/
iframe {
  width: 30vw;
  border: 0vw;
  height: 20vw;

  padding-top: 1rem;
  padding-right: 5%;
  padding-bottom: 1rem;

  bottom: 7rem;
  float: right;
  border-color: #020204;
}

.google-map {
  position: relative;
}

.google-map iframe {
  height: 20vw;
  width: 100%;
  top: 100%;
  position: absolute;
}

/*To style the size and font of each section that holds a new build*/
.firstbuild {
  display: inline-block;
  text-align: center;
  width: 47%;
  border-style: outset;
  border-color: #d6e0e5;
  border-width: 1px;
  margin: 1%;
  height: 56rem;
  vertical-align: top;
}

.builds {
  list-style-position: inside;
  text-align: center;
}

.build2 {
  width: 70%;
}

.speclist {
  font-size: 1rem;
  margin: 1rem;
}

textarea {
  width: 50%;
  height: 10%;
  padding: 1%;
}

.buildtitle {
  text-decoration: underline;
  text-align: center;
}

.price {
  text-align: center;
}

.buildp {
  text-align: center;
}

#form-box {
  margin: 5%;
  border: #d6e0e5;
  border-width: 1rem;
  border-style: inset;
  padding: 10%;
  text-align: center;
}

textarea {
  width: 50%;
  height: 2rem
}

/*To size and style the feedback forms*/
#feedback_form {
  text-decoration: underline;
}

.feedback {
  width: 50%;
  height: 4rem;
}

#form-ref {
  color: #293dd1;
  font-size: 2rem;
}

/*Media query for anything below 1050px to resize and restructure looks*/
@media screen and (max-width: 1050px) {
  .mobile_media {
    display: inline-block;
    vertical-align: bottom;
    text-align: center;
    margin-bottom: 10vw;
    width: 90%;
    margin-left: 5%;
    margin-right: 5%;
    position: relative;
    padding-top: 2rem;
    z-index: -1;
  }
  /*To correct margin when navigation bar moves to top of screen*/
  .margin {
    margin-left: 0rem;
    margin-right: 0rem;
  }

/* navigation style*/
.topnav {
  overflow: hidden;
  background-color: #333;
  position: relative;
}

.topnav #myLinks {
  display: none;
}

.topnav a {
  color: white;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
  display: block;
}

.topnav a.icon {
  background: black;
  display: block;
  position: absolute;
  right: 0;
  top: 0;
}

.topnav a:hover {
  background-color: #ddd;
  color: black;
}

.active {
  background-color: #707070;
  color: white;
}

 /*List rules for index page to give them correct size and alignment*/
  .speclist li {
    font-size: 1rem;
  }

  ol li {
    font-size: 3vw;
    font-family: sans-serif;
    text-align: left;
    width: 100%;
  }

  li {
    font-size: 3vw;
  }

   /*Headers and main style and font size*/
  main {
    margin-left: 0;
  }

  h1 {
    font-size: 1rem;
  }

  h2{
    font-size: 3vw;
  }

    /*To hide any desktop media when screen to to small*/
  div .desktop {
    display: none;
  }

  .desktop {
    display: none;
  }

  /*To Style the youtube link on index and the google link on find_us*/
  iframe {
    bottom: 0;
    height: 15rem;
    width: 90%;
  }

  .block_two {
    text-align: center;
    font-size: 3vw;
    width: 90%;

  }

  /*To style line breaks*/
  hr {
    color: #b0b5ba;
  }

  .block_title {
    text-align: center;
    width: 100%;
  }

  #build1 {
    width: 100%
  }

  /*To style the size and font of each section that holds a new build*/
  .firstbuild {
    display: inline-block;
    text-align: center;
    width: 90%;
    border-style: outset;
    border-color: #d6e0e5;
    border-width: 1px;
    margin: 5%;
    height: auto;
    padding-bottom: 1rem;
    vertical-align: top;
  }

  .container {
    padding-bottom: 1vw;
    padding-top: 1vw;
  }

}

/*Media query for anything below 700px to resize and restructure looks*/
@media screen and (max-width: 700px) {
  .mobile_media {
    display: inline-block;
    vertical-align: bottom;
    text-align: center;
    margin-bottom: 10vw;
    width: 90%;
    margin-left: 5%;
    margin-right: 5%;
    position: relative;
    padding-top: 2rem;
    z-index: -1;
  }
  /*To correct margin when navigation bar moves to top of screen*/
  .margin {
    margin-left: 10px;
    margin-right:10px;
  }

  /* navigation style*/
  .topnav {
    overflow: hidden;
    background-color: #333;
    position: relative;
  }
  
  .topnav #myLinks {
    display: none;
  }
  
  .topnav a {
    color: white;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
    display: block;
  }
  
  .topnav a.icon {
    background: black;
    display: block;
    position: absolute;
    right: 0;
    top: 0;
  }
  
  .topnav a:hover {
    background-color: #ddd;
    color: black;
  }
  
  .active {
    background-color: #707070;
    color: white;
  }

  /*Headers and main style and font size*/
  main {
    margin-left: 0;
  }

  h1 {
    font-size: 1rem;
  }

  h2{
    font-size: 3vw;
  }

  /*List rules for index page to give them correct size and alignment*/
  .speclist li {
    font-size: 1rem;
  }

  li {
    font-size: 3vw;
  }

  ol {
    padding-left: 1rem;
  }

  ol li {
    font-size: 3vw;
    font-family: sans-serif;
    text-align: left;
    width: 100%;
  }
  /*To hide any desktop media when screen to to small*/
  div .desktop {
    display: none;
  }

  .desktop {
    display: none;
  }

  /*To Style the youtube link on index and the google link on find_us*/
  iframe {
    bottom: 0;
    height: 15rem;
    width: 90%;
  }

  .block_two {
    text-align: center;
    font-size: 3vw;
    width: 90%;

  }

  /*To style line breaks*/
  hr {
    color: #b0b5ba;
  }

  .block_title {
    text-align: center;
    width: 100%;
  }

  #build1 {
    width: 100%
  }

  .firstbuild {
    display: inline-block;
    text-align: center;
    width: 90%;
    border-style: outset;
    border-color: #d6e0e5;
    border-width: 1px;
    margin: 5%;
    height: auto;
    padding-bottom: 1rem;
    vertical-align: top;
  }

  .container {
    padding-bottom: 1vw;
    padding-top: 1vw;
  }

}