@charset "utf-8";
/* CSS Document */

:root {
  --body-title-font: "Inter", sans-serif;
  --body-text-font: "Inter", sans-serif
  --fontawesome-free: "Font Awesome 6 Free";
  
  --body-title-color: #000000;
  --body-text-color: #666666;
  --body-link-color: #c1a475;
}

*, html {
  margin:0;
  padding:0;
}

body {
  font-family:var(--body-text-font);
  color:var(--body-text-color);
}

a.button {
  position: relative;
  cursor: pointer;
  font-size: 20px;
  font-weight: 500;
  color:var(--body-link-color);
  padding: .3em 1em;
  line-height: 1.7em;
  text-transform: uppercase;
  background-color: transparent;
  background-size: cover;
  background-position: 50%;
  background-repeat: no-repeat;
  border: 2px solid var(--body-link-color);;
  border-radius: 3px;
  transition:all .2s ease-out;
}

a.button:hover {
  color: var(--body-text-color);
  background-color: var(--body-link-color);
  border-color: var(--body-link-color);
  border-radius: 0px;
  padding: .3em 2em .3em .7em;
  transition:all .2s ease-out;
}

a.button:after {
  font-family: var(--fontawesome-free);
  content: '\f105';
  font-weight:900;
  position: absolute;
  right:20px;
  opacity:0;
  transition:all .2s ease-out;
}

a.button:hover:after {
  right:15px;
  opacity:1;
  transition:all .2s ease-out;
}

#coming {
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

#coming .row {
  width: 280px;
  height: 280px;
  padding: 100px;
  border:10px solid var(--body-link-color);
}

#coming img.logo {
  width:100%;
  padding-bottom: 20px;
  margin-bottom:10px;
  border-bottom: 1px solid var(--body-title-color);;
}

#coming form {
  margin:10px auto;
  text-align: center;
}

#coming input[type="text"] {
  width:calc(100% - 16px);
  padding:6px;
}