/*
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
                       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=Montserrat+Alternates&display=swap');
@font-face {
    font-family: "Overwave"; 
    src: url("/assets/fonts/Overwave.woff2") format("woff2");
    font-style: normal;
}

:root {
    --background-color: #171a1c;
    --background-darker: #101111;
    --text-color: #45f2a9;
    --blockquote: #50b8ad;
    --green: #46fe9a;
    --green-dark: #33cc99;
    --green-darker: #08362c;
    --magenta: #ff49ff;
    --cyan: cyan;
    --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: "Montserrat Alternates", sans-serif;
    font-size: 1em;
    line-height: 1.3;
    letter-spacing: 1px;
    color: var(--text-color);
    text-shadow: 1px 1px black;
    background-color: var(--background-color);
    background: url("assets/battleback_dw_pluto_blue.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: 1000px;
    margin: 10px auto;
    position: relative;
}
#container-home img {
    max-width: 100%;
}
.flex {
    display: flex;
}
.flex-home {
    display: flex;
    position: absolute;
    top: 298px;
    max-width: 628px;;
}
.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;
    max-width: 100%;
}
main {
    width: 100%;
    height: 100%;
    background: var(--background-color);
    border-top: 1px solid var(--green);
    border-left: 1px solid var(--green);
    border-right: 1px solid var(--magenta);
    border-bottom: 1px solid var(--magenta);
    border-radius: 7px;
    padding: 15px 25px 25px 25px;
}
.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;
}

.two-column-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-column-gap: 8px;
    gap: 7px;
    margin: 8px 0;
}
.two-column-grid > * {
    padding: .8rem;
}
.grid-border{
    border-bottom: 2px solid var(--magenta);
    grid-column: span 2;
}

.gallery-grid {
    columns: 2;
    column-gap: 1.5rem;
    width: 100%;
    margin: 0 auto;
}
.gallery-grid div {
    margin: 0 1.5rem 1.5rem 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;
}




.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: 1px solid var(--text-color);
    background-color: var(--background-darker);
    margin: 20px auto;
    padding: 12px;
}



/* 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;
}
*::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;
}
blockquote {
    font-family: Georgia, 'Times New Roman', Times, serif;
    font-size: 1.25em;
    font-style: italic;
    color: var(--blockquote);
    text-align: center;
    padding: 10px 90px;
}
input[type=text],
input[type=email],
select,
textarea {
    border: 1px solid var(--text-color);
    border-radius: 4px;
    padding: 8px;
    width: 100%;
    margin: 6px 0 16px 0;
}
input[type=button],
input[type=submit],
input[type=reset],
button {
    border: 2px solid var(--text-color);
    padding: 6px 7px;
    color: var(--text-color);
    background-color: var(--background-darker);
    cursor: pointer;
    border-radius: 7px;
    box-shadow: 3px 3px black;
    font-family: monospace;
}
button:hover {
    background-color: var(--text-color);
    color: var(--black);
}
button:active {
    position: relative;
    top: 1px;
    left: 1px;
}
pre {
    overflow-x: auto;
    white-space: pre-wrap;
}


/* HEADERS */
h1,
h2 {
    font-family: "Overwave", sans-serif;
    font-weight: normal;
    text-shadow: 2px 2px black;
}
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;
    text-shadow: 2px 2px black;
    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: 1.2em;
    letter-spacing: 2px;
    text-align: right;
    text-decoration: none;
    color: var(--magenta);
    background: rgb(23, 26, 28, 0.9);
    margin: 5px 0;
    padding: 3px 12px 3px 0;
    border: 1px solid var(--green);
    border-radius: 5px 0 0 5px;
    box-shadow: 2px 2px black;
    transition: .2s ease; 
}
nav ul a:hover,
nav ul a:focus {
    color: #FFFFFF;
    text-shadow: -2px 0 magenta, 2px 0 cyan;
    letter-spacing: 3px;
    background: rgb(23, 26, 28);
    margin-left: -7px;
    animation: threedee 2.3s infinite;
}
@keyframes threedee {
    0% { text-shadow: none; }
    40% { text-shadow: -2px 0 magenta, 2px 0 cyan; }
    70% { text-shadow: -2px 0 magenta, 2px 0 cyan; }
    100% {text-shadow: none;}
}



/* LINKS */
a, a:visited {
	cursor: pointer;
	color: var(--magenta);
    text-decoration: underline var(--magenta);
    text-decoration-style: dotted;
    text-underline-offset: 3px;
    transition: .2s ease;
}
a:hover {
    color: var(--cyan);
    text-decoration-color: var(--magenta);
    text-decoration-style: solid;
}
a:active {
    position: relative;
    top: 1px;
    left: 1px;
}
a[href^="http://"]::after,
a[href^="https://"]::after {
    content: "\2197";
}
a[href*="//godsquid.ink/"]::after,
a.linkout::after
{
    content: none;
}
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;
    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 {
    padding: 10px;
    margin: 10px;
    border-radius: 5px;
    border: 1px solid var(--magenta);
    box-shadow: 3px 3px black;
}
details summary {
    font-weight: bold;
    cursor: pointer;
}
details summary:hover {
    color: var(--cyan);
}
details[open] > summary {
    font-style: italic;
    color: var(--cyan);
}
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;
}


/* IMAGES */
img {
    image-rendering: auto;
}
.img-border {
    border: 1px solid var(--text-color);
    box-shadow: 9px 9px black;
}
.float {
    float: left;
    margin: 0 22px 22px 0;
}
.clear {
    clear: both;
}
.graphics-box {
    text-align: center;
    padding: 15px;
}
.graphics-box > div {
    margin: 5px;
}
.ff-image {
  vertical-align: unset !important;
}
figure {
    display: table;
    margin: 30px auto;
}
figure img {
    display: block;
}
figcaption {
    display: table-caption;
    caption-side: bottom;
    text-align: center;
    font-style: italic;
    font-size: 0.9em;
    padding-top: 10px;
}

/* TABLES */
td {
    padding: 5px;
    vertical-align: top;
}









/* MISC */
.squid {
    min-width: 1000px;
    pointer-events: none;
    z-index: 10;
}
.tentacles {
    background: url("/assets/tentacles-png.png") no-repeat;
    position: absolute;
    top: 9px;
    right: -204px;
    width: 230px;
    height: 631px;
    pointer-events: none;
    z-index: 10;
}
.splashtitle {
    font-family: "Overwave", sans-serif;
    font-size: 3.5em;
    color: var(--white);
    text-shadow: -2px 0 magenta, 2px 0 cyan;
    text-align: center;
    margin: 0;
}
.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: 20px;
    right: 20px;
    box-shadow: none;
}
.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;
    }
    .gallery-grid {
        columns: 1;
    }
    .drpepper, .title, .squid, .squid-adopt, .tentacles {
        display: none;
    }
}