@font-face {
    font-family: 'Crédible';
    src: local('Crédible'),
    url("../Crédible-Regular.woff") format("woff");
}

:root {

    --bg-img        : url('../img/mushroom_bg.webp');
    --bg-color      : #3f4661; /* #ADB6DA */

    --main-bg       : black;
    --main-color    : white;

    --accent-color  : #D5A1C4;

    --pfp           : url('../img/Me.jpg');

	--font-size		: calc(1rem + (1vw / 5));
}

a {
    color: var(--accent-color);
    cursor: pointer;
    text-decoration: none;
}
a:hover { color: var(--main-color); }
a::before { content: '— '; }
a::after { content: ' —'; }
a:hover::before { content: '♡ '; }
a:hover::after { content: ' ♡'; }

.bio a::before, .buttons a::before { content: ''; }
.bio a::after, .buttons a::after { content: ''; }

hr {
    border: none;
    border-bottom: dotted 1px var(--main-color);
    margin: 5px auto;
    width: 50%;
}

h1 {
    font-family: 'Crédible', sans-serif;
    font-size: calc(var(--font-size) + 1rem);
}

ul {
    padding: 0;
    list-style-type: none;
}

li {
    margin: 5px;
    min-height: 1.5em;
}

div#pfp {
    width: 200px;
    height: 200px;
    background: var(--pfp);
    background-size: 100%;
}
div#outline {
    width: 270px;
    height: 250px;
    background: var(--accent-color);
}

code {
    color: var(--accent-color);
    font-family: monospace;
}

footer img {
    width: 100%;
    image-rendering: pixelated;
}

#kissClown {
	width: 300px;
	max-width: 90%;
}

.buttons {
    display: grid;
	grid-template-columns: repeat( auto-fill, minmax(100px, 1fr) );
	align-items: center;
	justify-content: center;
    justify-items: center;
	grid-gap: .5em;
	margin: .5em;
}

/* -- */

body {
    background: var(--bg-img) var(--bg-color);
    background-attachment: fixed;
	background-size: 75%;
    text-align: center;
    color: var(--accent-color);
	margin: 1em 1em 0em;
	font-size: var(--font-size);
    padding: .5em;

	display: grid;
	grid-template-columns: 25% auto;
    grid-gap: .5em;
}

section, header div {
    display: block;
    margin: auto;

    background: var(--main-bg);
    color: var(--main-color);

    padding: 1em;
}

section {
	width: 95%;
	height: 95%;
}

header div {
	width: 80%;
	margin-top: 1em;
}

main {
    display: grid;
    justify-content: center;
    align-content: center;
    grid-auto-flow: dense;
    grid-template-columns: repeat( auto-fill, minmax(25%, 1fr) );
	grid-gap: 2em;
}

/* -- */

#statuscafe {
    padding: 5px;
    border: 1px solid var(--accent-color);
    width: 70%;
	margin: .5em auto;
	font-size: var(--font-size);
}
#statuscafe-username, #statuscafe-content {
    margin: 0 auto;
    width: 80%;
    padding: 0px;
}


/* -- Responsive Stuff -- */

@media all and (max-width: 1500px) {
    body {
        grid-template-columns: 40% auto;
    }
    main {
        grid-template-columns: repeat( auto-fill, minmax(350px, 1fr) );
    }
}

@media all and (max-width: 1200px) {
    body {
        grid-template-columns: 50% auto;
    }
}

@media all and (max-width: 800px) {
    body {
        grid-template-columns: 1fr;
    }
}

@media all and (max-width: 420px) {
    body {
        margin: 1em 0em 0em;
        padding: 0px;
    }
}

/*
@media all and (max-width: 420px ) {
    div#pfp {
        width: 150px;
        height: 150px;
    }
    div#outline {
        width: 220px;
        height: 200px;
    }
}
*/