/* STYLING */

html {
font-size: 12px; /* 𝒟𝑒𝒻𝒶𝓊𝓁𝓉 𝒷𝒶𝓈𝑒 𝒻𝑜𝓃𝓉 𝓈𝒾𝓏𝑒 */
overflow: hidden;
}
  
/* LARGE SCREENS */
@media (min-width: 1200px) {
html {
font-size: 14px;
}
}
  
@font-face {
font-family: 'Unifont';
src: url('font/unifont-17.0.03.otf') format('opentype');
font-weight: normal;
font-style: normal;
}

/*
@font-face {
font-family: 'Unifont';
src: url('font/unifont-17.0.03.otf') format('opentype');
font-weight: normal;
font-style: italic;
}
*/

body {
color: black;
font-family: 'Unifont';
margin: 0;
padding: 0;
background-color: aliceblue;
background-image: url('graphics/mh_reconstruction56.jpg');
background-size: cover;
background-position: center;
background-attachment: fixed;
background-repeat: no-repeat;
}

a {
display: inline-block;
color: pink;
text-decoration: none;
font-family: 'Unifont';
}

a:hover {
color: aliceblue;
}

/* HEADER */
header {
text-align: center;
box-sizing: border-box;
padding: 5px 0;
width: 100%;
background-color: transparent;
border-bottom: 3px solid transparent;
margin-bottom: 5px;
position: relative;
}

header h1 {
font-size: 3.5em;
font-family: 'Unifont';
color: white;
text-shadow:
-2px -2px 0 black,
2px -2px 0 black,
-2px 2px 0 black,
2px 2px 0 black,
0 -2px 0 black,
0 2px 0 black,
-2px 0 0 black,
2px 0 0 black; 
margin: 0;
padding: 10px;
letter-spacing: 10px;
display: inline-block;
}

header p {
font-size: 2em;
font-family: 'Unifont';
color: black;
text-shadow:
-2px -2px 0 pink,
2px -2px 0 pink,
-2px 2px 0 pink,
2px 2px 0 pink,
0 -2px 0 pink,
0 2px 0 pink,
-2px 0 0 pink,
2px 0 0 pink;
letter-spacing: 10px;
margin-top: 10px;
}

/* INTRO GRID SECTION */
.intro-container {
background-color: black;
padding: 20px 20px;
margin-top: 20px;
margin-right: auto;
margin-bottom: 20px;
margin-left: auto;
font-size: 1.2em;
color: white;
font-family: 'Unifont';
box-sizing: border-box;
overflow-y: auto;
overflow-x: hidden;
max-height: 50vh;
max-width: 25vw;
position: relative;
}

.intro-container h1 {
font-size: 2.1em;
font-family: 'Unifont';
color: black;
}

.intro-container p {
font-family: 'Unifont';
text-align: center;
color: pink;
}

.intro-container p:hover {
color: aliceblue;
}

.centering {
text-align: center;
}

.intro-container ul {
font-family: 'Unifont';
text-align: center;
list-style: square;
list-style-position: inside;
color: pink;
padding: 0;
margin: 0;
}

.intro-container ul:hover {
color: red;
}

.intro-container a {
font-family: 'Unifont';
text-align: center;
padding: 10px 10px;
background-color: pink;
border-radius: 5%;
color: black;
}

.intro-container a:hover {
background-color: aliceblue;
color: black;
}

/* GRID SECTION */
.grid-container {
background-color: black;
padding: 20px 20px;
margin-top: 20px;
margin-right: auto;
margin-bottom: 20px;
margin-left: auto;
font-size: 1.2em;
color: white;
font-family: 'Unifont';
box-sizing: border-box;
overflow-y: auto;
max-height: 65vh;
max-width: 39vw;
position: relative;
}

.grid-container h1 {
font-size: 2.1em;
font-family: 'Unifont';
color: black;
}

.hide {
display: none;
}

/* CONTENT WARNING FOOTER */
.cw-footer {
text-align: center;
padding: 5px;
background-color: black;
border-top: 3px solid pink;
font-size: 0.8em;
letter-spacing: 5px;
color: white;
}

