* {
  box-sizing: border-box;
  margin: 0;
}

html {
  height: 100vh;
  padding: 0;
}

body {
  display: flexbox;
  height: auto;
  padding: 0;
  text-align: center;
  align-items: center;
  justify-content: center;
  font-family: "Halvar Breit Rg";
}

header {
  height: fit-content;
  width: 100%;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 8vh 0 5vh;
}

h1 {
  font-family: "Halvar Breit Blk";
  font-size: 48px;
}

h2 {
  font-size: 24px;
}

a, a:active, a:visited {
  color: inherit;
}

#content {
  height: 50%;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

input {
  height: 40px;
  font-family: inherit;
}

p {
  color: #ff0000;
}

#editLink {
  color: #000000;
}

input[type="text"], input[type="password"], label[for="subdomain"] {
  line-height: 40px;
  font-size: 24px;
  text-align: center;
}

input[type="submit"] {
  border: none;
  margin-top: 1vh;
  padding-left: 20px;
  padding-right: 20px;
  border-radius: 20px;
  background-color: #336596;
  color: #ffffff;
  transition: background-color 0.25s;
}

input[type="submit"]:hover {
  cursor: pointer;
  background-color: #6BACE9;
}

#passwordBox {
  display: flex;
  flex-direction: column;
}

#subdomain {
  text-transform: lowercase;
}
/*    */
footer {
  position: fixed;
  display: flex;
  flex-direction: column;
  height: 40vh;
  width: 100%;
  bottom: 0;
}
@font-face {
  font-family: 'Halvar Breit Blk';
  src: url('/assets/HalvarBreit-Blk.eot');
  src: local('Halvar Breitschrift Black'), local('HalvarBreit-Blk'),
      url('/assets/HalvarBreit-Blk.eot?#iefix') format('embedded-opentype'),
      url('/assets/HalvarBreit-Blk.woff2') format('woff2'),
      url('/assets/HalvarBreit-Blk.woff') format('woff'),
      url('/assets/HalvarBreit-Blk.ttf') format('truetype');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Halvar Breit Rg';
  src: url('/assets/HalvarBreit-Rg.eot');
  src: local('Halvar Breitschrift Regular'), local('HalvarBreit-Rg'),
      url('/assets/HalvarBreit-Rg.eot?#iefix') format('embedded-opentype'),
      url('/assets/HalvarBreit-Rg.woff2') format('woff2'),
      url('/assets/HalvarBreit-Rg.woff') format('woff'),
      url('/assets/HalvarBreit-Rg.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
} 
use{
  animation:move-forever 2s linear infinite;
  &:nth-child(2){ animation-duration:2.5s; animation-delay:-1.5s; }
  &:nth-child(1){ animation-duration:5s}
}

@keyframes move-forever{
   0%{transform: translate(-2px , 0)}
 100%{transform: translate( 0px , 0)} 
}

svg{width:100vw;height:40vh}

.footnote{
  display: flexbox;
  color: white;
  text-shadow: black 1px 0 10px;
  width: 100vw;
  height: fit-content;
  background-color: #54AFF0;
  align-content: center;
  padding: 1vh 0;
}
#takenBox, #passwordBox {
  display: none;
}