/* ================= ROOT VARIABLES ================= */
:root{
  --primary:#0067b8;
  --border:#8a8886;
  --text:#323130;
  --muted:#605e5c;

  /* LOGO SIZE CONTROL */
  --logo-height: 44px; /* increase/decrease logo size here */
}

/* ================= BASE ================= */
body{
  margin:0;
  font-family:"Segoe UI", system-ui, sans-serif;
  color:var(--text);
  min-height:100vh;
  background:#f3f2f1;
}

/* ================= DESKTOP BACKGROUND ================= */
@media (min-width: 900px){
  body{
    background:
      url("background.png") center / cover no-repeat,
      #f3f2f1;
  }
}

/* ================= PAGE WRAPPER ================= */
.page-wrapper{
  min-height:100vh;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
}

/* ================= MAIN CARD ================= */
.box{
  width:100%;
  max-width:380px;
  background:#fff;
  padding:36px 32px;
  box-shadow:0 6px 20px rgba(0,0,0,.15);
}

/* ================= LOGO ================= */
.logo{
  height:var(--logo-height);
  margin-bottom:28px;
}

/* ================= HEADINGS ================= */
h2{
  font-size:20px;
  font-weight:600;
  margin:0 0 20px;
}

/* ================= INPUT ================= */
input{
  width:100%;
  height:36px;
  padding:0 10px;
  margin-bottom:16px;
  font-size:14px;
  border:1px solid var(--border);
  outline:none;
}

input:focus{
  border-color:var(--primary);
}

/* ================= BUTTON ================= */
button{
  width:100%;
  height:36px;
  background:var(--primary);
  color:#fff;
  border:none;
  font-size:14px;
  cursor:pointer;
}

/* ================= LINKS ================= */
.links{
  margin-top:16px;
  display:flex;
  flex-direction:column;
  gap:8px;
}

.link{
  color:var(--primary);
  font-size:13px;
  cursor:default;
}

/* ================= ERROR ================= */
.error{
  background:#fde7e9;
  color:#a80000;
  padding:10px;
  margin-bottom:16px;
  font-size:13px;
}

/* ================= LOWER BOX ================= */
.lower-box{
  width:100%;
  max-width:380px;
  margin-top:16px;
  padding:14px;
  background:#fff;
  box-shadow:0 2px 6px rgba(0,0,0,.15);
  display:flex;
  align-items:center;
  gap:10px;
  font-size:14px;
}

.key-icon{
  font-size:16px;
}

/* ================= FOOTER ================= */
footer{
  position:absolute;
  bottom:16px;
  width:100%;
  display:flex;
  justify-content:center;
  gap:20px;
  font-size:12px;
  color:#605e5c;
}

footer span{
  cursor:default;
}

/* ================= MOBILE ================= */
@media (max-width: 480px){
  .page-wrapper{
    justify-content:flex-start;
    padding-top:40px;
  }

  .box,
  .lower-box{
    box-shadow:none;
  }

  footer{
    position:static;
    margin-top:40px;
  }
}