:root {
  --circle-d: 14px;
  font-size: 16px;
  --detail-f-size: small;

  --ff-primary: 'Inter Tight', Helvetica, sans-serif;
  --ff-bold: 400;

  --max-width-container: 25rem;

  --outline: 0.5px solid var(--color-main);
  --bgcolor: rgb(0, 0, 0);
  --color-main: rgb(255, 255, 255);
  --color-compl: rgb(146, 146, 146);
}

/* Removing blue highlight of buttons on mobile */
input,
textarea,
button,
select,
a {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
a:focus,
a:visited,
a:active {
  outline: none;
}
* {
  -webkit-tap-highlight-color: transparent;
}

/* Box sizing rules */
*,
*::before,
*::after {
}

/* Remove default margin */
* {
  margin: 0;
  padding: 0;
  font: inherit;
  box-sizing: border-box;
}

/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
ul[role='list'],
ol[role='list'] {
  list-style: none;
}

/* Set core root defaults */
html:focus-within {
  scroll-behavior: smooth;
}

/* A elements that don't have a class get default styles */
a:not([class]) {
  text-decoration-skip-ink: auto;
}

/* Make images easier to work with */
img,
picture,
svg {
  max-width: 100%;
  display: block;
}

button {
  border: none;
  outline: none;
}

/* General */

html,
body {
  margin: 0;
  padding: 0;
  height: -webkit-fill-available;
  /* width: 100%; */
  overflow: hidden;
}
body {
  text-rendering: optimizeSpeed;
  display: grid;
  grid-template-columns: 1fr;
}
main {
  height: 100%;
}

#button-container,
main {
  /* grid-row-start: 1;
  grid-column-start: 1; */
}


#sketch-container {
  /* height: 100%; */
  /* height: 100dvh !important; */
}
canvas {
  /* width: 100vw !important; */
  /* height: 100dvh !important; */
  /* max-width: 100% !important; */
  display: block !important;
}

#test {
  border: 2px solid red;
  position: absolute;
  height: calc(var(--circle-d) + 100dvh - (100dvh / 6));
  top: 0;
  left: 0;
  bottom:0;
  width: 100%;
  z-index: 45;
  display: flex;
  flex-direction: column-reverse;
  justify-content: space-between;
  margin-top: calc((100vh / 18) - (var(--circle-d) / 2));
  padding-left: calc((100vw * 0.05) - (var(--circle-d) / 2));
  padding-right: calc((100vw * 0.05) - (var(--circle-d) / 2));
  /* background-color: aquamarine; */
}

.yao {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: calc(var(--circle-d) + 100dvh - (100dvh / 6));
  margin-top: calc((100dvh / 18) - (var(--circle-d) / 2));
  padding-left: calc((100vw * 0.05) - (var(--circle-d) / 2));
  padding-right: calc((100vw * 0.05) - (var(--circle-d) / 2));
  display: flex;
  flex-direction: column-reverse;
  justify-content: space-between;
  z-index: 50;
  /* border: 2px dashed yellow; */
  /* background-color: aqua; */
}

.yao > button {
  all: unset;
  cursor: pointer;
  width: var(--circle-d);
  height: var(--circle-d);
  border-radius: 9999px;
}

.yao > button[data-state='1'] {
  background-color: #fff;
  border: 1px solid #000;
  margin-left: auto;
}

.yao > button[data-state='0'] {
  background-color: #000;
  border: 1px solid #fff;
  margin-right: auto;
}

nav.action {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding-left: 36px;
  padding-right: 36px;
  height: 64px;
  background-image: linear-gradient(180deg,rgba(0, 0, 0, 0), rgba(0, 0, 0, 60));
}

nav.action .action__btns {
  display: flex;
  justify-content: space-around;
  align-items: center;
  height: 100%;
  /* background-color: blue; */
}

nav.action .hex-buttons {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 100%;
  min-width: 200px;
  width: 50%;

  /* background-color: aquamarine; */
}

nav.action .action__btns .hex-buttons > button {
  all: unset;
  cursor: pointer;
  padding: 4px;
  width: 28px;
  height: 28px;
  /* border: 1px solid #fff; */
  display: inline-flex;
  justify-content: center;
  align-items: center;
}

nav.action .action__btns > button {
  all: unset;
  cursor: pointer;
  padding: 4px;
  width: 28px;
  height: 28px;
  /* border: 1px solid #fff; */
  display: inline-flex;
  justify-content: center;
  align-items: center;
}
#detail-open {
  font-size: 1.5rem;
  color: white;
}

#detail-close {
  color: white;
  background-color: transparent;
  /* position: relative;
  right: 0%; */
  padding: 6px;
  cursor: pointer;
}
#info-box-close {
  color: white;
  background-color: transparent;
  /* position: relative;
  right: 0%; */
  padding: 6px;
}
#info-box-open {
 
}

