@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;600&display=swap');

:root{
  --gold:#bb9d3b;
  --bg:#000;
  --input:#dcdcdc;
}

*{
  box-sizing:border-box;
}

body{
  margin-top:40px;
  background:var(--bg);
  font-family:'Montserrat',sans-serif;
  color:white;
  display:flex;
  justify-content:center;
  align-items:center;
  min-height:100vh;
  position:relative;
  /* overflow:hidden; */
}

.form-wrapper{
  width:420px;
  max-width:90%;
  text-align:center;
  z-index:2;
  margin-bottom:140px;
}

.logo{
  width:100%;
  max-width:160px;
  height:auto;
  /* margin-bottom:20px; */
}

.desc{
  font-size:16px;
  line-height:1.6;
  margin-bottom:30px;
}

form{
  text-align:left;
}

label{
  display:block;
  margin:15px 0 6px;
  font-size:14px;
}

input{
  width:100%;
  padding:14px;
  border-radius:4px;
  border:none;
  background:var(--input);
  font-size:14px;
}

button{
  width:100%;
  margin-top:25px;
  padding:14px;
  border:none;
  border-radius:4px;
  background:var(--gold);
  color:black;
  font-weight:600;
  font-size:15px;
  cursor:pointer;
  transition:0.3s;
}

button:hover{
  opacity:.85;
}

.website{
  margin-top:40px;
  color:var(--gold);
  font-weight:600;
  letter-spacing:1px;
}

/* Mobile Devices */
@media (max-width: 480px) {
  .logo{
    max-width:220px;
    /* margin-bottom:15px; */
  }
  
  .desc{
    font-size:14px;
  }
}

/* Tablets */
@media (min-width: 481px) and (max-width: 768px) {
  .logo{
    max-width:240px;
    /* margin-bottom:18px; */
  }
}

/* Large Screens */
@media (min-width: 769px) {
  .logo{
    max-width:300px;
    /* margin-bottom:20px; */
  }
}

.bottom-art{
  position:absolute;
  bottom:0;
  left:0;
  width:100%;
  height:auto;
  display:block;
  z-index:1;
  pointer-events:none;
}