* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: 100vh;
  /* border: 2px blue dashed; */
}
.container {
  width: 54%;
  height: 45vh;
  border: 2px lightgray solid;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  background-color: #fffafa;
  /* position: relative; */
}

.logo {
  height: 40vh;
  /* border: 20px red solid; */
  display: flex;
  flex-direction: column;
  align-items: center;
}
/* logo and login selector */
section article:nth-child(1),
section article:nth-child(3) {
  width: 25vw;
  height: 40vh;
  /* border: 2px green dashed; */
  display: flex;
  justify-content: space-around;
  align-items: center;
}
/* size OR */
.middle {
  font-size: 1.5rem;
}

/* login  */
section article:nth-child(1) div {
  width: 16vw;
  height: 8vh;
  /* border: 5px purple dashed; */
  border-radius: 1%;
  display: flex;
  font-size: 1.1rem;
}
/* facebook */
section article:nth-child(1) > div:nth-of-type(1) {
  background-color: #4267b2;
  color: white;
}
/* google */
section article:nth-child(1) > div:nth-of-type(2) {
  background-color: #db4437;
  color: white;
}
/* twitter */
section article:nth-child(1) > div:nth-of-type(3) {
  background-color: #1da1f2;
  color: white;
}
/* content selector */
section article:nth-child(1) div {
  /* width: 16vw;
  height: 8vh; */
  display: flex;
}
/* link selector - should be clickable on all */
section article:nth-child(1) div a {
  width: 16vw;
  height: 8vh;
  text-decoration: none;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
}
/* bar between icon and link */
section article:nth-child(1) div a span {
  height: 1rem;
  width: 0.1rem;
  background-color: lightgray;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 0.5rem 0 0.5rem;
}
/* icon selector */
/* section article:nth-child(1) div span i {
   border: 3px brown solid; 
  height: 3vh;
   align-self: center;
} */
/* form */
section article:nth-child(3) > form {
  /* border: 5px rgb(23, 129, 135) solid; */
  width: 35vw;
  height: 35vh;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  font-weight: bold;
}
section article:nth-child(3) > form h1 {
  font-size: 1.6rem;
}
/* email */
section article:nth-child(3) > form div:nth-of-type(1) > input[type="email"] {
  border: none;
  outline: none;
  width: 13rem;
  border-bottom: 2px solid gray;
  font-size: 1.1rem;
}
/* password */
section
  article:nth-child(3)
  > form
  div:nth-of-type(2)
  > input[type="password"] {
  border: none;
  outline: none;
  width: 13rem;
  border-bottom: 2px solid gray;
  font-size: 1.1rem;
}

.container .login form input[type="email"],
.container .login form input[type="password"] {
  text-align: center;
  padding: 0.2rem 0.6rem;
}
/* target the icons */
.container .login form i {
  position: absolute;
  font-size: 1.1rem;
  z-index: 1;
} /* remember me and login */
section article:nth-child(3) > form > .underline {
  display: flex;
  width: 17rem;
  height: 5rem;
  justify-content: space-between;
  align-items: center;
}
/* checkbox and remember me */
.container .login .underline .remember {
  width: 11rem;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
}
/* checkbox bigger */
section
  article:nth-child(3)
  > form
  .underline
  > div:nth-of-type(1)
  > input[type="checkbox"] {
  width: 1.5rem;
  height: 1.5rem;
}
#rem {
  font-size: 1.2rem;
}
/* login */
section
  article:nth-child(3)
  > form
  .underline
  > div:nth-of-type(2)
  > input[type="button"] {
  width: 6rem;
  height: 2.5rem;
  border: lightblue;
  background-color: #87cefa;
  color: white;
  cursor: pointer;
  font-size: 1.5rem;
  border-radius: 3%;
}

