/*
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
                       888                            d8b      888 
                       888                            Y8P      888 
                       888                                     888 
 .d88b.   .d88b.   .d88888 .d8888b   .d88888 888  888 888  .d88888 
d88P"88b d88""88b d88" 888 88K      d88" 888 888  888 888 d88" 888 
888  888 888  888 888  888 "Y8888b. 888  888 888  888 888 888  888 
Y88b 888 Y88..88P Y88b 888      X88 Y88b 888 Y88b 888 888 Y88b 888 
 "Y88888  "Y88P"   "Y88888  88888P'  "Y88888  "Y88888 888  "Y88888 
     888                                 888                       
Y8b d88P                                 888                       
 "Y88P"                                  888                       
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::

If you're here to root around for source code, please take anything
you want, but good luck down there this place is a fucking mess
*/

@import url('https://fonts.upset.dev/css2?family=Merriweather:opsz@18..144&display=swap');
@import url('https://fonts.upset.dev/css2?family=Germania+One&display=swap');

:root {
    --background-color: #dfe0cc;
    --background-darker: #d2d3bc;
    --text-color: #000000;
    --blockquote: #536432;
    --green: #b2b787;
    --green-dark: #767e4b;
    --green-darker: #46541c;
    --magenta: #ad452a;
    --cyan: #536432;
    --black: #000;
    --white: #fff;
}


/* MAIN */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
html {
    scroll-behavior: smooth;
    scrollbar-color: var(--green) var(--background-color);
}
body {
    font-family: "Merriweather", serif;
    font-weight: 400;
    font-size: 1em;
    letter-spacing: 1px;
    color: var(--text-color);
    background-color: var(--background-color);
    background: url("assets/vivaria/muscinae.png");
    background-size: cover;
    -webkit-background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center;
    image-rendering: pixelated;
}






/* CONTAINERS */
#container {
    max-width: 1000px;
    margin: 50px auto 30px auto;
    position: relative;
}
#container-home {
    max-width: 1228px;
    margin: 0px auto 20px auto;
    position: relative;
}
#container-home img {
    max-width: 100%;
}
.flex {
    display: flex;
}
.flex-home {
    display: flex;
    position: absolute;
    top: 330px;
    max-width: 830px;
}
.flex img {
    max-width: 100%;
    height: auto;
}
.left-flex {
    flex: initial;
    width: 190px;
    margin-right: -2px;
    text-align: center;
}
.right-flex{
    flex: 1;
    border: 1px solid var(--green);
    box-shadow: 9px 9px black;
    background: var(--green-dark);
    padding: 3px;
    border-radius: 7px;
    z-index: 5;
}
main {
    width: 100%;
    height: 100%;
    background: var(--background-color);
    border: 1px solid var(--green-darker);
    border-radius: 7px;
    padding: 15px 25px 25px 25px;
}
.center {
	display: block;
	margin: 0 auto;
    text-align: center;
}
.abox {
    width: 90%;
    text-align: left;
    border: 1px solid var(--text-color);
    box-shadow: 9px 9px black;
    margin: 20px auto;
    padding: 12px;
    border-radius: 5px 0px 5px 5px;
}
.bbox {
    text-align: left;
    border-left: 2px solid var(--magenta);
    background-color: var(--background-darker);
    margin: 20px auto;
    padding: 12px;
}
.two-column-grid {
    display: grid;
    justify-items: center;
    align-items: center;
    grid-template-columns: 230px 1fr;
    width: 80%;
    margin: 0 auto;
}
.two-column-grid > * {
    padding: .8rem;
}
.two-column-grid img {
    box-shadow: 9px 9px black;
}
.img-border {
    border: 1px solid var(--text-color);
}
.grid-border{
    border-bottom: 2px solid var(--magenta);
    grid-column: span 2;
}


/* GALLERY */
.gallery-grid {
    columns: 2;
    column-gap: 1.3rem;
    width: 100%;
    margin: 0 auto;
}
.gallery-grid div {
    margin: 0 1.3rem 1.3rem 0;
    padding: 0;
    display: inline-block;
    width: 100%;
    transition: all .25s ease-in-out;
}
.gallery-grid div:hover {
    transform: scale(1.1);
}
.gallery-grid div img {
    width: 100%;
    transition: all .25s ease-in-out;
    border: 2px solid var(--magenta);
    padding: 3px;
}

/* footer */
footer {
    text-align: center;
    font-size: .9em;
    margin-top: 40px;
    margin-left: 190px;
    color: white;
}


