/* font stuff */

@font-face {
  font-family: 'Poppins-Regular';
  src: local('Poppins-Regular'),
       url('../static/fonts/Poppins-Regular.ttf') format("truetype");
}
/**********************************************************/


/* defining some color vars */

:root {
  --main-background: #f2e1c4;
  --moonlight: #211626;
  --green: #4C8B68;
  --grey: #b0b0b0;
}


/**********************************************************/


/* bg-color is used as a class on anything we want to apply bg-color to. this makes it easy to swap bg-color everywhere
when dark mode is enable */

.bg-color {
  background-color: var(--main-background);
}
/**********************************************************/


/* general global styling */

body {
  color: var(black);
  font-size: 1.3rem;
}

fieldset {
  border: none;
  padding: 0px;
}

.grid-fit-text {
  font-family: 'Roboto', sans-serif;
  line-height: 0.78;
  color: black;
  text-transform: uppercase;
  font-size: 35px;
  text-align: right;
}

h1 {
  font-size: 3rem;
}

a:link {
  color: black;
}

a:visited {
  color: black;
}

a:hover {
  color: #67397D;
}

.title-page-content-list a {
  text-decoration: none;
}

.title-font {
  line-height: 52px;
  font-size: 35px;
}
/**********************************************************/


/* the grid that the whole site fits into */
.container {
  display: grid;
  justify-items: center;
}

.background-no-grid {
  margin-top: 80px;
  display: grid;
  justify-items: center;
  width: 676px;
  height: 988px;
}


