@font-face {
    font-family: 'Epson';
    src: url('assets/EPSON-FUTO-MINCHO.eot');
    src: url('assets/EPSON-FUTO-MINCHO.woff') format('woff'),
         url('assets/epminbld.ttf') format('truetype'), 
         url('assets/EPSON-FUTO-MINCHO.svg#EPSON-FUTO-MINCHO') format('svg'); 
}

body {
    margin: 0px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: white;
    width: 100%;
    height: 100vh;
}

.grid {
    display: grid;
    width: 90%;
    height: 90%;
    grid-template-columns: 15% 5% 60% 5% 15%;
}

.column1 {
    display: grid;
    grid-column: 1;
    grid-template-rows: 20% 80%;
}

.column2 {
    display: grid;
    grid-column: 3;
    grid-template-rows: 20% 60% 20%;
}

.column3 {
    display: grid;
    grid-column: 5;
    grid-template-rows: 80% 20%;
}

.bonapos {
    grid-row: 1;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* .fidepos left unchanged as requested */
.fidepos {
    grid-row: 2;
    display: flex;
    justify-content: center;
    align-items: center;
}

.quotepos {
    grid-row: 2;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}

h1 {
    font-family: 'Epson';
    font-size: 100px;
    letter-spacing: 2px;
    margin-bottom: 0px;
}

h3 {
    margin-top: 0px;
    margin-bottom: 0px;
    width: 50px;
}

ul {
    list-style: none;
    background: white;
    padding-left: 0px;
    margin: 0;
}

ul li {
    display: inline-block;
    position: relative;
}

ul li a {
    display: block;
    font-family: 'Epson';
    padding: 20px 25px;
    color: inherit;
    text-decoration: none;
    text-align: left;
    font-size: 30px;
    cursor: pointer; /* make it obvious links are interactive */
}

/* small improvement so header hover still visible but non-invasive */
.dropdown-header {
    cursor: pointer;
    transition: color 0.3s ease;
}

.dropdown-header:hover {
    color: #808080;
}

.fide-text {
    cursor: pointer;
    transition: color 0.3s ease;
}

.fide-text:hover {
    color: #808080;
}

/* Dropdown styles — minor fixes and accessibility behavior added:
   - add :hover and :focus-within to open dropdown reliably
   - ensure dropdown visual is readable and has min-width
   - fixed missing semicolon after box-shadow
*/
ul li ul.dropdown-themes {
    width: 100%;
    position: absolute; 
    z-index: 999;
    display: none;
    background-color: inherit;
    color: inherit;
    padding: 8px 0;
    box-shadow: 0 6px 18px rgba(0,0,0,0.15);
    border-radius: 6px;
    min-width: 180px;
    /* avoid the dropdown inheriting layout quirks from inline parent */
    left: 0;
}

/* show dropdown on hover and when focused (keyboard users) */
ul li:hover > ul.dropdown-themes,
ul li:focus-within > ul.dropdown-themes {
    display: block;
}

ul li ul.dropdown-themes li {
    display: block;
}

ul li ul.dropdown-themes li a {
    display: block;
    padding: 10px 20px;
    color: inherit;
    background: transparent;
    white-space: nowrap; /* keep theme names on one line */
    font-size: 24px;     /* slightly smaller than main links so it reads as a submenu */
}

/* make dropdown items visibly interactive */
ul li ul.dropdown-themes li a:hover,
ul li ul.dropdown-themes li a:focus {
    filter: brightness(0.9);
    text-decoration: underline;
    outline: none;
    background-color: rgba(255,255,255,0.03); /* subtle hover 'sheet' that still inherits theme */
}

/* Theme classes (unchanged except keep them global so body/class-based theming works) */
.batman-theme {
    color: yellow;
    background-color: black;
}

.deepblue-theme {
    color: #4779c4;
    background-color: #2c456b;
}

.cyberpunk-theme {
    color: #00ffec;
    background-color: #fd00f2;	
}

.matrix-theme {
    color: #00ff2b;
    background-color: black;
}

@keyframes fade-in {
    0%{ opacity: 0;}
    100%{ opacity: 1;}
}

.fade-in {
    animation: fade-in 3s;
}