/* TEXT STYLES */
b {
	color: var(--magenta);
}
p {
    display: block;
    margin-top: 1em;
    margin-bottom: 1em;
}
mark {
    background: var(--cyan);
    text-shadow: none;
}
p::selection,
li::selection {
    color: var(--background-darker);
    background-color: var(--green);
    text-shadow: none;
}
main ul {
    list-style-type: "✦";
    padding-left: 25px;
    padding-bottom: 8px;
}
main ol {
    padding-left: 25px;
}
main ul li,
main ol li {
    padding: 7px 0 0 10px;
}
pre {
    max-width: 600px;
    overflow: auto;
}
blockquote {
    font-family: "Merriweather", serif;
    font-size: 20px;
    font-style: italic;
    color: var(--blockquote);
    text-align: center;
    padding: 10px 90px;
}
input[type=text],
textarea {
    border: 1px solid var(--text-color);
    border-radius: 4px;
    padding: 8px;
}
input[type=button],
input[type=submit],
input[type=reset] {
    border: 2px solid var(--text-color);
    padding: 6px 7px;
    color: var(--text-color);
    background-color: var(--background-color);
}



/* HEADERS */
h1,
h2 {
    font-family: "Germania One";
    font-weight: 400;
    font-style: normal;
}
h1 {
	color: var(--magenta);
	font-size: 3.7em;
	text-align: center;
    padding-bottom: 8px;
}

h2 {
	color: var(--cyan);
	font-size: 2.5em;
	text-align: left;
    padding-top: 12px;
}
h3 {
	color: var(--magenta);
    font-size: 1.3em;
    
    padding-top: 12px;
}
h4 {
	color: var(--cyan);
	font-size: 1.2em;
	text-shadow: 2px 2px black;
}
hr {
	border: 1px solid var(--magenta);
	margin: 50px auto;
	width: 40%;
    text-align: center;
}




/* NAVIGATION */

nav {
    position: sticky;
    position: -webkit-sticky;
    top: 40px;
    margin-top: 80px;
}
nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
nav ul a,
nav ul a:visited {
    display: block;
    font-size: 18px;
    letter-spacing: 2px;
    text-align: right;
    text-decoration: none;
    font-style: italic;
    color: var(--magenta);
    background-color: #e0b071;
    margin: 5px 0;
    padding: 3px 12px 3px 0;
    border: 1px solid var(--magenta);
    border-radius: 5px 0 0 5px;
    box-shadow: 2px 2px black;
    transition: .2s ease; 
}
nav ul a:hover,
nav ul a:focus {
    color: var(--green-dark);
    letter-spacing: 3px;
    background-color: var(--background-color);
    border: 1px solid var(--green-darker);
    margin-left: -7px;
    
}


/* LINKS */
a, a:visited {
	cursor: pointer;
	color: var(--magenta);
    text-decoration: underline var(--magenta);
    text-underline-offset: 3px;
    transition: .2s ease;
    font-style: italic;
}
a:hover {
    color: var(--cyan);
    text-decoration-color: var(--magenta);
}
a:active {
    position: relative;
    top: 1px;
    left: 1px;
}
    

a[href^="http://"]::after, a[href^="https://"]::after {
    content: "\2197";
}
a[href*="//godsquid.neocities.org/"]::after, a.linkout::after {
    display: none !important;
}
a.linkout::after {
    display: none !important;
}
a.linkout img {
    box-shadow: 3px 3px black;
}
a.linkout img:hover,
.fake-button:hover {
    position: relative;
    top: 1px;
    left: 1px;
    box-shadow: none;
}
.fake-button {
    display: inline-block;
    height: 31px;
    width: 88px;
    box-shadow: 3px 3px black;
    border: 1px solid var(--magenta);
    font-size: 10px;
    overflow: hidden;
}
ul.crumbs {
    list-style: none;
    padding-left: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: left;
    line-height: 2rem;
}
ul.crumbs li {
    list-style-type: none;
}
.crumbs a,
a.crumbs{
    font-size: 0.875em;
    font-weight: normal;
    background-color: var(--background-darker);
    color: var(--cyan);
    text-decoration: none;
    text-shadow: none;
    padding: 7px 8px;
    line-height: 1.2em;
    border-radius: 5px;
    font-style: normal;
    transition: none !important;
}
.crumbs a:hover, a.crumbs:hover{
    position: relative;
    left: 1px;
    top: 1px;
}
.active {
    text-decoration: underline !important;
    text-decoration-color: var(--magenta) !important;
}



/* BOXES */
details.jump {
    padding: 10px;
    margin: 10px;
    border-radius: 5px;
    border: 1px solid var(--magenta);
    box-shadow: 3px 3px black;
    background-image: url("/assets/bg4.png");
}
details.jump > summary {
    color: var(--white);
    font-weight: bold;
    cursor: pointer;
}
details.dreams {
    padding: 10px;
    margin: 10px;
    border-radius: 5px;
    border: 1px solid var(--magenta);
    box-shadow: 3px 3px black;
}
details.dreams > summary {
    font-weight: bold;
    cursor: pointer;
}
details.dreams > summary:hover {
    color: var(--cyan);
}
details.dreams[open] > summary {
    font-style: italic;
    color: var(--cyan);
}
.grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-column-gap: 8px;
    gap: 7px;
    margin: 1.5em 0;
}
.grid > div {
    background: var(--background-darker);
    padding: 1.5rem;
    border-radius: 5px;
    text-align: center;
}
.grid > div > p {
    padding: 0;
}