.background-grid {
  margin-top: 80px;
  display: grid;
  justify-items: center;
  width: 676px;
  height: 858px;
  /* background visual gridlines */
  --w: 1px; /* Thickness of the line */
  --vn: 26;   /* vertical lines */
  --hn: 33;   /* horizontal lines */
  --line-color: rgba(128, 128, 128, 0.6);
  position: relative;

  /* Vertical lines */
  background: linear-gradient(90deg, #0000 calc(100% - var(--w)),  var(--line-color) 0);
  /* this calcs to some shit like "calc(4.7619% + 0.047619px) 100%" I have no idea how to make it work properly. can just replace with 25px maybe */
  background-size: calc((100% - var(--vn) * var(--w)) / (var(--vn)) + var(--w)) 100%;

  /* Horizontal lines */
  &::before {
    content: '';
    background: linear-gradient(0deg, #0000 calc(100% - var(--w)), var(--line-color) 0);
    background-size: 100% calc((100% - var(--hn) * var(--w)) / (var(--hn)) + var(--w));
    position: absolute;
    top: 12px;
    left: 12px;
    width: 100%;
    height: 100%;
    pointer-events: none; /* '::before' prevents child elements from being interacted with. this fixes. */
  }
}
.background-grid-medium {
  height: 1248px;
  --hn: 48;
}
.background-grid-long {
  height: 4160px;
  --hn: 160;
}

.gridbox {
  margin-top: 12px;
  display: grid;
  grid-template-rows: repeat(4, 52px) min-content;
  grid-auto-rows: min-content;
  grid-template-columns: repeat(12, 52px);
  justify-items: center;
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  height: 100%;
  max-height: 1000px;
  aspect-ratio: 1 / 2;
}
/**********************************************************/

.site-links a{
  text-decoration: none;
}
.site-links{
  position: relative;
  left: 26px;
  grid-column: 8/13;
  max-height: 100px;
  width: 260px;
}

.site-links1{
  grid-row: 1;
}

.site-links2{
  grid-row: 2;
}

.site-links3{
  grid-row: 3;
}

/**********************************************************/


/* components that fit into header */

.css-toggle {
  grid-row: 1;
  grid-column: 1;
  height: 75%;
  width: 75%;
}

.css-toggle-button {
  position: relative;
  top: -7px;
  border-radius: 50%;
  width: 100%;
  aspect-ratio: 1 / 1;
  border-width: 2px;
  background: white;
  border-color: black;
}

.header-title {
  grid-row: 1;
  grid-column: 2/6;
  width: 100%;
  height: 100%;
  font-family: 'Roboto', sans-serif;
  line-height: 0.78;
  color: black;
  font-size: 35px;
  text-align: left;
}
.header-title a {
  text-decoration: none;
}



/* shitty NW diagonal lines header art */
.header-banner {
  margin-left: 53px; /* push it over 1 cell */
  grid-row: 2/4;
  grid-column: 1/7;
  width: 100%;
  height: 100%;
}

.header-segments{
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  height; 100%;
  width: 100%;
}

div.diagonal-container {
      height: 78px;
}

.to-right {
  background: linear-gradient(120deg, transparent calc(50% - 2px), var(--green) 50%, transparent calc(50% +  3px) );
}
.to-left {
  background: linear-gradient(60deg, transparent calc(50% - 2px), var(--green) 50%, transparent calc(50% + 3px) );
}

/**********************************************************/

/* moon stuff */
.moonbox {
  position: relative;
  top: 1px;
  left: 26px;
  height: 48%;
  width: 48%;
  justify-self: start;
  overflow: hidden;
}

.moon1 {
  grid-row: 4;
  grid-column: 3;
}

.moon2 {
  grid-row: 4;
  grid-column: 4;
}

.moon3 {
  grid-row: 4;
  grid-column: 5;
}

.moon4 {
  grid-row: 4;
  grid-column: 6;
}

.moon5 {
  grid-row: 4;
  grid-column: 7;
}

.moon6 {
  grid-row: 4;
  grid-column: 8;
}

.moon7 {
  grid-row: 4;
  grid-column: 9;
}

.moon8 {
  grid-row: 4;
  grid-column: 10;
}

.moon {
  height: 100%;
  width: 100%;
}

.moonlight {
  position: absolute;
  top: 0;
  bottom: 0;
  background-color: var(--moonlight);
  border-radius: 50%;
}

.moonshadow {
  position: absolute;
  top: 0;
  bottom: 0;
}
.waxing-crescent {
  border-radius: 50%;
  right: 25%;
}
.waning-crescent {
  border-radius: 50%;
  left: 25%;
}
.third-quarter {
  border-radius: 0%;
  left: 50%;
}
.first-quarter {
  border-radius: 0%;
  right: 50%;
}
.waning-gibbous {
  width: 70%;
  left: 15%;
}
.waxing-gibbous {
  width: 70%;
  right: 15%;
}

/**********************************************************/
/* actual site content stuff */
.title-page-content {
  grid-row: 6;
  display: grid;
  grid-column: 2/12;
  width: 100%;
  text-align: center;
}

.title-page-content-item {
  max-width: 600px;
  white-space: nowrap;
  overflow: hidden;
}

.article-page-content {
  grid-row: 6;
  display: grid;
  grid-column: 2/12;
  width: 100%;
  text-align: center;
  overflow-wrap: break-word;
}

.title-page-content-list {
  position: relative;
  font-family: 'Roboto', sans-serif;
  line-height: 2.165;
  color: black;
  font-size: 24px;
  text-align: center;
  top: 17px;
}

.article-list {
  text-align: left;
}

.pagination {
  position: relative;
  top: 4px;
}

/* individual photoalbum page */
.photoalbum-title {
  position: relative;
  top: 6px;
  grid-row: 5;
  grid-column: 1/13;
  max-width: 775px;
  margin: 0 auto;
  text-align: left;
}

.photoalbum-author {
  grid-row: 6;
  grid-column: 1/13;
  margin: 0;
}

.photoalbum-pub-date {
  grid-row: 7;
  grid-column: 1/13;
}

.photoalbum-thumbnail-image {
  display: block; /* Ensure the anchor element behaves as a block-level element */
}

.photoalbum-thumbnail-image img {
  max-width: 100%; /* Ensure images don't exceed their container's width */
  height: auto; /* Maintain aspect ratio */
}

.photoalbum-thumbnail-image {
  width: 100%;
  height: auto;
  object-fit: cover;
  object-position: center;
  z-index: 2;
}

/* browse photoalbums */
.photoalbum-page-content {
  grid-row: 6;
  display: grid;
  grid-column: 2/12;
  width: 100%;
  text-align: center;
  overflow-wrap: break-word;
}

.photoalbum-images-pagination{
  position: relative;
  top: 4px;
  grid-column: 1/5;
  text-align: center;
}

.comments-pagination{
  position: relative;
  top: 1px;
  text-align: center;
}

/**********************************************************/
/* infobox stuff, starting with elements that are common across infobox types */
.infobox {
  position: relative;
  display: grid;
  grid-template-columns: repeat(10, 52px) 26px;
  outline-style: double;
  margin-bottom: 26px;
}

.infobox-date {
  position: relative;
  top: 2px;
  right: 3px;
  grid-row: 1;
  grid-column: 10/12;
  text-align: right;
  font-size: 12px;
}

.infobox-title {
  position: relative;
  top: 2px;
  left: 3px;
  white-space: nowrap;
  max-width: 465px;
  overflow: hidden;
  grid-row: 1;
  grid-column: 1/10;
  text-align: left;
  font-size: 20px;
}

.infobox-admin-controls {
  position: relative;
  right: 2px;
  grid-row: 3;
  grid-column: 7/12;
  text-align: right;
  height: 20px;
}

.create-content-button {
  position: relative;
  top: 11px;
}

/* article infobox stuff */
.article-infobox {
  grid-template-rows: 26px 78px 26px;
}

.article-infobox-description {
  position: relative;
  top: 6px;
  left: 3px;
  grid-row: 2;
  grid-column: 1/12;
  text-align: left;
  font-size: 16px;
  line-height: 26px;
  overflow: hidden;
}

.article-infobox-viewcount {
  position: relative;
  height: 19px;
  top: 9px;
  left: 3px;
  grid-row: 3;
  grid-column: 1/3;
  text-align: left;
  font-size: 12px;
}

/* photoalbum infobox stuff */
.photoalbum-infobox {
  grid-template-rows: 26px 104px 26px;
}

.photoalbum-infobox-thumbnail {
  grid-column: 1;
  grid-row: 2;
  width: 124px;
  height: 124px;
  margin-left: 2px;
  margin-right: 0px;
  border: 2px solid black;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}

.photoalbum-infobox-description {
  text-align: left;
  position: relative;
  right: 22px;
  width: 370px;
  top: 6px;
  line-height:
  grid-row: 2;
  grid-column: 4/12;
  font-size: 16px;
  line-height: 26px;
  overflow: hidden;
}

.submit-comment-container {
  margin-bottom: 21px;
}

.submit-comment-field {
  position: relative;
  top: 14px;
}

.submit-a-comment-label {
  position: relative;
}

.comment-text-input {
  position: relative;
  z-index: 2;
  right: 3px;
  width: 517px;
  height: 75px;
  resize: none;
  padding: 0px;
  margin: 0px;
}
.comment-text-input:focus{
  outline: none;
}


.comment-container {
  position: relative;
  z-index: 2;
  right: 3px;
  width: 517px;
  resize: none;
  padding: 0px;
  margin: 0px;
  line-height: 26px;
  font-size: 18px;
  margin-bottom: 30px;
}

.comment-text {
  line-height: 26px;
  font-size: 18px;
}

.bottom-page-comments-title {
  margin-top: 39px;
  line-height: 52px;
  font-size: 35px;
  margin-bottom: 0px;
}

.bottom-page-comments {
  grid-row: 7;
  grid-column: 1/13;
  width: 100%;
  text-align: left;
}

.submit-comment-button {
  position: relative;
  bottom: 12px;
}

.comment-vote-button {
  position: relative;
  bottom: 4px;
}

/**********************************************************/
/* content page elements */
/* these are all children of grid-box that come after the header stuff */
.content-info {
  grid-row: 5;
  grid-column: 1/13;
  width: 100%;
  text-align: left;
  word-wrap: break-word;
  display: flex;
  flex-direction: column;
  margin-bottom: 55px;
}

.content-page-title {
  position: relative;
  top: -12px;
  margin: 0;
  line-height: 52px;
  font-size: 35px;
  text-align: center;
}

.author-and-date-line {
  position: relative;
  display: flex;
  top: 5px;
  justify-content: space-between;
}

.content-page-author {
  margin: 0;
  text-align: left;
}

.content-page-date {
  margin: 0;
  text-align: right;
}

/* article-specific content page elements */
.article-content {
  grid-row: 6;
  grid-column: 1/13;
  width: 100%;
  margin: 0 auto;
  text-align: left;
}

/* photoalbum-specific content page elements */
.photoalbum-display-grid {
  grid-row: 6;
  grid-column: 1/13;
  width: 100%;
  text-align: left;
  display: grid;
  grid-template-columns: repeat(4, 130px);
  gap: 26px;
}

.photoalbum-image-and-vote-container {
  position: relative;
  width: 130px;
  height: 156px;
}

.photoalbum-image-container {
  position: relative;
  width: 126px;
  height: 126px;
  border: 2px solid black;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}

.photoalbum-vote {
  display: flex;
  justify-content: center;
  position: relative;
  width: 130px;
  height: 26px;
}
.ambiguity {
  margin-left: 2px;
  margin-right: 2px;
  overflow: hidden;
}
.vote-button {
  font-size: 20px;
  margin-left: 2px;
  margin-right: 2px;
  background: none;
  border: none;
  outline: none;
}
.vote-increase {
}
.vote-decrease {
  position: relative;
  bottom: 1px;
}

/* edit article */
.content-form {
  grid-row: 5;
  grid-column: 1/13;
  width: 100%;
  text-align: center;
  word-wrap: break-word;
  display: flex;
  flex-direction: column;
}

.content-form2 {
  grid-row: 6;
  grid-column: 1/13;
  width: 100%;
  text-align: center;
  word-wrap: break-word;
  display: flex;
  flex-direction: column;
}

.submit-images-title {
  margin: 0;
}

.extra-content-so-I-can-scroll-more{
  grid-row: 7;
  width:1px;
  height:100px;
}


/**********************************************************/
/* image page */

.image-content-info {
  grid-row: 5;
  grid-column: 1/13;
  width: 100%;
  text-align: left;
  word-wrap: break-word;
  display: flex;
  flex-direction: column;
}

.image-page-container{
  grid-row: 6;
  grid-column: 1/13;
  width: 100%;
  text-align: center;
}

.image-page-image{
  position: relative;
  z-index: 2;
  margin: 0 auto;
}


/**********************************************************/
/* other site elements */
label {
    display: inline-block;
    float: left;
    clear: left;
    text-align: right;
}

.input-left-justified {
  display: inline-block;
  float: left;
}

textarea.article-text {
  height: 500px;
  width: 100%;
}

textarea.description {
  height: 500px;
  width: 100%;
}

img {
  max-width: 100%;
  max-height: 100%;
}

.box {
  outline-style: solid;
  padding: 0.5rem;
}

.box-header {
  font-family: Poppins-Regular;
  font-size: 1.5rem;
  padding: 0.2rem;
}

.box-subheader {
  padding: 0.3rem;
}

.box-text {

}

.box-admin-controls {
  text-align: right;
}

.box-admin-controls a:link  {
  color: #FF4365;
}

.box-admin-controls a:visited  {
  color: #FF4365;
}

.box-admin-controls a:hover {
  color: #B61D49;
}
/**********************************************************/

/* markup css */
.article-header {
  margin-top: 3rem;
  margin-bottom: 0.3rem;
  font-size: 2rem;
}

div.article-center {
  text-align: center;
}
/**********************************************************/


/* darkmode toggle classes. there is a js script that toggles these, alongside other classes to override colors
it's important that they are defined at the end of the css file so that they can override properly */

.dark-mode-moonlight {
  background-color: var(--main-background);
}

.dark-mode-toggle-button {
  background: var(--main-background);
  border-color: white;
}

.dark-mode-bg {
  background-color: #fbfbfb;
  color: black;
}

/**********************************************************/
/* ambiguity vote stuff */
.comment-vote {
  position: relative;
  bottom: 1px;
  display: flex;
  width: 100%;
  height: 22px;
  justify-content: flex-start;
}

.image-vote {
  display: inline-flex;
  justify-content: flex-start;
}

.decrease-clicked {
  -webkit-text-stroke: 1px green;
}

.increase-clicked {
  -webkit-text-stroke: 1px navy;
}

.ambiguity-container {
  display: flex;
  justify-content: flex-start;
}

/**********************************************************/
/* game tree */

.game-tree-container {
    display: flex;
    flex-direction: column;
    width: 1400px;
    position: relative;
    right: 400px;
}

.title-cairn-top {
    width: 100%;
    text-align: center;
}

.cairn-bottom {
    display: flex;
}

.canvas-cairn-bottom-left {
    flex: 1;
    margin-right: 10px;
}

.info-cairn-bottom-right {
    flex: 1;
}

#canvasContainer {
    width: 800px;
    height: 600px;
    border: 2px solid #000;
    overflow: hidden;
    position: relative;
}

#myCanvas {
    position: absolute;
}

#selected-rect-text {
    margin-bottom: 10px;
}

.info-option-link {
    display: block; /* automatically makes newline after each link instead of placing them side-by-side*/
    margin-bottom: 10px;
}