:root {
  /* navigation color palette */
  --nav-bgc-main:        #172f82;
  --nav-bgc-sec:         #167aa8;
  --nav-c-main:          #ffffff;
  --nav-c-sec:           #f2f2f2;
  /* link color palette */
  --link-c-main:         #428bca;
  --link-c-sec:          #3071a9;
  /* user-stuff color palette */
  --user-fcc-main:       #302927;
  --user-errc-main:      #a94442;
  /* valheim-control color palette */
  --valheim-tb-bgc-main: #428bca;
  --valheim-tb-bgc-sec:  #302927;
  --valheim-tb-c:        #9da2b0;
  --valheim-tb-disc:     #302927;
  /* general color palette */
  --bgc-main:            #302927;
  --c-main:              #9da2b0;
}

html, body {
  margin: 0;
  background: var(--bgc-main);
  color: var(--c-main);
}

* {
  font-family: "Helvetica";
  box-sizing: border-box;
}


a {
  text-decoration: none;
  color: var(--link-c-main);
}

a:hover {
  text-decoration: underline;
  color: var(--link-c-sec);
}

.content {
  font-size: 14px;
  margin: 1em;
  margin-top: 7em;
}

@media (min-width: calc(768px + 2em)) {
  .content {
    display: flex;
    flex-direction: column;
    width: 768px;
    margin: auto;
    margin-top: 7em;
  }
}

.bold-text {
  font-weight: bold;
}

.leftaligned-text {
  text-align: left;
}

.centered-text {
  text-align: center;
}

.rightaligned-text {
  text-align: right;
}

.multi-column {
  display: flex;
  justify-content: space-between;
}

input[type="submit"] {
  color: var(--nav-c-main);
  background-color: var(--link-c-main);
  border-color: var(--link-c-main);
  border-style: solid;
  cursor: pointer;
  padding: .5em .75em;
  margin: .25em 0em;
  border-radius: 4px;
}

input[type="submit"]:hover {
  background-color: var(--link-c-sec);
  border-color: var(--link-c-sec);
  transition: background-color .2s ease-in-out;
}

.flash-box {
  display: flex;
  flex-direction: column;
  justify-content: end;
  position: absolute;
  bottom: 0;
  color: var(--link-c-sec);
  width: inherit;
  text-align: center;
  animation: fadeOut 2s 3s forwards;
  opacity: 1;
  visibility: visible;
}

@keyframes fadeOut {
  0%   { opacity:  1; }
  25%  { opacity:  1; }
  50%  { opacity: .5; }
  100% {
    opacity:  0;
    visibility: hidden;
  }
}