@font-face {
    font-family: "Ferrum";
    src: url("/Portfolio-Arcane-Journey/assets/fonts/Ferrum.otf"), url("../assets/fonts/Ferrum.otf");
}
@font-face {
    font-family: "Modern Antiqua";
    src: url("/Portfolio-Arcane-Journey/assets/fonts/ModernAntiqua.ttf"), url("../assets/fonts/ModernAntiqua.ttf");
}

@media screen and (max-width: 1045px)
{
    .line-vertical
    {
        /* flex: 1; */
        height: 1px;
        width: 100% !important;
        margin: 0% !important;
        background-color: var(--col-gold-dark);
    }
}

/* Constants */
:root
{
    /* Colors */
    --col-bg: #F7EFE3;
    
    --col-gold-light: #FCE1B0;
    --col-gold-dark: #b8860b;
    --col-gold-shadow: #604505;

    --col-purple-light: #9962C4;
    --col-purple-dark: #37164D;
}

/* Page overrides */
html
{
    background-color: var(--col-bg);
    scroll-behavior: smooth;
}
body
{
    margin: 0px;
    padding: 0px;
    scrollbar-gutter: stable both-edges; 
}

h1, h2, h3, h4
{
    
    font-family: "Ferrum";
    font-weight: normal;
    color: var(--col-purple-dark)
}
h1
{
    /* font-size: 50px; */
    font-size: 45px;
}
h2
{
    font-size: 35px;
}
h3
{
    font-size: 25px;
}
h4
{
    font-size: 20px;
}

p, li
{
    font-family: "Modern Antiqua";
    font-weight: normal;
    font-size: 15px;
    color: var(--col-purple-dark);
}

a,
a:visited
{
    color: var(--col-purple-dark);
}
a:hover
{
    color: var(--col-purple-light);
}
a:active
{
    color: var(--col-gold-dark);
}


/* General */
.page-section
{
    scroll-margin-top: 120px; 
    background-size: cover;
    background-position: center;
    width: 100%;
    height: auto;
    
}

.page-divider
{
    padding-top: 60px;
}

/* Headers */
.section-header 
{
    display: flex;
    align-items: center;
    width: 100%;

}

.section-title 
{
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 0 20px;
    white-space: nowrap;
}

.line-horizontal
{
    flex: 1;
    height: 1px;
    background-color: var(--col-gold-dark);
}

.line-left
{
    margin-left: 75px;
}

.line-right
{
    margin-right: 75px;
}

.line-vertical
{
    width: 1px;
    margin-left: 50px;
    margin-right: 50px;
    background-color: var(--col-gold-dark);
}

.border-bg
{
    box-sizing: border-box; 
    border: 10px solid transparent;
    border-image-source: url("../assets/img/navigation-header-border.png");
    
    border-image-slice: 30 fill;
    border-image-repeat: stretch;
}

.border-bg :is(h1)
{
    color: var(--col-gold-light);
}
.border-bg :is(p, h2, h3, h4, li) 
{
    color: var(--col-purple-light)
}

.about-container
{
    display: flex;
    flex-direction: row;
    justify-content: start;
    padding: 0px 10%;
    flex: 0 0 300px;
    align-items: stretch;
}