/*
    FLASHFICTION (a writing game webpage)
    by Caehdus

    Table of Contents:
        GENERAL
            reset
            styling
        HEADER
        CONTENT
*/

/* GENERAL
----------------------------------------------- */
@import url(https://fonts.bunny.net/css?family=alkalami:400|cutive-mono:400|darumadrop-one:400);
/* usually I get my fonts on https://fonts.bunny.net */

:root {
    --background-color: hsl(0, 0%, 91%);
    --secondary-background-color: hsl(0, 4%, 87%);
    --font-color: hsl(15, 25%, 32%);
    --accent-color: hsl(48, 86%, 43%);
    --secondary-accent-color: hsl(0, 0%, 0%);
    --third-accent-color: hsl(57, 32%, 39%);

    --main-font: 'Cutive Mono', monospace;
    --accent-font: 'Darumadrop One', display;
    ;
}

/* reset
------------------------ */
*,
*:before,
*:after {
    box-sizing: inherit;
    /* Uncomment next line when you're lost */
    /* border: 1px dotted red; */
    scrollbar-color: var(--secondary-accent-color), var(--background-color)
}

body, html {
    height: 100%;
}

html {
    box-sizing: border-box;
    font-size: clamp(1rem, 0.75rem + 0.75vw, 1.5rem);
}

body {
    background-color: var(--background-color);
    font-family: var(--main-font);
    color: var(--font-color);
    line-height: 1.5;
}

body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
ol,
ul {
    margin: 0;
    padding: 0;
    font-weight: normal;
}

p,
h1,
h2,
h3,
h4,
h5,
h6 {
    overflow-wrap: break-word;
    padding: .5rem;
}

p {
    text-wrap: pretty;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    text-wrap: balance;
    font-family: var(--accent-font);
    text-align: center;
}

ol,
ul {
    list-style: none;
}

img,
picture,
video,
canvas,
svg {
    display: block;
    max-width: 100%;
    height: auto;
}

input,
button,
textarea,
select {
    font: inherit;
}

/* styling
------------------------ */
hr {
    border: none;
    border-top: 1px dashed var(--font-color);
    margin: .5rem;
    width: 95%;
}

.credit {
    font-size: .5rem;
    font-style: italic;
}

span {
    font-size: .6rem;
    font-family: var(--accent-font);
    text-transform: uppercase;
    color: var(--accent-color);
}

a {
    color: var(--third-accent-color);
}

/* HEADER
----------------------------------------------- */
header {
    padding-top: .8rem;
}

/* MAIN
----------------------------------------------- */
body {
    background-image: url(images/flowers.jpg);
    background-size: cover;
    background-position: center center;
    padding: 1rem;
}

main {
    background-color: var(--background-color);
    width: 60%;
    height: 80vh;
    margin: auto;
    border-radius: 1rem;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* CONTENT
----------------------------------------------- */
#display {
    overflow: hidden;
    position: relative;
    display: flex;
    justify-content: space-between;
    padding: 1.5rem;
    gap: 1rem;
}

#display > * {
    flex: 1;
    text-align: justify;
    font-size: .6rem;
    overflow-y: auto;
}

.legend {
    font-size: .4rem;
    text-transform: uppercase;
    margin: .5rem 1rem;
    padding: .5rem;
    border: 1px dashed var(--third-accent-color);
    background-color: var(--secondary-background-color);
}

.legend p {
    margin: 0;
    padding: .2rem;
    color: var(--third-accent-color);
}

#menu {
    padding-right: 1rem;
}

/* menu
----------------------------------------------- */
.collection {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(3.5rem, 1fr));
}

.boyfriend {
    position: relative;
    aspect-ratio: 1 / 1;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    border-radius: 100%;
    transition: transform .1s ease-in-out;
    margin: .2rem;
    overflow: hidden;
    opacity: 70%;
}

.boyfriend:hover {
    /* transform: rotate(360deg); */
    transform: scale(1.1);
    opacity: 100%;
}

.filter {
    width: 100%;
    height: 100%;
    background-color: var(--secondary-accent-color);
    opacity: 100%;
    mix-blend-mode: hue;
    position: absolute;
    top: 0;
}

.clickable {
    cursor: pointer;
    border: .2rem var(--accent-color) solid;
}

/* boyfriend pages
----------------------------------------------- */
/* masonry layout*/
/* https://css-irl.info/masonry-in-css/ */
#imageBoard {
  columns: 6rem;
  gap: .2rem;
  counter-reset: grid;
}

.imageBoardImg + .imageBoardImg {
  margin-top: .2rem;
}

.imageBoardImg {
  break-inside: avoid;
  aspect-ratio: 4 / 3;
}

.imageBoardImg::before {
  counter-increment: grid;
  content: counter(grid);
}

.imageBoardImg:nth-child(3n) {
  aspect-ratio: 1;
}

.imageBoardImg:nth-child(3n - 1) {
  aspect-ratio: 2 / 3;
}
/* end masonry */

.source {
    text-align: center;
    margin-top: -.8rem;
    padding: 0;
    letter-spacing: .3rem;
}

.backLink {
    position: absolute;
    top: 0;
    right: 0;
    margin: 1rem;
}

button {
    background-color: var(--accent-color);
    border: none;
    padding: .2rem .5rem;
    color: var(--background-color);
    font-family: var(--accent-font);
    border-radius: 1rem;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    transition: transform .1s ease-in-out;
    padding-bottom: .3rem;
}

button > a {
    text-decoration: none;
    color: var(--background-color);
}

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