/*
=Homepage
============================================= */
* {
    box-sizing: border-box;
    margin:0;
}

body {
    margin: 0;
    --grid-size: 30px;
    --grid-strength: 1px;
    --grid-dash: 10px;
    --grid-gap: 5px;
    --grid-color: #f1f497;
    --paper-color: #fff;
    background-color: var(--paper-color);
    background-size: var(--grid-dash) var(--grid-dash), var(--grid-size) var(--grid-size);
    background-image:
      linear-gradient(to bottom, transparent var(--grid-gap), var(--paper-color) var(--grid-gap)), 
      linear-gradient(to right, var(--grid-color) var(--grid-strength), transparent var(--grid-strength)),
      linear-gradient(to right, transparent var(--grid-gap), var(--paper-color) var(--grid-gap)),
      linear-gradient(to bottom, var(--grid-color) var(--grid-strength), transparent var(--grid-strength));
}

  
a:link, a:visited {
   color:  rgb(155, 220, 123);
   text-decoration: none;
}

a:hover, a:active {
    color: rgb(255, 92, 163);
}


header {
    position: fixed; /* remove the header element from the page flow to position it */
    top: 0; left: 0; /* align the header element with the top and left edges of the viewport */
    width: 100%; /* ensure the header element spans the entire width of the viewport */
    z-index: 10;
}

header .ins-wrapper {
    margin: 0 auto; /* use auto margins on the left + right to center the inside wrapper within the header element */
    padding-top: 30px; /* add some space between the heading + viewport's top edge */
    padding-right: 30px;
    top: 0; right: 0;
    position: absolute;
    /* display: flex;
    justify-content: space-between;
    align-items: center; */
}

.heading {
    margin: 15px 20px 50px 20px;
}

h1 {
    font: normal 400 50px/1.5 "IBM Plex Mono", monospace;
}

.smalltext {
    font: normal 400 15px/1.2 "IBM Plex Mono", monospace;
    color: rgb(154, 154, 166);
    padding: 0 25px;
}

.gallery-wrapper {
    display: flow-root; 
    max-width: 1600px; 
    min-height: 100vh; 
    margin: 0 auto;
    padding: 0 50px;
}

.container {
    display: flex;
    flex-wrap: wrap;
    margin: 0px -5px;
}

/* TARGETS FIGURE */
.container figure {
    padding: 5px;
}

/* TARGETS INDIVIDUAL IMG */
.image-wrapper img {
    width: 100%;
    display: block;
    transform-origin: center;
}

.image-wrapper {
    margin: 0;
    padding:5px;
    position: relative;
    transform: rotate(0deg);
    transition: .15s ease-in-out;
}

/* TARGETS IMAGE CAPTIONS */
.image-wrapper figcaption {
    color: transparent;
    font: normal 500 30px/1.9 "Courier Prime", serif;
    letter-spacing: 3px;
    text-align: center;

    position: absolute;
    top: 5px; right: 5px; bottom: 55px; left: 5px;
    display: flex;
    align-items: end;
    justify-content: center;
    padding: 10px;

    transform: rotate(-5deg);
}

.image-wrapper figcaption:hover {
    color: rgb(205, 236, 81);
    cursor: pointer; 
}

.image-wrapper:hover {
    transform: rotate(15deg);
}

span {
    background-color: rgb(0,0,0/0);
}

figcaption:hover span {
    background: rgb(30, 29, 30);
}

/* MEDIA QUERIES */
/* small */
@media ( max-width: 576px ) {
    .container figure { flex: 0 1 100% }
}
/* medium */
@media ( min-width: 768px ) {
    .container figure { flex: 0 1 50%; }
}
/* large */
@media ( min-width: 992px ) {
    .container figure { flex: 0 1 33.3333%; }
}

/* x-large */
@media ( min-width: 1200px ) {
    .container figure { flex: 0 1 33.3333%; }
}
/* xx-large */
@media ( min-width: 1400px ) {
    .container figure { flex: 0 1 25%; }
}