body {
      margin: 0;
      padding: 0;
      font-family: 'Inter', sans-serif;
    }

    #grid-container {
      display: grid;
      grid-template-columns: 1fr 1fr;
      height: 100vh;
    }

    #grid-left-section {
      border-right: 2px solid rgb(231, 228, 228);
    }

    #grid-right-section {
      padding-bottom: 50px;
      padding-top: 50px;
    }

    #left-content-container {
      display: flex;
      flex-direction: column;
      height: 100%;
      width: 100%;
      justify-content: center;
    }

    #text-left-grid {
      text-align: center;
    }

    #logo-pic {
      height: 280px;
      object-fit: contain;
    }

    input {
      width: 100%;
      margin-bottom: 15px;
      padding: 20px;
      border-radius: 15px;
      border: 1px solid gray;
    }

    input:focus {
      border: 2px solid rgb(68, 68, 246);
      outline: none;
    }

    input::placeholder {
      font-size: 16px;
    }

    form {
      margin-left: 50px;
      margin-right: 50px;
    }

    #login-btn {
      background-color: #9abcfc;
      border-radius: 20px;
      padding: 10px;
      text-align: center;
      margin-bottom: 10px;
      color: white;
    }

    #login-btn:hover {
      cursor: not-allowed;
    }

    #forgotten-password {
      text-align: center;
      border-radius: 20px;
      padding: 10px;
      margin-bottom: 40px;
    }

    #forgotten-password:hover {
      background-color: rgb(215, 207, 207);
      cursor: pointer;

    }

    #login-with-fb-btn {
      text-align: center;
      margin-bottom: 10px;
      cursor: pointer;
      border-radius: 20px;
      padding: 10px;
      border: 1px solid rgb(219, 216, 216);
      font-weight: 600;
    }

    #login-with-fb-btn:hover {
      background-color: rgb(215, 207, 207);
    }

    #create-new-acc-btn {
      text-align: center;
      cursor: pointer;
      border-radius: 20px;
      padding: 10px;
      border: 1px solid #77A7FF;
      margin-bottom: 30px;
      color: #0064E0;
      font-weight: 600;
    }

    #create-new-acc-btn:hover {
      background-color: rgb(215, 207, 207);
    }

    svg {
      height: 12px;
      display: flex;
      justify-self: center;
    }

    #main-container {
      display: flex;
      flex-direction: column;
    }

    #links-container {
      display: flex;
      flex-direction: column;
    }

    #first-line-links {
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 10px;
      margin-top: 15px;
    }

    span {
      margin-right: 18px;
      font-size: 12px;
      color: grey;
    }

    span:hover{
      text-decoration: underline;
      cursor: pointer;
    }

    #second-line-links {
      display: flex;
      justify-content: center;
      gap: 15px;
      margin-bottom: 40px;
      padding: 10px;
    }

    select {
      border: none;
      font-size: 12px;
      color: gray;
    }

    select:hover {
      cursor: pointer;
    }

  #footer-container{
    border-top: 2px solid rgb(231, 228, 228);
  }
  strong{
    color: hotpink;
  }