/* CAUTION FOOTER */
.caution-footer {
text-align: center;
font-size: 0.8em;
letter-spacing: 5px;
padding: 5px;
background-color: black;
color: white;
}

/* TAGS FOOTER */
.tags-footer {
position: absolute;
bottom: 0px;
width: 100%;
overflow: hidden;
text-align: center;
padding: 10px;
background-color: black;
border-bottom: 3px solid pink;
color: white;
}

.tags {
background-color: transparent;
z-index: 2;
}

button {
padding: 5px 5px;
background-color: black;
border: 2px solid pink;
color: pink;
text-decoration: none;
font-family: 'Unifont';
font-size: 14px;
}

button:hover {
background-color: aliceblue;
color: black;
text-decoration: line-through;
}

button:active, button:visited, button:focus, button:target {
background-color: black;
color: pink;
text-decoration: line-through;
}
  
article {
margin-bottom: 40px;
}

article h2 {
font-size: 24px;
color: white;
margin-bottom: 5px;
background-color: gray;
padding: 5px 10px;
width: 95%;
display: inline-block;
}

.post-info {
font-size: 14px;
color: pink;
margin-bottom: 10px;
}

.jirai {
background-color: transparent;
}

.sa {
background-color: transparent;
}

.mysophobia {
background-color: transparent;
}

.hikikomori {
background-color: transparent;
}

.sui {
background-color: transparent;
}

.ocd {
background-color: transparent;
}

.asexual {
background-color: transparent;
}

.yugioh {
background-color: transparent;
}

.pgr {
background-color: transparent;
}

.nso {
background-color: transparent;
}

.music {
background-color: transparent;
}

.aesthetic {
background-color: transparent;
}

.sketchbook {
background-color: transparent;
}

.notebook {
background-color: transparent;
}

.library {
background-color: transparent;
}

.writing {
background-color: transparent;
}

.makeup {
background-color: transparent;
}

.food {
background-color: transparent;
}

.meme {
background-color: transparent;
}

img {
width: 75%;
display: block;
margin: auto;
margin-bottom: 20px;
}

.grid {
display: grid;
grid-template-columns: auto auto auto;
}

.grid div {
column-gap: 0px;
margin: 0px;
padding: 0px;
}

iframe {
width: 75%;
display: block;
margin: auto;
margin-bottom: 20px;
}

.spoiler-text {
filter: blur(4px);
transition: filter 0.3s ease-in-out;
user-select: none;
cursor: default;
}

.spoiler-text:hover,
.spoiler-text:focus {
filter: blur(0);
}

.spoiler-image img {
filter: blur(20px);
transition: filter 0.3s ease-in-out;
user-select: none;
cursor: default;
}

.spoiler-image img:hover {
filter: none;
}

.archive-link {
text-align: center;
align-content: center;
}

.archive-link a {
font-family: 'Unifont';
text-align: center;
padding: 30px 25px;
background-color: black;
border: 2px solid pink;
border-radius: 50%;
color: pink;
}

.archive-link a:hover {
border: 2px solid aliceblue;
color: aliceblue;
}

/* FLIP FLOPPED FOOTER */
footer {
text-align: center;
padding: 5px;
background-color: black;
border-top: 3px solid pink;
font-size: 0.8em;
letter-spacing: 5px;
color: white;
}
  
footer a {
color: pink;
font-weight: bold;
}
  
footer a:hover {
color: aliceblue;
}
  
#footer {
clear: both;
position: relative;
}

.overlay-marquee {
position: absolute;
top: 2%;
left: 50%;
transform: translate(-50%, -50%);
width: 100%;
text-align: center;
padding: 5px;
background-color: transparent;
font-size: 0.8em;
letter-spacing: 5px;
color: pink;
}
  
.pulse-text {
animation: pulse 0.5s infinite alternate;
}
                
@keyframes pulse {
0% { opacity: 1; }
100% { opacity: 0.5; }
}  

/* SMALL SCREENS */
@media (max-width: 600px) {
html {
font-size: 10px;
}

.grid-container {
padding: 20px 20px;
max-height: 75vh;
max-width: 75vw;
}

.spoiler-text {
cursor: pointer;
}

}