fcc-challenges/tools-that-love-you/tools_that_love_you.css

.id-nav-hack {
  margin-top: -16rem;
  padding-top: 16rem;
}

body {
  width: 100%
}

#header {
  background-color: #ffffff;
  display: flex;
  flex-direction: column;
  left: 0;
  padding-bottom: 2rem;
  position: fixed;
  right: 0;
  top: 0;
  z-index: 999;
}

#logo-container {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  padding: 2rem 8rem 0;
}

#image-container {
  margin-top: 1rem;
}

#logo-name {
  background-color: #69c5f8;
  border-radius: 1rem;
  font-weight: 800;
  padding: 1rem 1rem 0;
  text-align: center;
}

#nav-bar {
  display: flex;
  flex-direction: row;
  flex-grow: 1;
  font-size: 2rem;
  justify-content: space-around;
  margin-top: 2rem;
}

#form {
  align-items: center;
  display: flex;
  flex-direction: column;
  margin-bottom: 5rem;
  padding-top: 13rem;
}

#form label,input {
  margin: 1rem auto;
}

#Tools {
  display: flex;
  flex-direction: column;
  margin-bottom: 4rem;
}

#Tools div{
  flex-grow: 1;
}

.tool {
  display: flex;
}

.tool-icon  {
  flex: 1;
  max-width: 30%;
  padding-right: 90px;
}

.tool-desc-container {
  flex: 1;
}

.tool-desc-container ul{
  list-style: none;
  margin-left: -4rem;
}

.tool-icon i {
  color: #f89c69;
  margin: 4rem 0 4rem 95%;
}

.video {
  display: flex;
  justify-content: center;
  margin-bottom: 3rem;
  position: relative;
}

.video-container {
  width: 90%;
}

.embed-container {
  height: 0;
  max-width: 100%;
  overflow: hidden;
  padding-bottom: 56.25%;
  position: relative;
}

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

#purchase {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}

#purchase div {
  text-align: center;
  width: 90%;
  border-color: #000000;
  border-style: solid;
  border-width: 1px;
  border-radius: 1rem;
  box-shadow: 10px 10px;
  margin: 2rem;
}

.footer {
  margin: 4rem 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  font-size: 150%;
  font-family: monospace;
  width: 100%;
}

.footer-l {
  font-size: 100%;
}

.footer-lr {
  text-align: center;
}

.footer-middle {
  flex-direction: row;
}

@media (orientation: landscape) {
  #header {
    flex-direction: row;
    flex-grow: 1;
    justify-content: flex-start;
  }

  #logo-container {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    padding: 2rem 0 0;
    width: 230px;
  }

  #image-container {
    margin-right: 25px;
    margin-top: 1rem;
  }

  #nav-bar {
    flex-direction: row;
    justify-content: space-around;
    margin-top: unset;
    padding-top: 4rem;
    width: auto;
  }

  #form {
    padding-top: 10rem;
  }

  .id-nav-hack {
    margin-top: -10rem;
    padding-top: 10rem;
  }

  .tool-icon  {
    flex: 1;
    max-width: 40%;
    padding-right: 90px;
  }

  .tool-icon i {
    color: #F69D65;
    margin: 4rem 0 4rem 95%;
  }

  .footer-l {
    min-width: 416px;
  }

  .footer-lr {
    flex-grow: 1;
    flex-basis: 0;
  }

  .footer-middle {
    display: flex;
    flex-direction: column;
    justify-content: unset;
    flex-grow: 1;
    flex-basis: 0;
  }

  .footer-middle div {
    display: flex;
    justify-content: space-around;
  }

  .video-container {
    box-shadow: 10px 10px;
    border-radius: 1rem;
    width: 400px;
  }

  #purchase div {
    width: 400px;
  }
}

@media only screen and (max-width: 768px) {

  #form {
    margin-bottom: 1rem;
  }

  #Tools {
    margin-bottom: 0;
  }

  .tool-icon  {
    max-width: 20%;
  }

  #purchase {
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: unset;
    align-items: center;
  }

  .footer {
    margin-top: 0;
    flex-direction: column;
    align-items: center;
    justify-content: unset;
  }

  .footer-middle {
    display: flex;
    justify-content: space-around;
    width: 100%;
    flex-direction: unset;
  }

  .footer-lr {
    margin-top: 1rem;
  }

  .footer-r {
    display: flex;
    font-size: 75%;
    flex-wrap: wrap;
    justify-content: center;
  }

}

@media (orientation: portrait) {
  .footer-l {
    font-size: 75%;
  }
}