/* 𝕊𝕋𝕐𝕃𝕀ℕ𝔾 */
/* woo-hoo~! */

html {
font-size: 12px; /* 𝒟𝑒𝒻𝒶𝓊𝓁𝓉 𝒷𝒶𝓈𝑒 𝒻𝑜𝓃𝓉 𝓈𝒾𝓏𝑒 */
}

/* 𝕃𝔸ℝ𝔾𝔼 𝕊ℂℝ𝔼𝔼ℕ𝕊 */
@media (min-width: 1200px) {
html {
font-size: 14px;
}
}

/* 𝕊𝕄𝔸𝕃𝕃 𝕊ℂℝ𝔼𝔼ℕ𝕊 */
@media (max-width: 600px) {
html {
font-size: 10px;
}
}

@font-face {
font-family: 'Civette';
src: url('fonts/Civette-Regular.otf') format('opentype');
font-weight: normal;
font-style: normal;
}

html, body {
height: 100%; /* Ensure the body and html take up the full viewport height */
overflow: hidden; /* Disable scrolling */
margin: 0;
padding: 0;
}

body {
color: black;
font-family: 'Civette', serif;
margin: 0;
padding: 0;
background-image: url('bgs/AD0923_COHEN_5 20copy.jpg');
background-size: cover;
background-position: center;
background-attachment: fixed;
background-repeat: no-repeat;
margin: 0;
padding: 0;
}

/* 𝕍𝕀𝔾ℕ𝔼𝕋𝕋𝔼 𝔼𝔽𝔽𝔼ℂ𝕋 */
body::after {
content: '';
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
overflow: hidden;
width: 100vw;
height: 100vh;
pointer-events: none; /* So it doesn't block clicks */
z-index: -1;
background: 
linear-gradient(
to bottom, 
rgba(0, 0, 0, 0) 60%, 
rgba(0, 0, 0, 1) 100%
),
radial-gradient(
ellipse at top center,
rgba(0, 0, 0, 0) 35%,
rgba(0, 0, 0, 1) 100%
);
} 

a {
color: gainsboro;
text-decoration: none;
}

a:hover {
text-decoration: underline;
}

/* 𝕎ℝ𝔸ℙℙ𝔼ℝ */
#wrapper {
width: 65%;
height: auto;
max-height: 100%;
margin: 0 auto;
padding: 20px;
background-color: transparent;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

/* ℍ𝔼𝔸𝔻𝔼ℝ */
header {
text-align: left;
box-sizing: border-box;
padding: 20px 20px;
width: 100%;
background-color: transparent;
margin-bottom: 20px;
position: relative;
}

header h1 {
font-size: 2em;
font-family: 'Civette', serif;
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; 
/* letter-spacing: 0.8px; */
display: inline-block;
line-height: 2.8;
}

.typewriter {
font-size: 2em;
font-family: 'Civette', serif;
color: white;
/* margin-top: 10px; */
overflow: hidden;
border-right: 0.5em dotted white; /* The typewriter cursor */
white-space: nowrap;
animation: 
typing 3.5s steps(40, end),
blink-caret .5s step-end infinite;
}

/* The typing effect */
@keyframes typing {
from { width: 0 }
to { width: 100% }
}

/* The typewriter cursor effect */
@keyframes blink-caret {
from, to { border-color: transparent }
50% { border-color: white; }
}

/* 𝔾ℝ𝕀𝔻 𝕊𝔼ℂ𝕋𝕀𝕆ℕ */
.grid-container {
display: grid;
place-items: center;
grid-template-columns: auto auto auto;
gap: 20px;
background-color: transparent;
padding: 20px;
margin-bottom: 20px;
width: 100%;
}

.grid-container h1 {
font-size: 2.1em;
font-family: 'Civette', serif;
color: black;
text-shadow: 1px 1px 0px white, 2px 2px 0px aliceblue;
}

.grid-container > div {
background-color: snow;
text-align: center;
padding: 20px 20px;
font-size: 1.2em;
color: black;
font-family: 'Civette', serif;
width: 100%;
}

.item1 {
grid-column-start: 2;
grid-column-end: 3;
grid-row-start: 1;
grid-row-end: 2;
}

.item2 {
grid-column-start: 2;
grid-column-end: 3;
grid-row-start: 2;
grid-row-end: 3;
}

.item3 {
grid-column-start: 2;
grid-column-end: 3;
grid-row-start: 3;
grid-row-end: 4;
}

.item4 {
grid-column-start: 2;
grid-column-end: 3;
grid-row-start: 4;
grid-row-end: 5;
}

.item5 {
grid-column-start: 2;
grid-column-end: 3;
grid-row-start: 5;
grid-row-end: 6;
}

/* 𝔽𝕆𝕆𝕋𝔼ℝ */
footer {
text-align: center;
padding: 5px;
background-color: black;
border-top: 3px solid #efdbda;
font-size: 0.8em;
letter-spacing: 5px;
color: white;
}

footer a {
color: #efdbda;
font-weight: bold;
}

footer a:hover {
color: aliceblue;
}

/* 𝒜𝒹𝒹 𝓉𝒽𝒾𝓈 𝓉𝑜 𝑒𝓃𝓈𝓊𝓇𝑒 𝓉𝒽𝑒 𝒻𝑜𝑜𝓉𝑒𝓇 𝒾𝓈 𝒶𝓉 𝓉𝒽𝑒 𝒷𝑜𝓉𝓉𝑜𝓂 */
#footer {
clear: both;
position: relative;
}

.pulse-text {
animation: pulse 0.5s infinite alternate;
}
              
@keyframes pulse {
0% { opacity: 1; }
100% { opacity: 0.5; }
}