/**! @license AGPL-3.0-only
 * Copyright (C) 2025  antiviiris and contributors
 * This program is free software: you can redistribute it and/or modify
 * it under the terms of the GNU Affero General Public License as published by
 * the Free Software Foundation, under version 3 of the License.
 * 
 * This program is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 * GNU Affero General Public License for more details.
 * 
 * You should have received a copy of the GNU Affero General Public License
 * along with this program.  If not, see <https://www.gnu.org/licenses/>.
 */

@font-face {
  font-family: Lexend;
  font-style: normal;
  font-weight: 100 900;
  src: url(cf-fonts/v/lexend/5.0.18/vietnamese/wght/normal.woff2);
  unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;
  font-display: swap;
}
@font-face {
  font-family: Lexend;
  font-style: normal;
  font-weight: 100 900;
  src: url(cf-fonts/v/lexend/5.0.18/latin/wght/normal.woff2);
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
  font-display: swap;
}
@font-face {
  font-family: Lexend;
  font-style: normal;
  font-weight: 100 900;
  src: url(cf-fonts/v/lexend/5.0.18/latin-ext/wght/normal.woff2);
  unicode-range: U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF;
  font-display: swap;
}

/* cheeky hack */
*[aria-hidden] {
  display: none;
}

:root {
  --prim: #e0c8f1;
  --seco: #f5d7f5;
  --tert: #c8b6ff;
  --accent: #fbf3f1;
}

html {
  font-family: 'Lexend', sans-serif;
  width: 100%;
  height: 100%;
}

body {
  margin: 0px;
  padding: 0px;
  width: 100%;
  height: 100%;
  overflow: clip;
  background: url(assets/background.png);
  background-size: calc(100% + 20px) calc(100% + 20px);
  background-position-x: -10px;
  background-position-y: -10px;
  background-repeat: no-repeat;
}

a {
  color: black
}

video.background {
  background: url(assets/background.png);
  background-size: calc(100% + 20px) calc(100% + 20px);
  background-position-x: -10px;
  background-position-y: -10px;
  background-repeat: no-repeat;
  width: calc(100% + 20px);
  height: calc(100% + 20px);
  object-fit: cover;
  position: absolute;
  filter: blur(5px);
  z-index: -1;
  left: -10px;
  top: -10px;
  overflow: clip;
}

main {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(5px);
}

div.modal {
  max-width: 300px;
  width: 100%;
  height: auto; /* relys on the browser supporting aspect-ratio */
  aspect-ratio: 1 / 1.5;
  border-radius: 50px;
  background-color: var(--prim);
  border-color: var(--tert);
  border-style: solid;
  border-width: 8px;
  display: flex;
  flex-direction: column;
}

div.modal > div:nth-of-type(1) {
  width: 100%; /* relys on the browser supporting aspect-ratio */
  height: auto;
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

div.modal > div:nth-of-type(1) > img {
  border-radius: 40px;
  border-width: 10px;
  border-style: solid;
  border-color: var(--seco);
  width: 85%;
  height: auto;
}

div.modal > div:nth-of-type(2) {
  border-radius: 40px;
  border-width: 10px;
  border-style: solid;
  border-color: var(--seco);
  background-color: var(--seco);
  width: 85%;
  height: auto;
  margin: auto;
  margin-bottom: 12px;
  flex: 1px;
  text-align: center;
}

div.modal > div:nth-of-type(2) > p:nth-of-type(1) {
  font-size: 30px;
  line-height: 50%;
}

div.modal ~ div:not(.navbar) {
  max-width: 300px;
  max-height: 400px;
  height: 100%;
  border-radius: 30px;
  background-color: var(--prim);
  border-color: var(--tert);
  border-style: solid;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
  transition: width 0.4s, margin-left 0.4s, border-width 0.4s;
  border-width: 0px;
  margin-left: 0px;
  width: 0%;
}

div.modal ~ div:not(.navbar) > div:not([aria-hidden]) {
  display: flex;
  flex-direction: column;
  align-items: center;
}

div.modal ~ div:not(.navbar)[data-open] {
  border-width: 8px;
  margin-left: 12px;
  width: 100%;
}

p.heading {
  font-size: 30px;
  margin: 25px;
}

img.logo {
  margin-top: 25px;
  aspect-ratio: 1 / 1;
  width: 50px;
}

a.handle {
  margin: 12px;
  margin-bottom: 12px;
  font-size: 20px;
}

p.contents {
  font-size: 14px;
  margin: 25px;
  margin-top: 0px;
  margin-bottom: 12px;
  text-align: center;
  line-height: 20px;
}

div.horizontalRule {
  height: 4px;
  width: 80%;
  background-color: var(--tert);
  border-radius: 4px;
}

div.navbar {
  display: flex;
  flex-direction: column;
  width: 80px;
}

div.navbar > div.tab {
  cursor: pointer;
  width: 70px;
  height: 70px;
  border-bottom-right-radius: 25px;
  border-top-right-radius: 25px;
  background-color: var(--tert);
  transition: width .2s, background-color .2s;
  display: flex;
  align-content: center;
  justify-content: center;
}

div.navbar > div.tab:hover, div.navbar > div.tab[data-open] {
  background-color: var(--prim);
  width: 80px;
}

div.navbar > div.tab > img.icon {
  width: 30px;
  aspect-ratio: 1 / 1;
}