@import url("https://cdn.ratcode.dev/css/reset.css");
@import url("https://cdn.ratcode.dev/css/default.css");
@import url("./css/animations.css");

:root { --bg: white; --fg: black; }
    * { font-family: "Hubot Sans"; line-height: 1; }

a { color: currentcolor; }

html, body { font-size: 14px; }

body  { z-index: 1; }
#logo { z-index: 2; }

body {
  background: var(--bg);
  color: var(--fg);
  padding: 1rem;
   display: flex;
   flex-flow: column nowrap;
   align-items: center;
   justify-content: space-between;
   transition: background-color 0.25s, color 0.25s;
}

header { align-self: center; font-weight: 700; }
footer { align-self: center; letter-spacing: 2px; }

header, footer {
   display: flex;
   align-items: center;
   justify-content: space-between;
   
   text-transform: uppercase;
}
nav {
   display: flex;
   gap: 1.25rem;
}
#welcome {
   padding: 2rem;
}
#logo {
   display: flex;
   flex-flow: column nowrap;
   align-items: center;
   justify-content: center;
   gap: 1rem;
   max-width: 480px;
   
   .name { font-size: 5rem; font-weight: 900; }
   .sub  { font-size: 1rem; font-style: italic; opacity: 0.50; display: none; }
}