@import "https://fonts.bunny.net/css?family=albert-sans:400,600";

/* web/index.css */
:root {
  --un: .25rem;
  --col-dsk-bcg: #63abf6;
  --col-pan-bcg: #bdbdbd;
  --col-inp-bcg: #fff;
  --col-pan-hlt: lch(from var(--col-pan-bcg) calc(l + 35) c h);
  --col-pan-shd: lch(from var(--col-pan-bcg) calc(l - 35) c h);
  --col-btn-hlt: lch(from var(--col-pan-bcg) calc(l + 10) c h);
  --col-btn-shd: lch(from var(--col-pan-bcg) calc(l - 10) c h);
  --siz-pan-brd: calc(var(--un) * .75);
}

* {
  box-sizing: border-box;
  font-family: Albert Sans, sans-serif;
  font-size: 1.1rem;
}

body, html {
  overflow: hidden;
  max-width: 100vw;
  max-height: 100vh;
}

body {
  background: var(--col-dsk-bcg);
  display: flex;
  overflow: hidden;
  flex-direction: column;
  justify-content: center;
  align-items:  center;
  max-width: 100vw;
  max-height: 100vh;
  margin: 0;
  padding: 0;
}

#bg-img {
  opacity: .5;
  position: relative;
  min-width: 100vw;
  min-height: 100vh;
  max-height: 130vh;
  margin-top: -1rem;
}

#content {
  position: fixed;
  top: var(--un);
  left: var(--un);
  width: calc(100% - var(--un) * 2);
  height: calc(100% - var(--un) * 8);
  content: display flex;
  flex-direction: column;
  justify-content: center;
  align-items:  center;
  min-width: 10px;
  min-height: 10px;
}

#connecting {
  position: relative;
  color: #ffffffa0;
  text-shadow: 3px 3px #ffffff40;
  width: min-content;
  height: min-content;
  margin: auto;
  font-size: 3rem;
  font-weight: bold;
  top: 50%;
}

.panel {
  background: var(--col-pan-bcg);
  border-top: var(--siz-pan-brd) solid var(--col-pan-hlt);
  border-left: var(--siz-pan-brd) solid var(--col-pan-hlt);
  border-right: var(--siz-pan-brd) solid var(--col-pan-shd);
  border-bottom: var(--siz-pan-brd) solid var(--col-pan-shd);
  padding: var(--un);
}

#about[open] {
  display: flex;
}

#about {
  flex-direction: column;
  min-width: 32rem;
  max-width: 42vw;

  & .acontent {
    margin: .5rem;

    & h1 {
      margin: .25rem;
      font-size: 2em;
    }

    & #tagline {
      opacity: .5;
    }

    & p {
      margin: .5rem 0;
    }

    & a {
      color: #00f;
      text-decoration: none;

      &:hover {
        color: #9400d3;
      }
    }
  }

  & form {
    margin-left: auto;
    padding: .25rem;

    & button {
      padding: .3rem;
      font-weight: bold;
    }
  }
}

.shadow {
  box-shadow: var(--un) var(--un) 0 0 #00000050;
}

input[type="text"] {
  background: var(--col-inp-bcg);
  border-bottom: var(--siz-pan-brd) solid var(--col-pan-hlt);
  border-right: var(--siz-pan-brd) solid var(--col-pan-hlt);
  border-left: var(--siz-pan-brd) solid var(--col-pan-shd);
  border-top: var(--siz-pan-brd) solid var(--col-pan-shd);

  &[data-valid="no"] {
    color: red;
  }

  &:focus-visible {
    outline: none;
  }
}

button {
  background: var(--col-pan-bcg);
  border-top: var(--siz-pan-brd) solid var(--col-pan-hlt);
  border-left: var(--siz-pan-brd) solid var(--col-pan-hlt);
  border-right: var(--siz-pan-brd) solid var(--col-pan-shd);
  border-bottom: var(--siz-pan-brd) solid var(--col-pan-shd);

  &:hover {
    background: var(--col-btn-hlt);
  }

  &:active {
    background: var(--col-btn-shd);
    border-bottom: var(--siz-pan-brd) solid var(--col-pan-hlt);
    border-right: var(--siz-pan-brd) solid var(--col-pan-hlt);
    border-left: var(--siz-pan-brd) solid var(--col-pan-shd);
    border-top: var(--siz-pan-brd) solid var(--col-pan-shd);
  }
}

#bottom {
  position: absolute;
  bottom: calc(var(--un) * 2);
  min-width: 10px;
  min-height: 10px;
}

#input-bar, #name-bar {
  display: flex;
  gap: calc(var(--un) * 2);
  flex-direction: row;

  & * {
    height: calc(var(--un) * 9);
  }

  & button {
    font-weight: bold;
  }
}

.rawr {
  position: absolute;
  display: flex;
  opacity: calc(100% - var(--aged));
  flex-direction: column;
  justify-content: center;
  align-items:  center;
  transition: opacity 1s, margin-top .5s;

  & .text {
    text-shadow: 1px 1px #00000050;
    width: min-content;
    height: min-content;
    font-size: 1.25rem;
    font-weight: bold;
  }

  & .info {
    position: absolute;
    text-align: center;
    width: 10rem;
    top: 3rem;

    & .sender {
      color: #08443c;
      font-weight: bold;
    }

    & .time {
      color: #277289;
    }
  }

  & .info {
    opacity: 0;
  }

  &:has(.text:hover) .info {
    opacity: 1;
  }
}

.fade-in {
  opacity: 0;
  animation: fade-in .3s ease-out forwards;
}

@keyframes fade-in {
  to {
    opacity: 1;
  }
}

.fade-out {
  animation: fade-out .3s ease forwards;
  user-select: none;
  pointer-events: none;
}

@keyframes fade-out {
  to {
    opacity: 0;
  }
}