:root {
  --basewhite: 255 255 255;
  --baseblack: 102 102 102;
  --primary: 54 153 201;
  --darkergray: var(--baseblack);
  --darkgray: 153 153 153;
  --gray: 187 187 187;
  --lightgray: 245 245 245;
  --link-blue: 96 165 250;
}

* {
  margin: 0px;
  padding: 0px;
}

body {
  font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
}

.box {
  min-height: 100vh;
  display: flex;
  flex-flow: column;
}

.header {
  background-color: rgb(var(--primary));
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;

  .header-item {
    line-height: 1;
  }

  .header-div {
    display: flex;
    padding-left: 1.25rem;
  }

  .header-link {
    display: flex;
    align-items: flex-end;
    text-decoration: inherit;
    column-gap: 0.5rem;
  }

  h1 {
    font-size: 12;
    font-weight: inherit;
    color: rgb(var(--basewhite));
  }
}

.main {
  text-align: center;
  margin: auto;
  word-break: break-all;

  a {
    color: rgb(var(--link-blue));
  }
}

footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  color: rgb(var(--baseblack));
  line-height: 1.25rem;
  background-color: rgb(var(--lightgray));
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  row-gap: 0.5rem;

  .text-sm {
    font-size: 0.875rem;
  }

}