:root {
    --main-fg-color: #000;
    --main-bg-color: white;
}

html {
    background-color: var(--main-bg-color);
    color: var(--main-fg-color);
    margin: 0;
    overflow: hidden;
}

body {
    margin: 0;
}

#wrapper {
  overflow:hidden;
  padding-top: calc(50vh - 8em);
  min-height:30%;
  min-width:30%;
  text-align:center;
  animation: slow-grow 3s ease;
}

#squarish-logo{
  user-select:none;
  max-height: 8em;
}

#squarish-box {
  stroke-dasharray:2000;
  stroke-dashoffset:2000;
  stroke: var(--main-fg-color);
  stroke-width: 12px;
}

.squarish-letter {
  fill: var(--main-fg-color) !important;
  fill-opacity:0;
}

.drawbox {
  animation: drawbox 3s cubic-bezier(1, 0.8, 0.2, 0) 0.2s 1 normal forwards;
}

.fadein {
  animation: fadein 0.7s ease 1.2s 1 normal forwards;
}

@keyframes fadein {
  50%{transform:scale(1.05) rotateY(9deg) translateY(-5%)}
  20%{transform:scale(1.01)}
  90% {fill-opacity:1}
  100% {fill-opacity:1}
}
@keyframes drawbox {
  to{
    stroke-dashoffset:0;
  }
}

@keyframes slow-grow {
    80% {
        transform: scale(1.02) rotateZ(1deg)
    }
    100% {
        transform: scale(1);
    }
}