body{
    margin:0;
    background:#000;
    color:#f5d76e;
    font-family:"Times New Roman",serif;
}

/* ===========================
   HEADER
=========================== */

header{
    padding:18px 24px;
    border-bottom:3px dotted #c62828;
    position:relative;
}

.lang a{
    text-decoration:none;
    margin-right:18px;
}

.logo{
    position:absolute;
    top:18px;
    right:24px;
    width:90px;
}

.contact{
    position:absolute;
    top:118px;
    right:24px;
    color:#fff;
    text-decoration:none;
}

.subtitle{
    color:#fff;
    font-style:italic;
    font-size:1.35rem;
    margin-bottom:12px;
}
.document-link {
    text-align: center;
    margin: 24px 0;
}

.document-link a {
    color: #ffffff;
    font-size: 1.15rem;
    font-style: italic;
    text-decoration: none;
}

.document-link a:hover {
    color: #ff4444;
}

h1{
    color:#f5d76e;
    font-size:3.2rem;
    font-weight:normal;
    margin-bottom:8px;
}

.title-translations{
    margin-top:6px;
    margin-bottom:12px;
    text-align:left;
    font-size:1.05rem;
    font-style:italic;
}

/* ===========================
   MAIN MENU
=========================== */

.main a{
    color:#ffd84d;
    text-decoration:none;
    margin-right:24px;
    font-weight:bold;
    text-transform:uppercase;
    letter-spacing:1px;
}

.main a:hover{
    text-decoration:underline;
}

.main .active{
    color:#c62828;
    text-decoration:underline;
    text-decoration-style:double;
}

/* ===========================
   SUBMENU
=========================== */

.submenu-label{
    margin:4px 0 4px;
    color:#888;
    font-size:0.95rem;
    font-weight:bold;
    text-transform:uppercase;
}

.sub{
    display:flex;
    justify-content:center;
    align-items:center;
    flex-wrap:wrap;
    gap:18px;
    margin-top:2px;
    margin-bottom:10px;
}

.sub a{
    color:#fff;
    text-decoration:none;
    font-size:1.22rem;
    font-weight:bold;
    text-transform:none;
    letter-spacing:0.3px;
    transition:color .2s;
}

.sub a:hover{
    color:#3fa9ff;
}

.sub a.active{
    color:#c62828;
    text-decoration:underline;
}

/* ===========================
   QUICK ACCESS
=========================== */

.quick-access{
    text-align:center;
    font-size:1.3rem;
    margin:6px 0 10px;
}

.quick-access a{
    color:#fff;
    text-decoration:none;
    font-weight:bold;
    margin:0 8px;
}

.quick-access a:hover{
    color:#3fa9ff;
}
/* ===========================
   MAIN CONTENT
=========================== */

main{
    width:89%;
    margin:60px auto;
    line-height:1.7;
}
main {
    text-align: left;
}
.article-section{
    text-align:left;
}
main h2{
    color:#ffd84d;
    text-align:center;
    text-transform:uppercase;
    text-decoration:underline;
    margin-top:80px;
    margin-bottom:35px;
}

main h3{
    color:#3fa9ff;
    text-align:center;
    text-decoration:underline;
    font-size:1.7rem;
    margin-top:50px;
    margin-bottom:25px;
}

main h4{
    color:#3fa9ff;
    margin-top:35px;
    margin-bottom:15px;
}

main p,
main li{
    color:#fff;
    font-size:1.18rem;
    line-height:1.7;
}

/* ===========================
   SPECIAL TITLES
=========================== */

.special-title{
    color:#fff;
    font-family:"Times New Roman",serif;
    font-style:italic;
    font-size:2rem;
    text-align:center;
    text-transform:none;
    text-decoration:none;
    margin-top:70px;
    margin-bottom:40px;
}
.text-link{
    color:#3fa9ff;
    text-decoration:none;
}

.text-link:hover{
    color:#ff4444;
    text-decoration:underline;
}

.text-link:active{
    color:#3fa9ff;
}

.title-link:hover{
    color:#ff4444;
}

.title-link:active{
    color:#3fa9ff;
}
main a{
    color:#3fa9ff;
    text-decoration:none;
}

main a:hover{
    color:#c62828;
    text-decoration:underline;
}

main a:visited{
    color:#3fa9ff;
}
/* ===========================
   CRYSTAL RUNES
=========================== */
.crystal-rune{
    color:#c62828;
    font-family:"Times New Roman",serif;
    font-size:2.6rem;
    text-align:center;
    line-height:1.2;
    margin:50px 0 35px;
    letter-spacing:0.04em;
}
/* ===========================
   SECTION TITLES
=========================== */

.projects-title{
    color:#ffd84d;
    text-align:center;
    text-transform:uppercase;
    text-decoration:underline;
    font-size:2.2rem;
    margin-top:80px;
    margin-bottom:50px;
}

.project-link{
    display:block;
    text-align:center;
    color:#3fa9ff;
    font-family:"Times New Roman",serif;
    font-size:2rem;
    font-weight:bold;
    text-decoration:none;
    margin:25px 0;
}

.project-link:hover{
    text-decoration:underline;
}

.project-description{
    width:70%;
    margin:0 auto;
    color:#fff;
    text-align:left;
    line-height:1.7;
    font-size:1.1rem;
}
.epsilon {
    font-size: 1.18em;
    letter-spacing: -0.03em;
    vertical-align: 0em;
}

/* Introductory quotation above page content */
main .hero-sentence {
    margin: 30px 0 30px 12%;
    color: #ffffff;
    font-size: 1.15rem;
    font-style: italic;
    line-height: 1.5;
    text-align: left;
}
/* ===========================
   HERO IMAGES
=========================== */

.hero-container{
    text-align:center;
    margin-top:60px;
    margin-bottom:50px;
}

