:root{
  --accent: #00857c;
  --heading-gray: #656565;
  --page-bg: #ffffff;
  --max-width: 800px;
  --radius: 34px;
}

*{box-sizing:border-box;}
html,body{height:100%;margin:0;padding:0;}

body{
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  background:var(--page-bg) url("/bg.png") center;
  color:#222;
  -webkit-font-smoothing:antialiased;
}

/* container */
.gate{
  max-width:var(--max-width);
  margin:60px auto 0;
  padding:0 20px;
  text-align:center;
}

/* heading */
.gate-title{
  margin:0 0 24px;
  font-weight:300;
  font-size:48px;
  color:var(--heading-gray);
  letter-spacing:-0.5px;
}

/* error message */
.gate-error{
  color:#d32f2f;
  margin:0 auto 16px;
  font-size:14px;
}

/* form wrapper - the rounded container */
.pw-wrap{
  margin:0 auto;
  max-width:760px;
  border:1px solid #e0e0e0;
  border-radius:var(--radius);
  background:#fff;
  padding:12px 20px 60px;
  position:relative;
  overflow:visible;
}

/* password input */
.pw-input{
  display:block;
  width:100%;
  padding:18px 16px;
  font-size:15px;
  color:#333;
  border:0;
  outline:none;
  background:transparent;
  border-radius:12px;
}

.pw-input:focus{
  box-shadow:0 0 0 3px rgba(0,133,124,0.08);
}

/* button */
.pw-btn{
  position:absolute;
  left:20px;
  right:20px;
  bottom:10px;
  padding:16px 0;
  background:var(--accent);
  color:#fff;
  font-weight:600;
  font-size:16px;
  border:0;
  border-radius:0 0 var(--radius) var(--radius);
  cursor:pointer;
  text-align:center;
  box-shadow:0 2px 8px rgba(0,0,0,0.06);
}

.pw-btn:hover{
  background:#007269;
}

.pw-btn:active{
  transform:translateY(1px);
}

/* GDC tilføjelser */
.logo{
  display:block;
  width:100%;
  height:auto;
}

.msd-logo{
  position: absolute;
  top: 30px;
  left: 30px;
  width: 110px;       
  height: auto;
  z-index: 10;
}

/* responsive */
@media (max-width:640px){
  .gate-title{font-size:36px;}
  .pw-wrap{padding:10px 16px 56px;}
  .pw-btn{left:16px;right:16px;bottom:8px;padding:14px 0;}
  .pw-input{padding:16px 12px;font-size:14px;}
  
  /* GDC responsive */
  .logo{margin-top: 30px;}
  .msd-logo {top: 16px;left: 16px;width: 80px;}
}

/* show-password checkbox */
.pw-show {
  display: block;
  text-align: left;
  margin: 8px 20px 0;
  font-size: 13px;
  color: #6a6a6a;
}
.pw-show input {
  margin-right: 8px;
  vertical-align: middle;
}

/* small rules for the two images you added */
.logo, .msd-logo {
  display: inline-block;
  margin-top: 18px;
  max-width: 220px;
  height: auto;
}
.msd-logo { margin-left: 12px; }

/* responsive tweaks */
@media (max-width: 640px) {
  .pw-show { margin: 8px 16px 0; font-size: 13px; }
  .logo, .msd-logo { max-width: 140px; margin-top: 12px; }
}