/* Goolgle fonts */
@import url("https://fonts.googleapis.com/css2?family=Barlow+Condensed:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Bebas+Neue&family=Satisfy&display=swap");

/* Asterisk wildcard selector to override default browser styles */
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

/* General styles */
body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  color: #24272b;
  font-family: barlow condensed, sans-serif;
  background-color: #3e78b2;
  font-size: 20px;
}

p {
  padding: 5px 10px;
  max-width: 900px;
  margin: 0 auto;
}

h1 {
  font-family: bebas neue, sans-serif;
  text-transform: uppercase;
}

h2 {
  color: #3e78b2;
  text-transform: uppercase;
  text-align: center;
  background-color: rgba(227, 228, 219, 0.8);
  position: sticky;
  top: 52px;
  z-index: 89;
}

h3,
h4 {
  padding: 5px;
  max-width: 900px;
  margin: 0 auto;
  text-align: center;
  text-transform: uppercase;
}

h5 {
  padding: 5px;
  max-width: 900px;
  margin: 0 auto;
  text-decoration: underline;
  text-transform: uppercase;
}

em {
  color: #000000;
  display: flex;
  justify-content: center;
  margin: 20px auto;
}

/* Header */
header {
  position: fixed;
  z-index: 99;
  width: 100%;
  display: flex;
  justify-content: start;
  padding: 0 20px;
  background-color: #3e78b2;
}

header > label > em {
  display: none;
}

/* Nav - Taken from Love Running project */
nav {
  position: absolute;
  background-color: #3e78b2;
  width: 90%;
  top: 98%;
  left: 0;
  display: none;
  padding-left: 5%;
  padding-bottom: 10px;
  border-radius: 0 0 10px 10px;
}

#nav-menu {
  list-style: none;
  font-size: 100%;
}

#nav-menu > li > a {
  text-decoration: none;
  color: inherit;
  text-transform: uppercase;
}

/* Nav toggle - taken from Love Running project */
#nav-toggle:checked ~ nav {
  display: block;
}

#nav-toggle {
  display: none;
}

.nav-toggle-label {
  font-size: 2rem;
  margin-top: auto;
  margin-bottom: auto;
  margin-left: 5px;
}

.active {
  background-color: #e3e4db;
  padding: 0 10px;
  border-radius: 10px;
}

#bodybuilding {
  position: relative;
  margin: auto;
}

#bodybuilding > a {
  text-decoration: none;
  color: inherit;
}

/* Main */
main {
  /* Make main element push footer down - Taken from Love Running project */
  flex: 1 0 auto;
  margin-top: 50px;
  background-color: #ffffff;
}

#hero {
  width: 100%;
  height: 450px;
  background: url("../images/classic_olympia_posedown.webp") no-repeat center -110px;
  position: relative;
  background-color: #24272b;
}

#competition {
  width: 100%;
  height: 100%;
  background: url("../images/sandow_trophy.webp") no-repeat center center/cover;
  position: relative;
}

#competition-text > p > a {
  color: #ffffff;
}

#competition-text {
  background-color: rgba(74, 82, 90, 0.7);
  color: #ffffff;
  height: 100%;
  width: 100%;
}

#prep-supp {
  display: flex;
  justify-content: space-evenly;
  padding: 10px 0;
  max-width: 900px;
  margin: 0 auto;
}

.diet-images {
  background: no-repeat center;
  width: 94px;
  border-radius: 50%;
  max-width: 300px;
  max-height: 300px;
  border: #000000 solid 1px;
  outline: solid 5px #3e78b2;
}

#social > p > a {
  color: inherit;
}

.picture-1 img {
  width: 280px;
  border-radius: 5%;
  max-width: 600px;
  position: relative;
  display: flex;
  justify-content: center;
  margin: 10px auto;
}

/* History */

#history-intro {
  background: url("../images/bodybuilding-over-past-100-years.webp") no-repeat
    top center/cover;
  width: 280px;
  height: 146px;
  position: relative;
  margin: 0 auto;
}

#eras {
  text-align: center;
  text-transform: uppercase;
  padding: 2px 0;
  line-height: 1.6;
}

#eras > ul > li > a {
  text-decoration: none;
  color: #3e78b2;
}

.era-title-space {
  padding: 20px 0;
}

.picture {
  text-align: center;
  padding: 10px;
  font-weight: bold;
}

/* Class for history pictures */
.picture img {
  width: 260px;
  height: 260px;
  object-fit: cover;
  max-width: 860px;
  position: relative;
  display: flex;
  justify-content: center;
  margin: 10px auto;
  border: #000000 solid 1px;
  outline: #3e78b2 solid 15px;
}

#eugen {
  height: 400px;
}

#william {
  height: 350px;
}

#golden {
  width: 260px;
  height: 120px;
  object-fit: cover;
}

#action-hero {
  width: 260px;
  height: 60px;
  object-fit: cover;
}

