/*
=About
============================================= */
* {
    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(126, 230, 74);
   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;
}

p {
    font: normal 400 25px/1.5 "IBM Plex Mono", monospace;
    color: rgb(176, 236, 35);
    padding: 0 25px;
}

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

/* TARGETS FIGURE */
figure {
    display: flex;
    flex-wrap: wrap;
    margin-top: 5px;
    align-self: flex-start;
    justify-content: center;
    background-image: url(../assets/images/houseframe2.png);
    background-size: 100% 100%;
}

/* TARGETS  */
.mii {
    position: relative;
    transition: .15s ease-in-out;
    transform: rotate(0deg);
    width: 30%;
    flex: 0 0 auto;
    justify-content: center;
    align-items: center;
    z-index: 5;
}

.mii:hover {
    transform: rotate(6deg);
}

.mii img {
    width: 100%;
    display: block;
    transform-origin: top;
    transform: rotate(0deg);
    transition: .5s ease-in-out;
}

/* CHECKBOX */
input {
    display: none;
}

label {
    cursor: pointer;
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
}

.desc-wrapper {
    /* overflow: hidden; */
    /* max-width: 0%; */
    /* display: none; */
    /* display: none; */
    /* align-items: flex-start; */
    overflow: hidden;
    max-width: 0;
    transition: .5s ease-in-out;
    align-self: flex-start;
}

input:checked ~ .desc-wrapper {
    display: flex;
    max-width: 100%;
    /* align-self: flex-start; */
    padding: 15px;
    overflow-x: hidden;
    background-color: yellow;
    border-radius: 35px 35px 35px 0;
    overflow-y: auto;
    flex: 0 1 auto;
    transition: .5s ease-in-out;
}

.about-desc {
    /* padding-top: 35px; */
    align-content: center;
    justify-content: center;
    /* margin: 0 auto; */
}

/* MEDIA QUERIES */
/* small */
@media ( max-width: 576px ) {
    .mii { width: 70%; }
}

/* medium-small */
@media ( min-width: 658px ) {
    .mii { width: 65%; }
}

/* medium */
@media ( min-width: 768px ) {
    .mii { width: 55%; }
}
/* large */
@media ( min-width: 992px ) {
    .mii { width: 40%; }
}

/* x-large */
@media ( min-width: 1200px ) {
    .mii { width: 35%; }
}
/* xx-large */
@media ( min-width: 1400px ) {
    .mii { width: 30%; }
}