/*
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
                       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=IBM+Plex+Mono:ital,wght@0,400;1,400;1,600&display=swap');

:root {
    --background-color: #f7f6fd;
    --shadow: #ca6d949f;
    --text-color: #202022;
    --link-color: #b85c82;
    --border: #659597;
    --black: #000;
    --white: #fff;
}


/* MAIN */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
html {
    scroll-behavior: smooth;
}
body {
    font-family: "IBM Plex Mono", monospace;
    font-weight: 400;
    color: var(--text-color);
    background-color: var(--background-color);
    background: url("assets/water-bg.png");
    background-attachment: fixed;
    image-rendering: pixelated;
}


/* CONTAINERS */
#container {
    max-width: 1000px;
    margin: 0 auto;
}
main,
header,
footer {
    background: var(--background-color);
    border: 2px solid var(--border);
    box-shadow: 6px 6px 0px var(--shadow);
}
header,
footer {
    text-align: center;
    padding: 10px;
}
header {
    margin: 30px 0 0px 0;
}
.blog-title {
    font-size: 2.5em;
    font-weight: 600;
    font-style: italic;
    margin: 20px;
}
main {
    margin: 10px 0 10px;
    padding: 18px  30px 40px 30px;
}
main img {
    max-width: 100%;
    height: auto;
}

.center {
	display: block;
	margin: 0 auto;
    text-align: center;
}
.img-border {
    border: 1px solid var(--border);
}



/* TEXT STYLES */
p {
    display: block;
    margin-top: 1em;
    margin-bottom: 1em;
    line-height: 1.3em;
}
mark {
    background: var(--cyan);
    text-shadow: none;
}
p::selection,
li::selection {
    color: var(--white);
    background-color: var(--border);
}
main ul {
    list-style-type: square;
    padding-left: 30px;
}
main ol {
    padding-left: 30px;
}
main ul li,
main ol li {
    padding: 10px 0 0 10px;
}


/* HEADERS */
h1,
h2,
h3,
h4 {
    font-weight: 600;
    font-style: italic;
    margin: 1rem 0;
}
h1 {
	text-align: center;
}

hr {
	border: 1px solid var(--shadow);
	margin: 40px auto;
	width: 90%;
}
hr.bubbles {
    height: 41px;
    width: 60%;
    background: url("assets/bubbles2.png") repeat-x;
    border: 0;
    margin: 20px auto;
}



/* NAVIGATION */
nav {
    padding: 10px;
}
nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
nav li {
    display: inline;
}
nav a,
nav a:visited {
    text-decoration: none;
    color: white;
    background-color: var(--shadow);
    padding: 4px;
}
nav a:hover,
nav a:focus {
    color: #FFFFFF;
    position: relative;
    left: 2px;
    top: 2px;
}



/* LINKS */
a,
a:visited {
	cursor: pointer;
	color: var(--link-color);
    text-decoration: underline;
    text-underline-offset: 2px;
}
a:hover {
    color: var(--border);
    text-decoration-style: wavy;
    text-underline-offset: 2px;
}
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:hover,
.fake-button:hover {
    position: relative;
    top: 1px;
    left: 1px;
    box-shadow: none;
}


/* IMAGES */
img {
    image-rendering: auto;
}

/* MISC - GRID */
.grid {
    max-width: 100%;
    margin: 30px auto 0px auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
.grid-item {
    max-width: 400px;
    flex: 1 1 300px;
    padding: 10px;
}
figure {
    padding: 0;
    margin: 0;
}
figure img {
    display: block;
    max-width: 100%;
    margin: 0 auto;
}
figure.one img {
    max-width: 70%;
}
figure.one {
    margin: 35px 0 20px 0;
}
figure a img {
    border: 2px solid var(--link-color);
}
figure a img:hover {
    border: 2px solid var(--border);
}
figcaption {
    display: block;
    padding: 10px 0;
    text-align: center;
    font-style: italic;
    font-size: 0.9rem;
}


/* DETAILS */
details.dreams {
    padding: 10px;
    margin: 10px auto;
    width: 90%;
    border: 1px solid var(--border);
    box-shadow: 3px 3px var(--shadow);
}
details.dreams > summary {
    font-weight: 600;
    font-style: italic;
    cursor: pointer;
}
details.dreams > summary:hover {
    color: var(--border);
}
details.dreams[open] > summary {
    color: var(--border);
}




@media screen and (max-width: 600px) {
    #container, #container-home {
        margin-top: 10px;
    }
    main, nav {   
        flex-direction: column;
    }
    figure.one img {
    max-width: 90%;
    }
    details.dreams {
        width: 100%;
    }
}