@import url('https://fonts.googleapis.com/css2?family=Gaegu&family=Jua&display=swap');

@font-face {
    font-family: "Bibiblu";
    src: url(./assets/fonts/Bibiblu-Regular.ttf);
}

@font-face {
    font-family: "Poppin";
    src: url(./assets/fonts/Poppin-Regular.ttf);
}

:root {
    --primary: #5DD554;
    --dark-primary: #41b664;
    --medium-primary: #CCFF63;
    --light-primary: #F9FFD8;
    --secondary: #FF3575;
    --medium-secondary: #FF927A;
    --light-secondary: #FFDDD6;
    --tertiary: #4D7EDC;
    --medium-tertiary: #90FEEF;
    --light-tertiary: #DBFFFC;
    --content-max-width: 800px;
}

* {
    font-family: "Jua";
    /* font-size: 20px; */
}

body { 
    /* display: flex; */
    background-image: url(./assets/bg_grid.png);
    background-repeat: repeat;
    background-size: 7%;
    justify-content: center;
}

.header-logo {
    image-rendering: pixelated;
    width: 100%;
    height: 100%;
    max-height: 250px;
    object-fit: contain;
}

main {
    position: relative;
    margin: 5% auto 0 auto;
    justify-content: center;
    max-width: var(--content-max-width);
    align-content: center;
}

.main-content {
    margin-top: 40px;
    display: flex;
    flex-wrap: wrap;
}

.content {
    padding: 20px;
    box-sizing: border-box;
    margin-bottom: 20px;
}

.main-content > .left {
    flex: 1 calc(30% - 20px);
    height: 85%;
    order: 1;
    margin: 10px 10px;
}

.main-content > .right {
    flex: 1 calc(70% - 20px);
    height: 85%;
    order: 2;
    margin-left: auto;
    margin: 10px 10px;
}

.border-tertiary {
    color: var(--tertiary);
    background-color: var(--light-tertiary);
    border: 5px solid var(--medium-tertiary);
    border-radius: 20px;
    box-shadow: 5px 5px var(--tertiary),
        -5px -5px var(--tertiary),
        -5px 5px var(--tertiary),
        5px -5px var(--tertiary);
}

.border-secondary {
    color: var(--secondary);
    background-color: var(--light-secondary);
    border: 5px solid var(--secondary);
    border-radius: 20px;
    box-shadow: 5px 5px var(--medium-secondary),
        -5px -5px var(--medium-secondary),
        -5px 5px var(--medium-secondary),
        5px -5px var(--medium-secondary);
}
.border-secondary * {
    text-decoration-color: var(--secondary);
}

.border-secondary-inverted {
    color: var(--light-secondary);
    background-color: var(--secondary);
    border: 5px solid var(--light-secondary);
    border-radius: 20px;
    box-shadow: 5px 5px var(--medium-secondary),
        -5px -5px var(--medium-secondary),
        -5px 5px var(--medium-secondary),
        5px -5px var(--medium-secondary);
}

.border-primary {
    color: var(--dark-primary);
    background-color: var(--light-primary);
    border: 5px solid var(--primary);
    border-radius: 20px;
    box-shadow: 5px 5px var(--medium-primary),
        -5px -5px var(--medium-primary),
        -5px 5px var(--medium-primary),
        5px -5px var(--medium-primary);
}

.border-primary a {
    color: var(--tertiary);
}

.border-primary u {
    text-decoration-color: var(--dark-primary);
}

.border-primary-inverted {
    color: var(--light-primary);
    background-color: var(--primary);
    border: 5px solid var(--light-primary);
    border-radius: 20px;
    box-shadow: 5px 5px var(--medium-primary),
        -5px -5px var(--medium-primary),
        -5px 5px var(--medium-primary),
        5px -5px var(--medium-primary);
}

h1 {
    padding: 10px 0px 10px 0px;
    margin: 0;
    font-family: "Bibiblu";
}

h1 > * {
    font-family: "Bibiblu";
}

h2 {
    margin: 0;
    margin-top: 15px;
}

u {
    text-decoration: underline dashed var(--light-secondary);
    /* text-decoration-skip-ink: all; */
    text-decoration-skip: edges;
}

ul {
    margin: 15px 0;
    padding-left: 20px;
}

li {
    margin-bottom: 25px;
}