.video > em {
  font-weight: bold;
  padding: 0;
  margin-top: 0;
  text-align: center;
}

/* Buddy */

#find-a-buddy {
  background: url("../images/branch-trio-training.webp") no-repeat top
    center/cover;
  height: 300px;
  width: 100%;
  background-position: 90%;
  color: #e3e4db;
}

#buddy-form {
  padding: 10px;
  max-width: 500px;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin: 10px auto;
}

input[type="text"],
input[type="email"],
input[type="date"],
input[type="tel"] {
  width: 100%;
  height: 25px;
  text-align: center;
}

.details-field {
  display: flex;
}

fieldset {
  padding: 20px;
  border: inset 2px #3e78b2;
  border-radius: 20px;
}

#lets-go {
  margin: 10px auto;
  padding: 10px 30px;
  border-radius: 5px;
  text-transform: uppercase;
  font-weight: bold;
  color: #ffffff;
  background-color: #3e78b2;
}

/* 404 Page not found and Thank you general styles */

.thanks-not-found > h1 {
  padding: 20px 0;
  text-align: center;
  font-size: 200%;
}

.thanks-not-found > p {
  text-align: center;
  max-width: 500px;
}

.button-position {
  margin: 10px 0;
  display: flex;
  flex-direction: column;
  justify-items: center;
  align-items: center;
}

.button {
  text-align: center;
  margin: 5px;
  background-color: #3e78b2;
  border-radius: 15px;
  width: 60%;
  min-width: 260px;
  max-width: 450px;
}

.button-position > a {
  font-family: bebas neue, sans-serif;
  font-size: 120%;
  text-decoration: none;
  color: #e3e4db;
  background-color: #3e78b2;
  text-transform: uppercase;
  line-height: 50px;
}

/* Footer */
#social-media {
  display: flex;
  justify-content: space-evenly;
  list-style-type: none;
  padding: 10px 0;
  background-color: #ffffff;
}

#social-media i {
  font-size: 140%;
  padding: 5%;
  color: #24272b;
}

/* Media rules for larger mobiles 375px+ */

@media screen and (min-width: 375px) {
  nav {
    width: 85%;
  }

  #nav-menu {
    font-size: 120%;
  }

  .diet-images {
    width: 125px;
  }

  #history-intro {
    width: 375px;
    height: 200px;
  }

  .picture img {
    width: 360px;
    height: 260px;
    object-fit: cover;
  }

  #eugen {
    height: 500px;
  }

  #william {
    height: 440px;
  }

  #golden {
    width: 360px;
    height: 170px;
    object-fit: cover;
  }

  #action-hero {
    width: 360px;
    height: 90px;
    object-fit: cover;
  }

  .picture-1 img {
    width: 360px;
  }

  iframe {
    width: 380px;
    display: flex;
    margin: 0 auto;
  }

  #find-a-buddy {
    height: 400px;
  }
}

/* Media rules for tablet and up */
@media screen and (min-width: 768px) {
  #hero {
    width: 100%;
    height: 450px;
  }

  nav {
    width: 60%;
  }

  #arnold-quote-right-float img {
    float: right;
    width: 66%;
  }

  #history-intro {
    width: 768px;
    height: 300px;
  }

  .picture img {
    width: 740px;
    height: 540px;
    object-fit: cover;
  }

  #eugen {
    height: 990px;
  }

  #william {
    height: 880px;
  }

  #golden {
    width: 740px;
    height: 360px;
    object-fit: cover;
  }

  #action-hero {
    width: 740px;
    height: 190px;
    object-fit: cover;
  }

  .picture-1 img {
    width: 760px;
  }

  .diet-images {
    width: 256px;
  }

  iframe {
    height: 400px;
    width: 760px;
    position: relative;
    display: flex;
    margin: 0 auto;
  }

  #find-a-buddy {
    background: url("../images/branch-trio-training.webp") no-repeat top
      center/cover;
    height: 400px;
    width: 100%;
    color: #e3e4db;
  }
}

@media screen and (min-width: 1044px) {
  /* remove float from arnie quote */
  #arnold-quote-right-float img {
    float: none;
  }

  #history-intro {
    width: 1000px;
    height: 400px;
  }

  .picture img {
    width: 900px;
    height: 540px;
    object-fit: cover;
  }

  #eugen {
    width: 740px;
    height: 990px;
  }

  #william {
    width: 740px;
    height: 880px;
  }

  #golden {
    width: 900px;
    height: 420px;
    object-fit: cover;
  }

  #action-hero {
    width: 900px;
    height: 220px;
    object-fit: cover;
  }

  .picture-1 img {
    width: 900px;
  }

  .diet-images {
    width: 300px;
  }

  iframe {
    height: 600px;
    width: 900px;
  }

  #find-a-buddy {
    background: url("../images/branch-trio-training.webp") no-repeat top
      center/cover;
    height: 600px;
    width: 100%;
    color: #e3e4db;
  }
}