/* psychopomp font */
@font-face {
    font-family: 'PsychopompFont';
    src: url('DBStylez.ttf') format('truetype');
}

body {
    color: #fff7d5;
    margin: 0;
    font-family: 'PsychopompFont', Arial, sans-serif;
    background-image: url(resources/textures/PompBg.png);
    background-attachment: fixed;
    background-repeat: repeat;
    background-color: black;
    display: flex;
    flex-direction: column;
    height: 100vh;
    cursor: url(resources/icons/Pointer.png), auto;
}

/* layout */
.layout {
    display: flex;
    flex: 1;
    overflow: hidden;
}

/* sidebar */
.sidebar {
    width: 200px;
    background: black; /* Dark gray */
    padding: 20px;
    box-shadow: 2px 0 5px rgba(0, 0, 0, 0.5);
    border: inset;
    border-color: #C5AD34;
    flex-shrink: 0;
    overflow-y: auto;
}

.sidebar h2 {
    margin-bottom: 20px;
    color: #8ab6d6; /* Muted blue */
    font-size: 1.5rem;
}

.sidebar h3 {
    margin-top: 20px;
    color: #8ab6d6; /* Muted blue */
    font-size: 1.2rem;
}

.sidebar ul {
    list-style: none;
    padding: 0;
}

.sidebar ul li {
    margin: 5px 0;
}

.sidebar ul li a {
    text-decoration: none;
    color: #9dbdcf; /* Subtle blue */
    font-size: 1rem;
}

.sidebar ul li a:hover {
    text-decoration: underline;
    color: #cfdce5; /* Soft gray-blue */
}

/* breadcrumb */
.breadcrumb {
    width: 100%;
    max-width: 800px;
    margin-left: 30px;
    padding-left: 0;
    color: #9dbdcf;
    font-family: 'PsychopompFont', Arial, sans-serif;
}

.breadcrumb a {
    color: #C5AD34;
    text-decoration: none;
}

.breadcrumb a:hover {
    text-decoration: underline;
    color: #fff;
}

.breadcrumb span {
    margin: 0 5px;
    color: #555;
}

/* main area */
main {
    flex: 1;
    overflow-y: auto;
}

a {
    cursor: url(resources/icons/Touch.png), pointer;
    color: #fde457;
}

.header {
    text-align: center;
    margin-bottom: 30px;
}

.animgear {
    animation: GearRot 3s infinite ease-in-out alternate; 
}

/* animation for gear */

@keyframes GearRot{
    0% { transform: rotate(0deg)}
    100% { transform: rotate(360deg)}
}

/* wavy text settings */

.wavy {
    position: relative;
    text-align: center;
    color: #8ab6d6;
    font-size: 18px;
}

.wavy span{
    position: relative;
    display: inline-block;
    animation: TextWave 2s ease-in-out infinite;
    animation-delay: calc(0.1s * var(--i));
}

/* animation for wavy text */

@keyframes TextWave{
    
    0% { transform: translateY(0.01px); }
    20% { transform: translateY(-5px); }
    50% { transform: translateY(0.01px); }
    
} 

.header h1 {
    font-size: 2.5rem;
    color: #8ab6d6; /* Muted blue */
    margin: 0;
}

.header p {
    font-size: 1.2rem;
    color: #9dbdcf; /* Subtle blue */
}

section {
    margin-bottom: 30px;
    padding: 40px;
}

/* custom markdown notes */
.custom-note {
    padding: 10px 15px;
    padding-left: 50px;
    margin: 15px 0;
    border-radius: 5;
    font-size: 1rem;
    line-height: 1.5;
    font-family: 'PsychopompFont', Arial, sans-serif;
}

.note-info {
    
    background-color: #2b2b2b; /* Darker gray */
    border-left: 5px solid #607a96; /* Muted blue-gray */
    color: #c2cbd2; /* Soft gray */
}

.note-warning {
    background-color: #2f2727; /* Dark muted red */
    border-left: 5px solid #b27f7f; /* Muted brown-red */
    color: #d6c9c9; /* Lightened muted red */
}

.note-error {
    background-color: #2b2323; /* Darker muted red */
    border-left: 5px solid #a24d4d; /* Rusty red */
    color: #dbc4c4; /* Softer pink-gray */
}

.PompHouse {
    overflow: clip;
    position: absolute;
    justify-content: center;
    transform-origin: left;
    animation: MiniPompy 1.2s infinite ease-out;
}

@keyframes MiniPompy{
    0% { transform: rotate(-15deg); }
    30% { transform: rotate(15deg); }
    70% { transform: rotate(15deg); }
    100% { transform: rotate(-15deg); }
}

/* Footer */
footer {
    text-align: center;
    padding: 2px;
    background: black;
    border-top: 2px solid #555;
    color: #9dbdcf; 
    font-size: 0.9rem;
    border: solid 3px #C5AD34;
    font-family: 'PsychopompFont', Arial, sans-serif;
    cursor: url(resources/icons/Pointer.png), auto;
    line-height: 0.2;
}

footer a {
    color: #C5AD34; 
    text-decoration: none;
}

footer a:hover {
    text-decoration: underline;
    color: #fff;
}

footer p:nth-of-type(2) {
    font-size: 0.8rem;
    opacity: 0.8;
}