nav.action .action__btns > button#detail-open {
  color: #fff;
}
.detail-elements {
  display: flex;
  flex-direction: column;
  align-items: flex-end;

}

#detail {
  position: fixed;
  font-family: var(--ff-primary);
  font-weight: 200;
  /* max-width: calc(100% - 32px); */
  max-width: 400px;
  width: 100%;
  top: calc(100% - 64px);
  left: 50%;
  transform: translate(-50%, -100%);
  background-color: transparent;
  border: none;
  margin-bottom: 64px;
  color: white;
}

/* dialog:modal {
  max-width: calc((100% - 6px) - 2em);
  max-height: calc((100% - 6px) - 2em);
} */
dialog::backdrop {
  background-color: rgba(0, 0, 0, 0.6);
}
.content {
  width: 100%;
  margin-inline: auto;
  /* min-height: calc(100dvh * 0.4); */
  display: flex;
  flex-direction: column;
  border-left: 0.5px solid white;
  border-top: 0.5px solid white;
  border-right: 0.5px solid white;
  background-color: black;

}
/* @media only screen and (min-width: 40rem) {
  .content {
   max-width: var(--max-width-container);
  }
} */


.cont-row {
  flex-grow: 1;
  display: flex;
  /* flex-wrap: wrap; */
  border-bottom: 0.5px solid var(--color-main);
}

#number {
  flex: 1, 1, 20%;
  min-width: 20%;
  text-align: center;
  color: var(--color-main);
  font-size: xx-large;
  display: flex;
  font-weight: 300;
  align-items: center;
  justify-content: center;
  outline: var(--outline);
}
#name {
  
  flex: 1, 1, 80%;
  min-width: 80%;
  text-align: left;
  font-size: x-large;
  font-weight: 300;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 10px;
  line-height: 1.1;
}

#column-1 {
  flex: 1, 1, 40%;
  min-width: 40%;
  display:flex;
}
#column-2 {
  flex: 1, 1, 60%;
  min-width: 60%;
  display: flex;
  flex-direction: column;
  outline: var(--outline);
  flex-shrink: 0;
  
}

#hexagram-uni {
  flex-basis: 100%;
  outline: var(--outline);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding-top: 0.5rem;
}
div > #hexagram-uni {
  font-size: clamp(4rem, 3rem + 10vh, 4rem);
}
#trigrams {
  flex-basis: 100%;
  font-size: var(--detail-f-size);
  text-transform: uppercase;
  display: flex;
  flex-direction: column;
  
}
.trigram {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  /* padding-top: 10px; */
  font-size: var(--detail-f-size);
  
}
#trig-above {
  border-bottom: 0.5px solid var(--color-main);
}
#trig-below {
}
#column-2 > * {
  flex-grow: 1;
  flex-basis: 0;
  padding: 8px 8px;
  line-height: 1.4;
  font-size: var(--detail-f-size);
}
.hex-link {
  background-color: white;
  color: black;
  padding: 1px 1px 1px 5px;
  display: flex;
  gap: 8px;
  margin-top: 2px;
  font-weight: 300;
  /* max-width: 80%; */
}
#komplement {
  border-bottom: 0.5px solid var(--color-main);
}
#detail-text {
  padding: 6px;
}

.highlight {
  /* font-weight: 400; */
}
#koment {
  padding: 10px;
  font-size: var(--detail-f-size);
}
#info-box {
  position: fixed;
  font-family: var(--ff-primary);
  font-weight: 200;
  max-width: 100%;
  width: 100%;
  max-height: 100%;
  height: 100%;
  background-color: black;
  border: none;
  margin-bottom: 64px;
  color: white;
}
.info-elements {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  width: 100%;
  max-width: 600px;
  margin-inline: auto;
  padding: 15px;
}
.info-cont {
  width: 100%;
  padding: 20px 20px;
}

.info-cont p {
  font-family: 'Inter', Helvetica, sans-serif;
  font-size: small;
  margin-bottom: 0.7rem;
}
.info-cont h1 {
  font-family: 'Inter', Helvetica, sans-serif;
  font-size: 2.5rem;
  margin-bottom: 0.7rem;
}
.info-cont h2 {
  color:#cacaca;
  margin-top: 2rem;
  margin-bottom: 0.5rem;
  font-family: 'Inter', Helvetica, sans-serif;
  font-size: medium;
  font-weight: 200;
  padding-bottom: 0.3rem;
  border-bottom: 0.7px solid #cacaca;
  text-transform: uppercase;
}
.info-cont h3 {
  margin-top: 1rem;
  margin-bottom: 0.5rem;
  font-family: 'Inter', Helvetica, sans-serif;
  font-size: medium;
  /* font-weight: 200; */
  
}
.info-cont img {
  margin-top: 1rem;
  margin-bottom: 1rem;
  
}