@font-face { 
  font-family: 'SpaceGrotesk';
  font-weight: 500;
  src: url('assets/fonts/SpaceGrotesk-Medium.ttf') format('truetype');
}

@font-face { 
  font-family: 'SpaceGrotesk';
  font-weight: 400;
  src: url('assets/fonts/SpaceGrotesk-Regular.ttf') format('truetype');
}

* {
  margin: 0;
  box-sizing: border-box;
  font-family: 'SpaceGrotesk', sans-serif;
  color: #121212;
}

body {
  width: 100vw;
  height: 100vh;
  display: flex;
}

img.cover {
  width: 50%;
  height: 100%;
  object-fit: cover;
}

.content {
  width: 50%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 100px;
}

.content .logo {
  width: 120px;
}

.shop-warning {
  font-size: 13px;
  font-weight: 400;
}

.shop-warning a {
  font-weight: 500;
  text-decoration: none !important;
}

h4 {
  font-family: 'SpaceGrotesk', sans-serif;
  font-weight: 500;
  font-size: 34px;
}

p {
  /* margin: 32px 0 20px; */
  font-family: 'SpaceGrotesk', sans-serif;
  font-weight: 400;
  margin: 10px 0;
}

input {
  border-radius: 6px;
  border: 1px solid #CBCBCB;
  padding: 13px 16px;
}

button {
 background-color: #121212;
 color: #fff;
 font-size: 18px;
 font-family: 'SpaceGrotesk', sans-serif;
 font-weight: 500;
 border-radius: 6px;
 padding: 10px 0;
 margin-top: 16px;
 border: none;
 cursor: pointer;
}

.icons {
  margin-top: 12px;
  display: flex;
}

.icon {
  width: 40px;
  height: 40px;
  background-color: #FAFAFB;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  margin-right: 10px;
}

.icon img {
  width: 16px;
  height: 16px;
}

.email-sent-info {
  font-size: 12px;
  margin-top: 10px;
  border: 1px solid rgb(11, 195, 11);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: auto;
  height: 0px;
  opacity: 0;
  animation: notification 1s ease-in-out forwards;
}

.hide {
  display: none;
}

@keyframes notification {
  0% {
    height: 10px;
    opacity: 0;
  }
  100% {
    height: 36px;
    opacity: 1;
  }
}