/* bottom */
section article:nth-child(4) {
  width: 66vw;
  height: 5vh;
  display: flex;
  justify-content: center;
  border: 2px lightgrey solid;
  font-size: 1.3rem;
}
/* divider */
.bot-div + span {
  height: 1.3rem;
  width: 0.2rem;
  position: absolute;
  background-color: lightgray;
  display: flex;
  justify-content: center;
  align-items: center;
}
/* anchor at the bottom */
section article:nth-child(4) > div > a:nth-child(1) {
  display: flex;
  text-decoration: none;
  color: blue;
  padding: 0.2rem 0.3rem;
  font-size: 1.5rem;
}
/* div register now */
section article:nth-child(4) > div:nth-child(1) {
  display: flex;
  /* border: 2px rgb(0, 106, 255) solid; */
}
/* div forgotten */
section article:nth-child(4) div:last-child {
  display: flex;
  /* border: 2px rgb(255, 0, 204) solid; */
}
/* the round divider */
section article:nth-child(2) {
  border: 2px lightgray solid;
  height: 11rem;
  display: flex;
  align-items: center;
  background-color: #f2f9ff;
}
/* circle  */
section article:nth-child(2) > span {
  position: absolute;
  transform: translate(-50%);
  border: 2px solid gray;
  border-radius: 50%;
  display: flex;
  background: #f2f9ff;
}
/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
  /* change the structure from top to bottom */
  .container {
    width: 100vw;
    height: 100vh;
    display: grid;
    grid-template-rows: 40vh 5vh 40vh 14vh;
    grid-template-areas:
      "login"
      "middle"
      "logo"
      "bottom";
  }
  /* target the container with the logos  */
  .container .logo {
    grid-area: logo;
    display: flex;
    height: 100%;
    width: 20rem;
    font-size: rem;
  }
  /* each logo */
  .container .logo div {
    width: 95%;
    font-size: 1.2rem;
    justify-content: center;
  }
  /* middle line */
  .container .middle {
    grid-area: middle;
    height: 5%;
    width: 20rem;
    font-size: 1.5rem;
    justify-content: center;
  }
  /* center */
  .container .middle span {
    margin-left: 5%;
  }
  /* the sign in form */
  .container .login {
    width: 20rem;
    height: 100%;
    grid-area: login;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  /* resize header */
  .container .login form h1 {
    width: 10rem;
    font-size: 1.7rem;
    padding-bottom: 1rem;
  }
  /* resize the bottom line */
  .container .login form input[type="email"],
  .container .login form input[type="password"] {
    width: 15rem;
    text-align: center;
    font-size: 1.3rem;
    padding-bottom: 1.1rem;
    position: relative;
  }
  /* target the icons */
  .container .login form i {
    position: absolute;
    font-size: 1.2rem;
    z-index: 1;
  }
  /* elements under the email and password */
  .container .login .underline {
    width: 20rem;
    height: 25%;
    display: flex;
    justify-content: space-around;
    align-items: center;
  }
  /* checkbox remember me section */
  .container .login .underline .remember {
    width: 50%;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
  }
  /* checkbox */
  .container .login .underline .remember input[type="checkbox"] {
    width: 1.5rem;
    height: 1.5rem;
  }
  /* text Remember me */
  .container .login .underline .remember input[type="checkbox"] + div {
    font-size: 1.2rem;
  }
  /* size of the button  */
  .container .login .underline .log input[type="button"] {
    width: 6rem;
    height: 3rem;
    border-radius: 4%;
    font-size: 1.3rem;
  }
  /* bottom part */
  .container .bottom {
    height: 4rem;
    width: 20rem;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
  }
  /* target the last two divs */
  .container .bottom div {
    width: 15rem;
    height: 2rem;
    justify-content: space-evenly;
    font-size: 1.3rem;
  }
  .container .bottom div a {
    width: 9rem;
    height: 3rem;
  }
}
/* Small devices (portrait tablets and large phones, 600px and up to 992px) */
@media only screen and (min-width: 601px) and (max-width: 992px) {
  /* need to target resize again because it is not mobile first */
  .container {
    width: 100vw;
    height: 100vh;
    display: grid;
    grid-template-rows: 40vh 5vh 40vh 14vh;
    grid-template-areas:
      "login"
      "middle"
      "logo"
      "bottom";
  }
  .container .logo {
    grid-area: logo;
    display: flex;
    height: 100%;
    width: 20rem;
    font-size: 1.2rem;
  }
  .container .logo div {
    width: 95%;
    font-size: 1.5rem;
    justify-content: center;
  }
  .container .middle {
    grid-area: middle;
    height: 5%;
    width: 20rem;
    font-size: 1.5rem;
    justify-content: center;
  }
  .container .middle span {
    margin-left: 5%;
  }
  .container .login {
    width: 20rem;
    height: 100%;
    grid-area: login;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .container .login form h1 {
    font-size: 1.9rem;
    padding-bottom: 1rem;
  }
  .container .login form input[type="email"],
  .container .login form input[type="password"] {
    width: 15rem;
    text-align: center;
    font-size: 1.3rem;
    padding-bottom: 1.1rem;
    position: relative;
  }
  .container .login form i {
    position: absolute;
    font-size: 1.4rem;
    z-index: 1;
  }
  .container .bottom {
    grid-area: bottom;
    flex-direction: column;
    justify-content: center;
  }
  .container .login .underline {
    width: 20rem;
    height: 25%;
    display: flex;
    justify-content: space-around;
    align-items: center;
  }
  /* checkbox remember me section */
  .container .login .underline .remember {
    width: 60%;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
  }
  /* checkbox */
  .container .login .underline .log input[type="button"] {
    width: 7rem;
    height: 3rem;
    border-radius: 4%;
    font-size: 1.3rem;
  }
  /* text Remember me */
  .container .login .underline .remember input[type="checkbox"] + div {
    font-size: 1.4rem;
  }
  .container .login .underline .remember input[type="checkbox"] {
    width: 1.8rem;
    height: 1.8rem;
  }
  .container .bottom {
    height: 4rem;
    width: 23rem;
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
  }
  .container .bottom div a {
    width: 10rem;
    height: 5rem;
    font-size: larger;
  }
  /* bottom part */
  .container .bottom div {
    width: 20rem;
    height: 3rem;
    justify-content: center;
    font-size: 1.3rem;
    padding-left: 10%;
  }
}