:root {
   --red1: #a80000;
   --transparent85: rgba(0, 0, 0, 0.85);
   --base: rgba(167, 162, 150);
   --dark50: rgba(247, 246, 244, 0.5);
   --dark072: rgba(95, 65, 0, 0.247);
   --dark073: rgba(95, 65, 0, 0.15);
   --dark074: rgba(245, 167, 0, 0.07);
}

* {
   margin: 0;
   padding: 0;
   scroll-behavior: smooth;
}

*,
*::before,
*::after {
   box-sizing: inherit;
}

html {
   box-sizing: border-box;
   font-size: 62.5%;
}

body {
   font-family: sans-serif;
   display: grid;
   background-color: var(--base);
   position: relative;
   align-items: center;
   height: 100vh;
}

.content-wrapper {
   display: grid;
   align-content: start;
}

.login-form {
   display: grid;
   align-content: center;
   justify-content: center;
   margin-top: -5rem;
}

.nhl-logo {
   margin-bottom: 2rem;
   justify-self: center;
}

.login-form-container {
   display: grid;
   box-shadow: 0 0.25rem 0.5rem var(--transparent85);
   font-size: 1.5rem;
   padding: 3rem 3rem 1rem;
   justify-items: center;
}

.fail {
   color: var(--red1);
}

.form-group {
   display: grid;
   grid-template-rows: 5rem 5rem 6rem;
   justify-content: center;
   padding: 2.5rem 1rem;
}

.field {
   display: grid;
   align-content: start;
   row-gap: .25rem;
}

.field-label {
   font-size: 80%;
}

.data {
   background-color: var(--dark50);
   height: 2.5rem;
   padding-left: 1rem;
   border: none;
   border-radius: 2px;
   border: 1px solid var(--dark074);
}

.btn {
   display: grid;
   align-self: end;
}

button {
   color: var(--transparent85);
   background-color: var(--dark072);
   border: 1px solid var(--dark073);
   font-family: Arial, sans-serif;
   border-radius: 3px;
   cursor: pointer;
   user-select: none;
   outline: none;
   padding: 1rem 3.5rem;
   justify-self: center;
}

button:hover {
   filter: contrast(115%);
   background-color: var(--dark50);
}