@import url(resources/gnome-ui/gnome-ui.css);
@import url(resources/noto-sans-thai-looped/noto-sans-thai-looped.css);

:root {
  --white: 255, 255, 255;
  --whitebg: 250, 250, 250;
  --whiteitem: 255, 255, 255;
  --black: 0, 0, 0;
  --blackbg: 34, 34, 34;
  --blackitem: 50, 50, 50;
  --accent1: 153, 193, 241;
  --accent3: 53, 132, 228;
  --accent5: 26, 95, 180;
  font-family: "GNOME UI", "Noto Sans Thai Looped", Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
  text-rendering: optimizeLegibility;
}

p {font-size: 11pt;}
h1 {margin-top: 3vh;}

.centerscreen {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.logo {
  font-weight: bold;
  text-decoration: none;
}

.header {
    display: flex;
    justify-content: center;
    align-items: center;
}

.banner {
  width: 100%;
  text-align: center;
  font-weight: bold;
  padding: 0.2cm;
  border-radius:10px;
}

.name {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.grid-container {
  display: grid;
  justify-content: center;
  grid-template-areas: 
      'left middle right' 
} 

.middle {
  grid-area: middle;
  width: 90vw;
  max-width: 15cm;
}

.middle.large {
  width: 80vw;
  max-width: 35cm;
}

.description {
  font-size: 10pt;
  margin-top: -0.3cm;
  opacity: 0.7;
}

.pronouns {
  font-size: 10pt;
  opacity: 0.5;
  margin-top: -0.5cm;
  margin-bottom: 0.5cm;
}

.section {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  grid-gap: 1rem;
}

.button {
  border-radius: 6px;
  height: 1.2cm;
  text-decoration: none;
  font-weight: bold;
  padding: 0cm 0.25cm 0cm 0.25cm;
  margin-right: 0.25cm;
  margin-bottom: 0.25cm;
  transition-duration: 0.2s;
  display: flex;
  align-items: center;
}

.button.pill {
  border-radius: 0.6cm;
  padding: 0cm 0.75cm 0cm 0.75cm;
}

.button.accent {
  background-color: rgb(var(--accent3));
  color: rgb(var(--white));
}

.button.accent:hover {background-color: rgba(var(--accent3), 0.9);}

.button.accent.pill {
  border-radius: 0.6cm;
  padding: 0cm 0.75cm 0cm 0.75cm;
}

.button.header {
  font-weight: normal;
  margin-top: 0.25cm;
}

.button.back {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0.1cm;
  height: 1cm;
}

.itemcard {
  display: grid;
  border-radius: 12px;
  text-decoration: none;
  height: 3cm;
  transition-duration: 0.2s;
  box-shadow: 0px 1px 4px 1px rgba(var(--black), 0.13);
}

.infocard {
  border-radius: 12px;
  text-decoration: none;
  padding-left: 10px;
  box-shadow: 0px 1px 4px 1px rgba(var(--black), 0.13);
}

.itemcard-stealth {
  display: grid;
  border-radius: 12px;
  text-decoration: none;
  height: 3cm;
  transition-duration: 0.2s;
}

.list {
  border-radius: 12px 12px 12px 12px;
  box-shadow: 0px 1px 4px 1px rgba(var(--black), 0.13);
  margin-bottom: 50px;
}

.listaction {
  display: flex;
  align-items: center;
}

.listactionmini {
  display: grid;
  grid-template-columns: 1fr 1cm;
  text-decoration: none;
  align-items: center;
  min-height: 1.5cm;
}

.row {
  display: grid;
  grid-template-columns: 1fr 1cm;
  align-items: center;
  min-height: 1.5cm;
}

.row-subtitle {
  margin-top: -0.2cm;
  font-size: 10pt;
  opacity: 0.4;
  text-decoration: none;
}
.row-title {
  margin-top: 0.2cm;
  text-decoration: none;
}

.row-title-no-subtitle {
  display: grid;
  align-items: center;
  text-decoration: none;
}

.propertyrow {
  display: grid;
  align-items: center;
  min-height: 1.5cm;
}

.propertyrow-property {
  margin-top: 0.2cm;
  font-size: 10pt;
  opacity: 0.4;
  text-decoration: none;
}
.propertyrow-value {
  margin-top: -0.2cm;
  text-decoration: none;
}

.togglegroups-background {
  display: flex;
  border-radius: 12px;
  padding: 5px;
  font-weight: bold;
}

.togglegroups-highlighted {
  border-radius: 6px;
  padding: 5px;
  box-shadow: 0px 1px 4px 1px rgba(var(--black), 0.13);
  text-decoration: none;
}

.togglegroups-nohighlight {
  border-radius: 6px;
  padding: 5px;
  text-decoration: none;
}

.separator {height: 1px;}

.quickbuttons {
  display: flex;
  flex-wrap: wrap;
}

.topbar {
  position: fixed;
  width: 100%;
  top: 0px;
  left: 0px;
  z-index: 10;
}

.topbar.simple {height: 1.2cm;}

.topbar-group {
  display: flex;
  justify-content: space-between;
  margin-left: 1cm;
  margin-right: 1cm;
}

/* For tablet screens */
@media only screen and (max-width: 1366px) {
  .middle.large {width: 90vw;}
}

/* For phone screens */
@media only screen and (max-width: 750px) {
  .middle.large {margin-top: 1cm;}

  .topbar-group {
    align-items: center;
    flex-direction: column;
    margin-left: 0cm;
    margin-right: 0cm;
  }
}

@media (prefers-color-scheme: light) {
  body {background-color: rgb(var(--whitebg));}
  html * {color: rgb(var(--black));}
  .list {background-color: rgb(var(--white));}
  .button {background-color: rgba(var(--black), 0.08);}
  .button.header {background-color: rgb(var(--white));}
  .button.back {background-color: rgb(var(--white));}
  .button:hover {background-color: rgba(var(--black), 0.18);}
  .togglegroups-background {background-color: rgba(var(--black), 0.08);}
  .togglegroups-highlighted {background-color: rgb(var(--white));}
  .itemcard {background-color: rgb(var(--whiteitem));}
  .itemcard:hover {background-color: rgb(var(--whitebg));}
  .itemcard-stealth:hover {background-color: rgba(var(--black), 0.1);}
  .infocard {background-color: rgb(var(--whiteitem));}
  .separator {background-color: rgba(var(--blackbg), 0.1);}
  .banner {background-color: rgba(var(--accent1), 0.6);}
  .topbar {
    background-color: rgb(var(--whiteitem));
    border: 1px solid rgba(var(--blackbg), 0.1);
  }
}

@media (prefers-color-scheme: dark) {
  body {background-color: rgb(var(--blackbg));}
  html * {color: rgb(var(--white));}
  .list {background-color: rgba(var(--white), 0.07);}
  .button {background: rgb(var(--blackitem));}
  .button.header {background-color: rgb(var(--blackitem));}
  .button.back {background-color: rgb(var(--blackitem));}
  .button:hover {background: rgba(var(--white), 0.18);}
  .togglegroups-background {background: rgba(var(--white), 0.1);}
  .togglegroups-highlighted {background-color: rgba(var(--white), 0.15);}
  .itemcard {background-color: rgb(var(--blackitem));}
  .itemcard:hover {background-color: rgba(var(--white), 0.15);}
  .itemcard-stealth:hover {background-color: rgba(var(--white), 0.15);}
  .infocard {background-color: rgb(var(--blackitem));}
  .separator {background-color: rgb(var(--blackbg));}
  .banner {background-color: rgba(var(--accent5), 0.5);}
  .topbar {
    background-color: rgb(var(--blackitem));
    border: 1px solid rgba(var(--blackbg), 0.1);
  }
}