/* IMAGES */
img {
    image-rendering: auto;
}
.boximg {
    float: right;
    margin-left: 15px;
}
.graphics-box {
    text-align: center;
}
.graphics-box > img {
    padding: 5px;
}

/* FIGURES */
figure {
    padding: 0;
    margin: 0;
}
figure img {
    display: block;
    max-width: 100%;
    margin: 0 auto;
}
figure.one img {
    max-width: 80%;
}
figure.one {
    margin: 35px 0 20px 0;
}
figure a img {
    border: 2px solid var(--magenta);
    padding: 3px;
}
figure a img:hover {
    border: 2px solid var(--green-dark);
}
figcaption {
    color: var(--green-darker);
    display: block;
    padding: 10px 0;
    text-align: center;
    font-style: italic;
    font-size: 0.9rem;
}


/* VIVARIA NAVIGATION */
.vivbar {
    display: block;
    height: 90px;
    border-radius: 7px;;
    border: 2px solid var(--green-darker);
    box-shadow: 4px 4px var(--green);
    position: relative;
    background-color: var(--green);
    margin: 14px 0;
    background-blend-mode: darken;
    background-repeat: no-repeat;
    background-position: center;
}
.vivbar span {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 2rem;
    color: var(--white);
    text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000, 0px 0px 5px #000;
    
}
.vivbar:hover span {
    color: var(--green);
}
.vivbar:hover {
    background-blend-mode: normal;
}

.isopod {
    background-image: url("/assets/vivaria/viv-isopods.jpg");
}
.gecko {
    background-image: url("/assets/vivaria/viv-gecko.jpg");
}
.frog {
    background-image: url("/assets/vivaria/viv-frog.jpg");
}
.beetles {
    background-image: url("/assets/vivaria/viv-beetles.jpg");
}






/* MISC */
.side-title {
    font-family: "Overwave", sans-serif;
    font-size: 48px;
    line-height: 34px;
    text-shadow: 2px 2px black;
    padding: 10px;
    color: var(--white);
    text-shadow: -2px 0 magenta, 2px 0 cyan;
}
.drpepper {
    filter: drop-shadow(0 0 0.75rem rgb(247, 239, 240));
}
.drpepper:hover {
    cursor: pointer;
    animation: tilt-shaking .25s infinite;
}
@keyframes tilt-shaking {
    0% { transform: rotate(0deg); }
    25% { transform: rotate(5deg); }
    50% { transform: rotate(0eg); }
    75% { transform: rotate(-5deg); }
    100% { transform: rotate(0deg); }
}

.squid-adopt {
    position: fixed;
    bottom: 0;
    right: 0;
}
.squid-adopt:hover {
    animation: gelatine 0.5s infinite;
}
.gelatin:hover {
    animation: gelatine 0.5s infinite;
}
@keyframes gelatine {
  from, to { transform: scale(1, 1); }
  25% { transform: scale(0.9, 1.1); }
  50% { transform: scale(1.1, 0.9); }
  75% { transform: scale(0.95, 1.05); }
}



@media screen and (max-width: 600px) {
    #container, #container-home {
        margin-top: 10px;
    }
    .flex, .flex-home {
        flex-wrap: wrap;
        position: relative;
        top: 10px;
    }
    main, nav {   
        flex-direction: column;
    }
    nav {
        position: relative;
        top: 0px;
        margin-top: 0px;
    }
    .right-flex {
        order: 2;
    }
    .left-flex {
        order: 1;
        width: 100%;
        margin: 0;
    }
    footer {
        margin-left: 0px;
    }
    .grid {
        grid-template-columns: 1fr;
    }
    .two-column-grid {
        display: grid;
        grid-template-columns: 1fr;
    }
    h1 {
        font-size: 2.3em;
    }
    h2 {
        font-size: 1.8em;
    }
    blockquote {
        padding: 10px 10px;
    }
    nav ul li a {
        text-align: center;
    }
    .vivbar span {
        font-size: 1.5rem;
    }
    .isopod {
    background-position: right;
    }
    .gecko {
        background-position: left;
    }
    .frog {
        background-position: right;
    }
    .beetles {
        background-position: left;
    }
    figure.one img {
    max-width: 100%;
    }
    .gallery-grid {
    columns: 1;
    }
}