.hero{
    display:block;
    margin:0 auto;
    height:auto;
    border:3px solid #555;
}

.hero-small{
    width:33%;
}

.hero-medium{
    width:45%;
}

.hero-large{
    width:66%
}

.hero-full{
    width:83%;
}

.photo-credit{
    margin:10px auto 0;
    text-align:center;
    color:#aaa;
    font-size:.9rem;
    font-style:italic;
}

/* ===========================
   FOOTER
=========================== */
footer{
    text-align:center;
    padding:40px;
    margin-top:60px;
    border-top:3px dotted #c62828;
    color:#ddd;
}

.footer-home{
    display:block;
    margin-bottom:18px;
    color:#ffd84d;
    text-decoration:none;
    font-size:1.1rem;
    font-weight:bold;
}

.footer-home:hover{
    color:#3fa9ff;
}

.footer-home:active{
    color:#c62828;
}

.footer-email{
    display:block;
    margin-top:18px;
    color:#3fa9ff;
    text-decoration:none;
    font-size:1rem;
}

.footer-email:hover{
    color:#c62828;
}

.footer-email:active{
    color:#c62828;
}

footer img{
    width:70px;
    margin-bottom:12px;
}

/* ==========================================================
   CRYSTAL / RESEARCH PAGES
   Shared visual language for Crystal Basic and Research
========================================================== */

.crystal-page{
    max-width:900px;
    margin:0 auto;
    padding:40px 20px 80px;
}


/* ===========================
   LANGUAGE NAVIGATION
=========================== */

.crystal-page .lang{
    text-align:center;
    margin-bottom:20px;
    font-size:0.95rem;
}

.crystal-page .lang a{
    margin:0 15px;
    text-decoration:none;
}


/* ===========================
   MAIN TITLE
=========================== */

.crystal-page .crystal-title{
    text-align:center;
    margin-bottom:35px;
}

.crystal-page .crystal-title h1{
    margin:0;
    font-size:2.5rem;
    letter-spacing:2px;
}


/* ===========================
   PAGE NAVIGATION
=========================== */

.crystal-page .navigation{
    text-align:center;
    margin-bottom:45px;
}

.crystal-page .navigation a{
    display:inline-block;
    margin:6px 12px;
    padding:8px 18px;
    text-decoration:none;
    border:1px solid #999;
}


/* ===========================
   SECTIONS
=========================== */

.crystal-page section{
    margin-bottom:60px;
}

.crystal-page section h2{
    text-align:center;
    margin-bottom:30px;
}

.crystal-page section h3{
    scroll-margin-top:30px;
}


/* ===========================
   ARTICLES
=========================== */

.crystal-page .article{
    margin-bottom:28px;
}

.crystal-page .article h3{
    margin-bottom:10px;
}


/* ===========================
   DECLARATIONS / CENTRAL TEXT
=========================== */

.crystal-page .declaration{
    text-align:center;
    line-height:1.8;
}


/* ===========================
   CRYSTAL RUNES
=========================== */

.crystal-page .crystal-rune{
    display:block;
    width:100%;
    color:red;
    font-family:"Times New Roman",serif;
    font-size:2.8rem;
    font-style:normal;
    font-weight:normal;
    text-align:center;
    line-height:1.2;
    letter-spacing:0.06em;
    margin:25px auto;
}


/* ===========================
   IMPORTANT TERMS
=========================== */

.crystal-page section p strong{
    color:#ffd700;
}


/* ===========================
   CRYSTAL FORMULAS / SETS
=========================== */

.crystal-page .crystal-formula{
    text-align:center;
    font-family:"Times New Roman",serif;
    font-size:1.25rem;
    line-height:1.8;
    margin:28px auto;
}


/* ===========================
   TIME-SPACE CRYSTAL BASIC
=========================== */

.crystal-page .crystal-alphabet{
    margin:45px auto;
    text-align:center;
}

.crystal-page .crystal-alphabet h3{
    margin-bottom:30px;
    font-size:1.5rem;
}


/* ===========================
   64-CODON FRAME
=========================== */

.crystal-page .codon-frame{
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    gap:35px;
    max-width:700px;
    margin:35px auto;
    padding:30px;
    border:1px solid #999;
    font-family:"Times New Roman",serif;
    font-size:1.15rem;
    line-height:1.7;
}

.crystal-page .codon-column{
    text-align:center;
}


/* ===========================
   NOTES / Q-NOTES
=========================== */

.crystal-page .crystal-note,
.crystal-page .q-note{
    max-width:720px;
    margin:25px auto;
    font-size:0.95rem;
    line-height:1.6;
    text-align:left;
}

.crystal-page .q-note{
    font-style:italic;
}


/* ===========================
   EXAMPLES
=========================== */

.crystal-page .crystal-example{
    max-width:720px;
    margin:30px auto;
    padding:20px 25px;
    border:1px solid #999;
    text-align:center;
    font-family:"Times New Roman",serif;
    line-height:1.8;
}


/* ===========================
   ANCHORED HEADINGS
=========================== */

.crystal-page h1[id],
.crystal-page h2[id],
.crystal-page h3[id],
.crystal-page h4[id]{
    scroll-margin-top:30px;
}


/* ===========================
   MOBILE
=========================== */

@media (max-width:700px){

    .crystal-page{
        padding:30px 15px 60px;
    }

    .crystal-page .crystal-title h1{
        font-size:2rem;
    }

    .crystal-page .codon-frame{
        grid-template-columns:repeat(2, 1fr);
        gap:25px;
        padding:20px;
    }
}

@media (max-width:420px){

    .crystal-page .codon-frame{
        grid-template-columns:1fr;
    }

    .crystal-page .navigation a{
        margin:5px;
        padding:7px 12px;
    }
}