.login {
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.login__title {
  letter-spacing: 8px;
}
.login__logo {
  background-color: transparent;
  margin-top: 20px;
  margin-bottom: 20px;
  object-fit: contain;
  width: 100px;
  margin-right: auto;
  margin-left: auto;
}

.login__container {
  background-color: white;
  width: 300px;
  height: fit-content;
  display: flex;
  flex-direction: column;
  border-radius: 5px;
  border: 1px solid lightgray;
  padding: 20px;
}
.login__container > h1 {
  font-weight: 500;
  margin-bottom: 20px;
  text-align: center;
  text-decoration: underline;
  text-decoration-color: #cc353e;
}
.login__container > form > h5 {
  margin-bottom: 5px;
}
.login__container > form > input {
  height: 20px;
  margin-bottom: 10px;
  background-color: white;
  width: 90%;
  padding: 1rem;
}
.login__container > p {
  margin-top: 15px;
  font-size: 12px;
}

.login__SignInBtn {
  display: block;
  color: #616467;
  box-shadow: inset 0 0 0 2px #616467;
  font-size: 14px;
  line-height: 1;
  transition-property: background-color, border-color, color, box-shadow, filter;
  transition-duration: 0.3s;
  border-width: 0;
  letter-spacing: 2px;
  min-width: 160px;
  text-transform: uppercase;
  white-space: normal;
  background-color: #cc353e;
  border: 1px solid;
  width: 100%;
  height: 30px;
  border-radius: 500px;
  margin-top: 10px;
  border-color: #a88734 #9c7e31 #846a29;
  color: #fff;
  cursor: pointer;
}

.or_text {
  text-align: center;
}
.login__RegisterBtn {
  border: 1px solid;
  display: block;
  box-shadow: inset 0 0 0 2px #616467;
  font-size: 14px;
  line-height: 1;
  transition-property: background-color, border-color, color, box-shadow, filter;
  transition-duration: 0.3s;
  border-width: 0;
  letter-spacing: 2px;
  min-width: 160px;
  text-transform: uppercase;
  white-space: normal;
  background-color: #226ce0;
  border: 1px solid;
  width: 100%;
  height: 30px;
  border-radius: 500px;
  margin-top: 10px;
  border-color: #a88734 #9c7e31 #846a29;
  cursor: pointer;
  width: 100%;
  height: 30px;
  margin-top: 10px;
  border-color: darkgray;
  cursor: pointer;
}
.login__RegisterBtn:hover {
  transform: translateY(2px);
}

a {
  text-decoration: none;
  color: white;
}

.login__google {
  padding: 16px 14px 18px;
  color: #616467;
  box-shadow: inset 0 0 0 2px #616467;
  background-color: transparent;
  font-size: 14px;
  line-height: 1;
  border-radius: 500px;
  transition-property: background-color, border-color, color, box-shadow, filter;
  transition-duration: 0.3s;
  border-width: 0;
  letter-spacing: 2px;
  min-width: 160px;
  text-transform: uppercase;
  white-space: normal;
  display: block;
  width: 100%;
  cursor: pointer;
}
.login__google:before {
  display: inline-block;
  content: url(data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNTMzLjUgNTQ0LjMiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTUzMy41IDI3OC40YzAtMTguNS0xLjUtMzcuMS00LjctNTUuM0gyNzIuMXYxMDQuOGgxNDdjLTYuMSAzMy44LTI1LjcgNjMuNy01NC40IDgyLjd2NjhoODcuN2M1MS41LTQ3LjQgODEuMS0xMTcuNCA4MS4xLTIwMC4yeiIgZmlsbD0iIzQyODVmNCIvPjxwYXRoIGQ9Ik0yNzIuMSA1NDQuM2M3My40IDAgMTM1LjMtMjQuMSAxODAuNC02NS43bC04Ny43LTY4Yy0yNC40IDE2LjYtNTUuOSAyNi05Mi42IDI2LTcxIDAtMTMxLjItNDcuOS0xNTIuOC0xMTIuM0gyOC45djcwLjFjNDYuMiA5MS45IDE0MC4zIDE0OS45IDI0My4yIDE0OS45eiIgZmlsbD0iIzM0YTg1MyIvPjxwYXRoIGQ9Ik0xMTkuMyAzMjQuM2MtMTEuNC0zMy44LTExLjQtNzAuNCAwLTEwNC4yVjE1MEgyOC45Yy0zOC42IDc2LjktMzguNiAxNjcuNSAwIDI0NC40bDkwLjQtNzAuMXoiIGZpbGw9IiNmYmJjMDQiLz48cGF0aCBkPSJNMjcyLjEgMTA3LjdjMzguOC0uNiA3Ni4zIDE0IDEwNC40IDQwLjhsNzcuNy03Ny43QzQwNSAyNC42IDMzOS43LS44IDI3Mi4xIDAgMTY5LjIgMCA3NS4xIDU4IDI4LjkgMTUwbDkwLjQgNzAuMWMyMS41LTY0LjUgODEuOC0xMTIuNCAxNTIuOC0xMTIuNHoiIGZpbGw9IiNlYTQzMzUiLz48L3N2Zz4=);
  height: 17px;
  width: 17px;
  position: relative;
  top: 2px;
}

.login__google:hover {
  color: #fff;
  background-color: #616467;
}