@import "navbar.css";
@import "flex.css";
@import "footer.css";
@import url(https://fonts.googleapis.com/css?family=Oswald:300,400,500&display=swap);
/* Mobile first Screens*/
body {
  font-family: "Oswald", sans-serif;
  font-size: 1.2em;
  font-weight: 300;
}
a {
  text-decoration: none;
  color: black;
}
.container {
  /* Step 1: Set display to grid */
  display: grid;
  /* initially each element has it's own row for small screens */
  grid-template-areas:
    "nav"
    "hp"
    "os"
    "ft";
  grid-template-rows: 192px;
  min-height: 95vh;
}
.box {
  /* Step 1: Set display to grid */
  display: flex;
  align-items: center;
  justify-content: center;
}
.offset-box {
  grid-area: os;
  background-color: darkseagreen;
  opacity: 0.5;
  z-index: -1;
}
#like-share {
  width: 100px;
  height: auto;
}
#like-share-btn {
  border: 1px solid green;
  background-color: white;
  text-align: center;
  margin-left: 25px;
  margin-top: 19px;
  display: inline-block;
  height: 52px;
  width: 163px;
  font-size: 15px;
}
#footer {
  grid-area: ft;
  border-top: 1px solid black;
}
/* Custom break point Small Screens*/
@media (min-width: 600px) and (max-width: 660px) {
  .container {
    grid-template-areas:
      "nav nav nav nav nav nav nav nav"
      "hp hp hp hp hp hp hp hp"
      "os os os os os os os os"
      "ft ft ft ft ft ft ft ft";
    grid-template-rows: 180px 2fr 178px 1fr;
  }
}
/* Medium Screens */
@media (min-width: 660px) and (max-width: 1100px) {
  .container {
    grid-template-areas:
      "nav nav nav nav nav nav nav nav"
      "hp hp hp hp hp hp hp hp"
      "hp hp hp hp hp hp hp hp"
      "hp hp hp hp hp hp hp hp"
      "hp hp hp hp hp hp hp hp"
      "ft ft ft ft ft ft ft ft"
      "ft ft ft ft ft ft ft ft";
    grid-template-rows: 106px 2fr 2fr 1fr 30px 170px 30px;
  }
  .offset-box {
    position: fixed;
    border: 3px solid green;
    height: 172px;
    width: 352px;
    text-align: center;
    bottom: 21%;
    right: 18px;
    z-index: 2;
    background-color: darkseagreen;
  }
  #like-share {
    width: 75px;
  }
  #like-share-btn {
    border: 1px solid green;
    background-color: white;
    text-align: center;
    margin-left: 25px;
    margin-top: 13px;
    display: inline-block;
    height: 43px;
    width: 112px;
    font-size: 15px;
  }
}
/* Large Screens */
@media (min-width: 1101px) {
  .container {
    grid-template-areas:
      "nav nav nav nav nav nav nav nav"
      "hp hp hp hp hp hp hp hp"
      "hp hp hp hp hp hp hp hp"
      "hp hp hp hp hp hp hp hp"
      "hp hp hp hp hp hp hp hp"
      "ft ft ft ft ft ft ft ft"
      "ft ft ft ft ft ft ft ft";
    /* grid-template-columns: 300px 300px 300px; */
    grid-template-rows: 100px 2fr 2fr 1fr 30px 170px 30px;
  }
  .offset-box {
    position: fixed;
    border: 3px solid green;
    height: 172px;
    width: 352px;
    bottom: 284px;    
    bottom: 21%;
    right: 13px;
    z-index: 2;
    background-color: darkseagreen;
  }
  #like-share {
    width: 100px;
  }
}