body{
  background-image: url('noisebg.svg');
}

.themed-grid-col {
  background-color: #99ec54;
  border: 3px solid #008251;
  font-family: "Didact Gothic", sans-serif;
  font-weight: 400;
  font-style: normal;
  padding: 0;
  height: 500px;
}

.themed-grid-cont {
  background-color: rgb(243, 235, 255);
  border: 3px solid #008251;
  font-family: "Didact Gothic", sans-serif;
  font-weight: 400;
  font-style: normal;
  padding: 0;
}

.lunch-col {
  background-color: #2f2828;
  border: 3px solid #99ec54;
  font-family: "Didact Gothic", sans-serif;
  font-weight: 400;
  font-style: normal;
  color:#eaebb2;
}

.label-col{
  background-color: #2f2828;
  border-style: solid solid none solid;
  border-width: 3 px;
  border-color: #99ec54;
  font-family: "Didact Gothic", sans-serif;
  font-weight: 400;
  font-style: normal;
  color:#eaebb2;
}

.tag-col{
  display:grid;
  grid-template-columns: auto auto auto;
  grid-area: a;
  font-size:12px;
  font-weight: 100;
  font-style: normal;
  color:#eaebb2;
  height: 100%;
}

.tag-col div {
  background-color: #2f2828;
  border-color: #99ec54;
  border-width: 1px;
  border-style: solid solid solid solid;
}

.place{
  grid-area: 1 / 1 / span 20 / span 3;
  font-size:18px;
  font-weight: 300;
  display: flex;
  align-items: center;
  justify-content: center;
}

.tag-col-s div {
  background-color: #483f3f;
  border-color: #99ec54;
  border-width: 1px;
  border-style: solid solid solid solid;
}

.papers {
  --s: 150px;
  --f: 1.5;
  display: grid;
  width: 100%;
  height: 100%;
  aspect-ratio: 1;
  grid-template-columns: repeat(3,auto);
  padding: 0;
}

.main{
  background-color: #483f3f !important;
}

.papers div{
  background-color: #2f2828;
  border-color: #99ec54;
  border-width: 1px;
  border-style: solid solid solid solid;
  color:#eaebb2;
  aspect-ratio: 1;
  width: 0;
  height: 0;
  min-height: 100%;
  min-width: 100%;
  cursor: pointer;
  transition: .35s linear;
  overflow: hidden;
  display: block;
  padding:3px;
}

.papers h4{
  font-style: italic;
  text-align: justify;
}

.papers div:hover{
  width: calc(var(--s) * var(--f));
  height: calc(var(--s) * var(--f));
  overflow: hidden;
}

.papers div.on{
  width: calc(var(--s) * var(--f));
  height: calc(var(--s) * var(--f));
  overflow: hidden;
  border-color: #ee3773;
  border-width: 3px;
}

h1 {
  font-family: "Open Sans", sans-serif;
  font-weight: 400;
  font-style: normal;
}

h3 {
  font-family: "Open Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: 300;
  color:#eaebb2;
}

h4 {
  font-family: "Open Sans", sans-serif;
}

.desc {
  background-color: rgb(243, 235, 255);
  border: 3px solid #008251;
  font-family: "Didact Gothic", sans-serif;
  font-weight: 400;
  font-size:18px;
  font-style: normal;
}

img{
  border: 3px solid #008251;
}

.col-container {
  display: table;
  width: 100%;
}

.coral-pixels-regular {
  font-family: "Coral Pixels", serif;
  font-weight: 400;
  font-style: normal;
}

.tag-col-mob{
  display: none;
}

a {
  color: #008251;
}

a:visited{
  color: #ee3773;
}

.im{
  display: none;
}

.text-fit {
  display: flex;
  container-type: inline-size;

  --captured-length: initial;
  --support-sentinel: var(--captured-length, 9999px);

  & > [aria-hidden] {
    visibility: hidden;
  }

  & > :not([aria-hidden]) {
    flex-grow: 1;
    container-type: inline-size;

    --captured-length: 100cqi;
    --available-space: var(--captured-length);

    & > * {
      --support-sentinel: inherit;
      --captured-length: 100cqi;
      --ratio: tan(atan2(
        var(--available-space),
        var(--available-space) - var(--captured-length)
      ));
      --font-size: clamp(
        1em,
        1em * var(--ratio),
        var(--max-font-size, infinity * 1px)
        -
        var(--support-sentinel)
      );
      inline-size: var(--available-space);

      &:not(.text-fit) {
        display: block;
        font-size: var(--font-size);

        @container (inline-size > 0) {
          white-space: nowrap;
        }
      }

      &.text-fit {
        --captured-length2: var(--font-size);
        font-variation-settings:
          'opsz'
          tan(atan2(var(--captured-length2), 1px));
      }
    }
  }
}

@property --captured-length {
  syntax: "<length>";
  initial-value: 0px;
  inherits: true;
}

@property --captured-length2 {
  syntax: "<length>";
  initial-value: 0px;
  inherits: true;
}

@media screen and (max-width: 1400px) {
  .tag-col {
    display: none;
  }

  .tag-col-mob{
    display:grid;
    grid-template-columns: 1fr;
    font-size:12px;
    font-weight: 100;
    font-style: normal;
    color:#eaebb2;
    height: 100%;
  }

  .tag-col-mob div {
    background-color: #2f2828;
    border-color: #99ec54;
    border-width: 1px;
    border-style: solid solid solid solid;
  }

  .et {
    display: none;
  }

  .id{
    display: none;
  }

  .im{
    display: block;
  }

}