.tooltip {
    pointer-events: none;
    position: fixed;
    padding: 6px 10px;
    color: var(--tertiary);
    background-color: var(--light-tertiary);
    border: 3px solid var(--tertiary);
    border-radius: 10px;
    /* box-shadow: 3px 3px var(--medium-tertiary),
        -3px -3px var(--medium-tertiary),
        -3px 3px var(--medium-tertiary),
        3px -3px var(--medium-tertiary); */
    top: 0;
    left: 0;
    z-index: 999;
    opacity: 0;
    box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.216);
    transition: opacity 0.1s cubic-bezier(0.65, 0, 0.35, 1);
}

.tooltip::after {
    content: " ";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -10px;
    border-width: 10px;
    border-style: solid;
    border-color: var(--tertiary) transparent transparent transparent;
}

footer {
    position: relative;
    display: flex;
    order: 2;
    padding: 40px 0px;
    justify-content: center;
    width: 100%;
    color: var(--tertiary);
}

.sticker {
    pointer-events: none;
    position: absolute;
    z-index: 5;
}

#ry_04{
    transform: translate(-45%,-115px);
    width: 350px;
    height: 350px;
    object-fit: contain;
    image-rendering: auto;
    filter: drop-shadow(1px 1px 5px hwb(0 0% 100% / 0.261))
}

#ry_03 {
    transform: translate(105%,450px) scale(.9);
    width: 350px;
    height: 350px;
    object-fit: contain;
    image-rendering: auto;
    filter: drop-shadow(1px 1px 5px hwb(0 0% 100% / 0.261));
}

#right-shapes {
    transform: translate(-65%,290px);
    /* transform: translate(100%,50px); */
    width: 350px;
    height: 600px;
    object-fit: contain;
    image-rendering: auto;
    filter: drop-shadow(1px 1px 5px hwb(0 0% 100% / 0.261));
}

p {
    padding: 0;
    margin: 0;
    font-size: 19px;
}

p > u {
    text-decoration-thickness: 2px;
    text-decoration-style: solid;
}

p > svg {
    height: 1em;
    width: 1em;
    margin: auto 0;
}

.image-icon {
    display: flex;
    width: calc(100% - 10px);
    height: min-content;
    aspect-ratio: 1 / 1;
    justify-content: center;
    align-items: center;
    transition: all 0.6s cubic-bezier(0.33, 1, 0.68, 1);
    margin: 0px 0px 10px 0px;
}

/* that little techno thingy */
/* .image-icon::after{
    content: "----------";
    color: transparent;
    position: absolute;
    border-width: 10px;
    border-style: solid;
    border-color: transparent transparent var(--secondary) transparent;
    clip-path: polygon(100% 0%, 100% 100%, 10px 100%, 10px 0%);
    height: 0;
    margin-top: -20px;
    margin-left: -15px;
} */

.image-icon > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* border-radius: 15px; */
    /* filter: sepia(100%) saturate(450%) hue-rotate(300deg) brightness(85%); */
    transition: all 0.6s cubic-bezier(0.33, 1, 0.68, 1);
}

.image-icon > svg {
    width: 5rem;
    position: absolute;
    opacity: 0;
    filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(172deg) brightness(101%) contrast(102%);
    transition: all 0.25s cubic-bezier(0.33, 1, 0.68, 1);
}

.image-icon:hover {
    transform: scale(.97);
}

.image-icon:hover > img {
    filter:  brightness(55%) contrast(75%)
}

.image-icon:hover > svg {
    opacity: 1;
}

button {
    font-size: 20px;
    padding: 5px 10px;
    transition: all 0.25s cubic-bezier(0.33, 1, 0.68, 1);
    max-height: 50px;
}

button:hover {
    transform: scale(1.05);
} 

nav {
    display: flex;
    height: 70px;
    flex-wrap: nowrap;
    align-items: center;
}

nav > img {
    /* flex: 5; */
    /* text-align: right; */
    object-fit: contain;
    margin-left: auto;
    display: flex;
    position: relative;
    height: 100%;
}

.gallery {
    margin-top: 40px;
    display: flex;
    flex-wrap: nowrap;
}

.gallery-column {
    display: flex;
    flex-flow: column;
    padding: 5px;
    justify-items: center;
}

.gallery-item {
    display: flex;
    width: 100%;
    height: min-content;
    padding-bottom: 10px;
    align-content: center;
    justify-content: center;
    flex-wrap: wrap;
    cursor: pointer;
}

.gallery-item > * {
    width: 100%;
    height: 100%;
}

