:root {
    --text-color: rgb(147, 56, 6);
    --antique-filter: url("stamp_mask_02.png");
}

body {
    background-color: papayawhip;
    background-image: url("papyrus_bg.png");
    color: var(--text-color);
    height: 100vh;
}


#glyph-container {
    font-size: 100px; 
    margin: 30px auto;
}

.name-style-div {
    width: fit-content;
    margin: auto;
    padding-left: 30px;
    padding-right: 30px;
    background-color:   rgba(255, 255, 255, 0.699);
    border: 10px solid rgb(220, 202, 102); 
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-image: var(--antique-filter);     
    -o-mask-image: var(--antique-filter);
    -moz-mask-image: var(--antique-filter);
    -ms-mask-image: var(--antique-filter);
    mask-image: var(--antique-filter);
}

.horizontal-name-container {
    width: fit-content;
    position: relative;
    border: 5px solid var(--text-color);  
    margin: 20px;
    border-radius: 50%;
    padding: 30px;
}
.horizontal-name-container:after {
    content: '';
    position: absolute;
    top: -5px;
    left: -5px;
    right: -5px;
    bottom: -5px;
    z-index: 1;
    border-left: 5px solid var(--text-color);
}

.vertical-name-container {
    width: fit-content;
    text-align: center;
    line-height: 0.9;
    position: relative;
    border: 5px solid var(--text-color);  
    margin: 20px;
    border-radius: 50%;
    padding-left: 50px;
    padding-right: 50px;
    padding-top: 30px;
    padding-bottom: 30px;
}
.vertical-name-container:after {
    content: '';
    position: absolute;
    top: -5px;
    left: -5px;
    right: -5px;
    bottom: -5px;
    z-index: 1;
    border-bottom: 5px solid var(--text-color);
}

.curse-container {
    max-width: 500px;
    color: white;
    overflow-wrap: break-word;
    text-align: center;

    /*source of fire animation: https://1stwebdesigner.com/make-fire-animation-text-effect-css/*/
    text-shadow:
    0px -1px 3px #fff, /* Innermost layer - intense heat (white) */
    0px -2px 6px #FF3, /* Second layer - core of flame (yellow) */
    0px -6px 12px #F90, /* Middle layer - body of flame (orange) */
    0px -10px 20px #C33; /* Outermost layer - edges of flame (red) */
}

@keyframes flame {
    /* Initial state of animation */
    0%, 
    /* Final state of animation */
    100% { 
        text-shadow: 
            0 -1px 3px #fff,
            0 -2px 6px #FF3,
            0 -6px 12px #F90,
            0 -10px 20px #C33; 
    }
    /* Middle state of animation */
    50% { 
        text-shadow: 
            -2px -4px 6px #fff,
            1px -8px 12px #FF3,
            3px -16px 16px #F90,
            -1px -24px 24px #C33;
    }
}

.curse-container {
    animation: flame 4s infinite;
}

.curse-style-div {
    background-image: radial-gradient(closest-side, rgb(78, 66, 66) 10%, black);
}


.wall-container {
    overflow-wrap: break-word;
    width: 120vw;
    position: relative;
    left: -100px;
    top: -10px;
    line-height: 1.2;
    /*source: https://stackoverflow.com/questions/2889501/inner-text-shadow-with-css*/
    background-color: #853b1b;
    font-family: 'Times New Roman', Times, serif;
    font-weight: bold;
    text-decoration: underline;
    text-decoration-color: rgba(185, 137, 78, 0.5);
    text-decoration-thickness: 5px;
    text-underline-offset: 20px;
    color: transparent;
    text-shadow: 0px 2px 3px rgba(255, 240, 175, 0.8);
    -webkit-background-clip: text;
    -moz-background-clip: text;
    background-clip: text;
}

.wall-style-div {
    /*this cuts of the overflow, so it wouldn't scroll*/
    width: 100vw;
    height: 100vh;
    overflow: hidden;
}