@font-face {
  font-family: Gilroy;
  src: url("./fonts/Gilroy/GILROY-REGULAR.TTF");
}

@font-face {
  font-family: Gilroy-Bold;
  src: url("./fonts/Gilroy/GILROY-BOLD.TTF");
}

@font-face {
  font-family: Gilroy-Black;
  src: url("./fonts/Gilroy/GILROY-BLACK.TTF");
}

@font-face {
  font-family: Gilroy-Medium;
  src: url("./fonts/Gilroy/GILROY-MEDIUM.TTF");
}

@font-face {
  font-family: Gilroy-SemiBold;
  src: url("./fonts/Gilroy/GILROY-SEMIBOLD.TTF");
}

body {
  margin: 0 !important;
}

.gridContainer {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-areas: "leftSide rightSide";
  height: 1080px;
}

.leftSide {
  grid-area: leftSide;
  display: grid;
  grid-template-columns: 15% 1fr 15%;
  grid-template-areas:
    ". . ."
    ". logo ."
    ". lsText ."
    ". . .";
  background-color: #f9f9fb;
  background-image: url(./img/leftSideBG.webp);
}

.logo {
  grid-area: logo;
}

.logo img {
  width: 55%;
  display: block;
  margin: 0 auto;
  margin-top: 40px;
}

.lsText {
  grid-area: lsText;
  display: block;
  margin: 0 auto;
  margin-top: -175px;
}

.lsText div {
  font-size: 40px;
  font-family: "Gilroy-Bold";
}

.lsText div:nth-child(1) {
  font-family: "Gilroy";
  color: #231f20;
}
.lsText div:nth-child(2) {
  color: #190787;
}
.lsText div:nth-child(3) {
  color: #231f20;
}
.rightSide {
  grid-area: rightSide;
  display: grid;
  grid-template-columns: 15% 1fr 15%;
  grid-template-areas:
    ". . ."
    ". newForm ."
    ". . .";
  background-image: url(./img/rightSideBG.png);
  background-position-y: -163px;
  background-position-x: -957px;
}

.newForm {
  grid-area: newForm;
  border-style: solid;
  border-width: 1px;
  border-color: rgb(236, 236, 236);
  border-radius: 50px;
  box-shadow: 109.663px 51.137px 107px 0px rgba(23, 6, 123, 0.06);
  width: 688px;
  padding-top: 7rem !important;
  padding-left: 3rem !important;
  padding-right: 3rem !important;
  padding-bottom: 4rem !important;
  height: fit-content;
  /* From https://css.glass */
  background: rgba(255, 255, 255, 0.2);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  border: 1px solid rgba(255, 255, 255, 0.3);
}

.twentFourLinks {
  color: #190787;
}

@media all and (max-width: 1200px) {
  .gridContainer {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas:
      "leftSide"
      "rightSide";
    height: 1080px;
  }

  .leftSide {
    grid-area: leftSide;
    display: grid;
    grid-template-columns: 15% 1fr 15%;
    grid-template-areas:
      ". . ."
      ". logo ."
      ". lsText ."
      ". . .";
    background-color: #f9f9fb;
    background-image: url(/img/leftSideBG.webp);
  }

  .logo {
    grid-area: logo;
  }

  .logo img {
    width: 100%;
    display: block;
    margin: 0 auto;
    margin-top: 40px;
  }

  .lsText {
    grid-area: lsText;
    display: block;
    margin: 0 auto;
    margin-top: 15px;
  }

  .lsText div {
    font-size: 30px;
    font-family: "Gilroy-Bold";
    text-align: center;
  }

  .lsText div:nth-child(1) {
    font-family: "Gilroy";
    color: #231f20;
    font-size: 44px;
  }
  .lsText div:nth-child(2) {
    color: #e00000!important;
    font-size: 50px;
  }
  .lsText div:nth-child(3) {
    color: #231f20;
    font-size: 38px;
  }
  .rightSide {
    grid-area: rightSide;
    display: grid;
    grid-template-columns: 15% 1fr 15%;
    grid-template-areas:
      ". . ."
      ". newForm ."
      ". . .";
    background-image: url(/img/rightSideBG.png);
    background-position-y: -163px;
    background-position-x: -957px;
  }

  .newForm {
    grid-area: newForm;
    border-style: solid;
    border-width: 1px;
    border-color: rgb(236, 236, 236);
    border-radius: 50px;
    box-shadow: 109.663px 51.137px 107px 0px rgba(23, 6, 123, 0.06);
    width: 120%;
    padding-top: 3rem !important;
    padding-left: 2rem !important;
    padding-right: 2rem !important;
    padding-bottom: 3rem !important;
    height: fit-content;
    /* From https://css.glass */
    background: rgba(255, 255, 255, 0.2);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    margin-top: 15px;
    margin-left: -9%;
  }

  .twentFourLinks {
    color: #190787;
  }

  #lastname,
  #password {
    margin-top: 5px;
  }

  div.grid:nth-child(2) {
    margin-top: 6px !important;
  }
}

@media all and (max-width: 768px) {
  .gridContainer {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas:
      "leftSide"
      "rightSide";
    height: 1080px;
  }

  .leftSide {
    grid-area: leftSide;
    display: grid;
    grid-template-columns: 15% 1fr 15%;
    grid-template-areas:
      ". . ."
      ". logo ."
      ". lsText ."
      ". . .";
    background-color: #f9f9fb;
    background-image: url(/img/leftSideBG.webp);
  }

  .logo {
    grid-area: logo;
  }

  .logo img {
    width: 100%;
    display: block;
    margin: 0 auto;
    margin-top: 40px;
    margin-left: -5px;
  }

  .lsText {
    grid-area: lsText;
    display: block;
    margin: 0 auto;
    margin-top: 15px;
  }

  .lsText div {
    font-size: 30px;
    font-family: "Gilroy-Bold";
    text-align: center;
    margin-left: -5px;
  }

  .lsText div:nth-child(1) {
    font-family: "Gilroy";
    color: #231f20;
    font-size: 36px;
  }
  .lsText div:nth-child(2) {
    color: #e00000!important;
    font-size: 42px;
  }
  .lsText div:nth-child(3) {
    color: #231f20;
    font-size: 31px;
  }
  .rightSide {
    grid-area: rightSide;
    display: grid;
    grid-template-columns: 15% 1fr 15%;
    grid-template-areas:
      ". . ."
      ". newForm ."
      ". . .";
    background-image: url(/img/rightSideBG.webp);
    background-position-y: -163px;
    background-position-x: -957px;
  }

  .newForm {
    grid-area: newForm;
    border-style: solid;
    border-width: 1px;
    border-color: rgb(236, 236, 236);
    border-radius: 50px;
    box-shadow: 109.663px 51.137px 107px 0px rgba(23, 6, 123, 0.06);
    width: 120%;
    padding-top: 3rem !important;
    padding-left: 2rem !important;
    padding-right: 2rem !important;
    padding-bottom: 3rem !important;
    height: fit-content;
    /* From https://css.glass */
    background: rgba(255, 255, 255, 0.2);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    margin-top: 15px;
    margin-left: -25px;
  }

  .twentFourLinks {
    color: #190787;
  }

  #lastname,
  #password {
    margin-top: 5px;
  }

  div.grid:nth-child(2) {
    margin-top: 6px !important;
  }

  div.grid:nth-child(3) {
    margin-top: 0 !important;
  }
}