.gallery-lightbox {
  /* display: flex; */
  display: none;
  position: fixed;
  z-index: 2;
  width: 100vw;
  height: 100vh;
  background: #000000bf;
  top: 0;
  left: 0;
  flex-wrap: wrap;
  align-content: center;
  justify-content: center;
}

.gallery-lightbox > div {
  background: transparent;
  width: 85%;
  height: 85%;
}

.gallery-lightbox > div >img {
  background: transparent;
  width: 100%;
  height: 100%;
}

button {
  cursor: pointer;
}

.aside-button {
  height: min-content;
  width: min-content;
  background: transparent;
  border: transparent;
}

.border-tertiary a {
    text-decoration-style: dashed;
    color: var(--secondary);
}

.border-secondary a {
    text-decoration-style: dashed;
    color: var(--tertiary);
}

@keyframes recordSpinning {
    from { transform: rotateZ(0deg); }
    to { transform: rotateZ(360deg); }
}

.record {
    width: 100%; 
    /* height: 100%; */
    margin-top: auto; 
    margin-bottom: auto; 
    clip-path: circle(50% at 50% 50%);  
    animation-name: recordSpinning;
    animation-duration: 20s;
    animation-timing-function: linear(0,1);
    animation-iteration-count: infinite;
}

.record-thumbnail {
    display: flex; 
    /* margin-left: -100%; */
    /* margin-right: 50%;  */
    transform: scale(1.5);
}

.record-thumbnail::after{
    content: " ";
    /* display: flex; */
    top: calc(50% - 3px);
    left: calc(50% - 3px);
    position: absolute;
    width: 0%;
    height: 0%;
    border-width: 3px;
    border-style: solid;
    border-color: var(--light-primary);
    border-radius: 50%;
}

@keyframes bob {
    0% {
    transform: translateY(0);
    }
    50% {
    transform: translateY(-15px);
    }
    100% {
    transform: translateY(0);
    }
}

.bob {
    position: relative;
    animation: bob 5s ease-in-out infinite;
}

a { 
    text-decoration-line: none;
}

a:hover{
    text-decoration-line: underline;
}

.inline-icon {
    height: 1rem;
}

a > .inline-icon {
    filter: invert(44%) sepia(100%) saturate(380%) hue-rotate(182deg) brightness(89%) contrast(90%);
}

.buttons-88x31 {
    display: flex;
    flex-wrap: wrap;
    margin: -6px;
    margin-top: 12px;
    /* justify-items: center; */
    /* align-items: center; */
}


.buttons-88x31 img {
    image-rendering: pixelated;
    height: 31px;
    width: 88px;
}

.buttons-88x31 a {
    height: 31px;
    width: 88px;
}

.buttons-88x31 > * {
    padding-right: 3px;
    padding-bottom: 3px;
}

.tgfr-music {
    display: grid;
    grid-template-columns: calc(50% - 10px) calc(50% - 10px);
    gap: 20px;
}

button > svg {
    width: 100%;
    height: 100%;
}

.tgfr-music > .controls {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.control-row {
    display: grid;
    grid-template-columns: 33% 33% 33%;
    align-items: center;
    margin: 0 25px;
}

.control-row > button {
    display: flex;
    margin: 3px;
    border-radius: 50%;
    background-color: var(--light-primary);
    border-style: none;
    align-items: center;
    aspect-ratio: 1 / 1;
}

.control-row > button:hover > svg {
    filter: invert(81%) sepia(41%) saturate(681%) hue-rotate(58deg) brightness(87%) contrast(93%);
}

.tgfr-music > .playlist {
    height: 200px;
    overflow-y: scroll;
}

.playlist-item {
    display: flex;
    height: 65px;
    width: 100%;
    padding: 0;
    border: transparent;
    background-color: var(--light-primary);
    padding-bottom: 5px;
}

.playlist-item > img {
    /* height: 25%; */
    width: 25%;
    margin-right: 5px;
    object-fit: contain;
    order: 1;
    aspect-ratio: 1 / 1;
}

.playlist-item > span {
    /* display: flex; */
    width: 100%;
    order: 2;
    text-align: right;
    margin: auto 0;
    font-size: 12px;
    vertical-align: middle;
}

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

.story {
    padding-top: 15px;
    color: lightgrey
}

.story > p {
    padding: 15px 0;
}

.story > div {
    display: flex;
    width: 100%;
}

.story > div > div {
    width: 35%;
    /* max-height: 7rem; */
    aspect-ratio: 4 / 3;
    flex: 1;
    padding: 20px;
}

.story img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    cursor: pointer;
}