/**
  * Global CSS for Kodigen website
  * Copyright (c) 2025 Kodigen
  */

* {
  box-sizing: border-box;
}

html,
body {
  color: #20965f;
  background: #0f1a10;
  background-image: url("../img/kodigen-pattern.png");
  font-family: "Nunito Sans", sans-serif;
  padding: 0;
  margin: 0;
  height: 100%;
}

a {
  color: #20965f;
}

h1,
h2,
h3,
p {
  padding: 0;
  margin: 0;
}

.container {
  min-height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.box {
  display: flex;
  flex-direction: column;
}

.logo {
  background-image: url("../logo/kodigen.svg");
  background-size: 100px 100px;
  content: "";
  text-indent: -999999px;
  width: 100px;
  height: 100px;
  -webkit-box-shadow: 0px 0px 80px 20px rgb(32 150 95 / 82%);
  -moz-box-shadow: 0px 0px 80px 20px rgb(32 150 95 / 82%);
  box-shadow: 0px 0px 80px 20px rgb(32 150 95 / 82%);
  animation: breathing 5s ease-in-out infinite;
}

@keyframes breathing {
  0% {
    box-shadow: 0px 0px 80px 20px rgb(32 150 95 / 82%);
  }
  25% {
    box-shadow: 0px 0px 100px 25px rgb(50 200 120 / 75%);
  }
  50% {
    box-shadow: 0px 0px 120px 30px rgb(20 255 140 / 70%);
  }
  75% {
    box-shadow: 0px 0px 100px 25px rgb(40 180 100 / 80%);
  }
  100% {
    box-shadow: 0px 0px 80px 20px rgb(32 150 95 / 82%);
  }
}

.slogan {
  margin-top: 16px;
  font-size: 18pt;
  text-shadow: 2px 2px 6px rgb(15 26 16 / 68%);
}

.faq {
  margin-top: 50px;
  width: 500px;
}

.faq > .qa {
  margin-top: 16px;
}

.faq > .qa:first-child {
  margin-top: 0px !important;
}

.faq > .qa > h3 {
  margin-bottom: 2px;
  font-size: 14pt;
  color: #fff;
}

.faq > .qa > p {
  font-size: 11pt;
  color: #c8c8c8;
}

footer {
  font-size: 10pt;
  margin-top: 50px;
}

footer > p {
  color: #989898;
}

@media only screen and (max-width: 580px) {
  .box {
    padding: 0 20px;
    margin: 30px;
  }

  .faq {
    width: 100%;
  }
}
@media only screen and (max-height: 580px) {
  .box {
    margin: 30px;
  }
}