.spellwriting_main {
                pointer-events: none;
                position: static;
                display: flex;
                flex-direction: column;
                justify-content: center;
                min-height: 90vh;
                align-items: center;
                text-align: center;
                background-image: none;
                filter: none;
                font-size: 18px;
                
            }

.spellwriting_main .link{
  color: #ee1cd2;
  text-decoration: none;
  transition: all 0.4s ease;
}

.spellwriting_main .link:hover{
  filter:drop-shadow(0px 0px 4px #3df5ff) drop-shadow(0px 0px 2px #ffffff);
}

.spellwriting_main h2{
    font-size: inherit;
    font-weight: inherit;
    margin: inherit;
}

            body.dark .spellcircle {
                filter: brightness(400%);
            }

            
            .spellwriting_container {
                position: relative;
                display: grid;
                align-items: center;
                justify-items: center;
                gap: 0px;
                padding: 31px;
                width: 782px;
                background-color: rgba(243, 240, 232, 0.48);
                grid-template-columns: 1fr 1fr;
                overflow-x: clip;
                
                scroll-behavior: smooth;

                
                grid-template-areas:
                    "spellwriting_header spellwriting_header"
                    "schoolsOfMagic schoolsOfMagic"
                    "schoolsOfMagicImage schoolsOfMagicText"
                    "ElementalBaneSchool ElementalBaneSchool"
                    
                    "SpellTarget SpellTarget"
                    "SpellTargetText SpellTargetsImage"
                    "ElementalBaneTarget SpellTargetsImage"
                    "SpellTargetsText2 SpellTargetsText2"
                    
                    "Concentration Concentration"
                    "ConcentrationText ConcentrationText"
                    
                    "CastingTime CastingTime"
                    "CastingTimeText CastingTimeImage"
                    "ElementalBaneCastingTime ElementalBaneCastingTime"
                    
                    "SpellComponents SpellComponents"
                    "SpellComponentsText SpellComponentsImage"
                    "ElementalBaneSpellComponents ElementalBaneSpellComponents"
                    
                    "DamageTypes DamageTypes"
                    "DamageTypesImage DamageTypesText"
                    "DamageTypesImage ElementalBaneDamageTypes"
                    
                    "SpellLevel SpellLevel"
                    "SpellLevelText SpellLevelText"
            }

.spellwriting_container div {
    min-width: 0;
}



            body.dark .spellwriting_container {
                background-color: rgba(54, 50, 76, 0.5);
            }

            .schoolsOfMagicImage {
                display: grid;
                grid-template-columns: auto auto auto auto;
            }
            
            .schoolsOfMagicImage div img,
            .spellwriting_targets div img,
            .SpellTargetsImage div img,
            .DamageTypesImage div img,
            .CastingTimeImage div img,
            .SpellComponentsImage div img, 
            .spellwriting_levels img {
                width: 77px;
                gap: 3px;
                padding: 11px;
            }

            .spellwriting_example {
                display: flex;
                justify-content: center;
                font-size: 15px;
            }

            .spellwriting_example img {
                width: 89px;
            }

            .spellwriting_targets,
            .SpellTargetsImage,
            .CastingTimeImage, .SpellComponentsImage {
                display: grid;
                grid-template-columns: auto auto auto;
            }

            .spellwriting_levels {
                display: grid;
                grid-template-columns: auto auto auto auto auto;
                width: fit-content;
            }

            .spellwriting_container div {
                padding-left: 10px;
                padding-right: 10px;
                text-align: center;
            }
            .spellwriting_header {
                position: relative;
                filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, 0.17));
            }

            .schoolsOfMagic, .SpellTarget, .Concentration,
            .CastingTime, .SpellComponents, .DamageTypes, .SpellLevel {
                padding: 33px;
                font-size: 30px;
                color: #ffec9d;
                position: relative;
            }

.spellwriting_header .centered{
    width: 745px;
    color:#5a4174;
}

.spellwriting_title{
    position: relative;
    padding-top: 57px;
    left: 76px;
    rotate: -5deg;
}

.spellwriting_index{
        position: absolute;
        align-content: left;
        justify-content: left;
        width: 222px;
        height: 141px;
        left: 554px;
        top: 387px;
        font-size: 20px;
        color: #ff2af1;
        z-index: 10000;
    pointer-events: all;
    }

.spellwriting_index button{
    width: inherit;
    text-align: left;
}

.spellwriting_container, .spellwriting_container div, .spellwriting_title,
.spellwriting_header, .spellwriting_index
{
    transition: 0.6s ease;
}

@media (max-width: 780px){
    .spellwriting_main{
        max-width: 780px;
        overflow-x: clip;
    }
    
    .spellwriting_container {
        grid-template-columns: 1fr;
        width: 100%;
        
        
                grid-template-areas:
                    "spellwriting_header"
                    "schoolsOfMagic"
                    "schoolsOfMagicText"
                    "schoolsOfMagicImage"
                    "ElementalBaneSchool"
                    
                    "SpellTarget"
                    "SpellTargetText"
                    "SpellTargetsImage"
                    "SpellTargetsText2"
                    "ElementalBaneTarget"
                    
                    "Concentration"
                    "ConcentrationText"
                    
                    "CastingTime"
                    "CastingTimeText"
                    "CastingTimeImage"
                    "ElementalBaneCastingTime"
                    
                    "SpellComponents"
                    "SpellComponentsText"
                    "SpellComponentsImage"
                    "ElementalBaneSpellComponents"
                    
                    "DamageTypes"
                    "DamageTypesText"
                    "DamageTypesImage"
                    "ElementalBaneDamageTypes"
                    
                    "SpellLevel"
                    "SpellLevelText"
            }
    
    .spellwriting_container div:not(.spellwriting_header){
        padding: 6px;
    }
    
    .spellwriting_title{
    z-index: 200;
    scale: 0.5;
    rotate: 5deg;
    left: 47px;
    top: 43px;
}
    
    .spellwriting_header{
        padding-top: 59px;
        padding-bottom: 261px;
        left: 72px;
    }
    
    .spellwriting_header .spellwriting_header_paper{
        position: relative;
        rotate: 90deg;
        top: 55px;
    }
    
    .spellwriting_header .centered{
        width: 246px;
        height: 1057px;
    }
    
    .spellwriting_example {
                display: grid;
                grid-template-columns: auto auto;
            }
    
    .spellwriting_index{
        position: absolute;
        left: 145px;
        top: 733px;
    }
    
}

.spellwriting_header { grid-area: spellwriting_header; }

.schoolsOfMagic { grid-area: schoolsOfMagic; }
.schoolsOfMagicImage { grid-area: schoolsOfMagicImage; }
.schoolsOfMagicText { grid-area: schoolsOfMagicText; }
.ElementalBaneSchool { grid-area: ElementalBaneSchool; }

.SpellTarget { grid-area: SpellTarget; }
.SpellTargetText { grid-area: SpellTargetText; }
.SpellTargetsImage { grid-area: SpellTargetsImage; }
.ElementalBaneTarget { grid-area: ElementalBaneTarget; }
.SpellTargetsText2 { grid-area: SpellTargetsText2; }

.Concentration { grid-area: Concentration; }
.ConcentrationText { grid-area: ConcentrationText; }

.CastingTime { grid-area: CastingTime; }
.CastingTimeText { grid-area: CastingTimeText; }
.CastingTimeImage { grid-area: CastingTimeImage; }
.ElementalBaneCastingTime { grid-area: ElementalBaneCastingTime; }

.SpellComponents { grid-area: SpellComponents; }
.SpellComponentsText { grid-area: SpellComponentsText; }
.SpellComponentsImage { grid-area: SpellComponentsImage; }
.ElementalBaneSpellComponents { grid-area: ElementalBaneSpellComponents; }

.DamageTypes { grid-area: DamageTypes; }
.DamageTypesImage { grid-area: DamageTypesImage; }
.DamageTypesText { grid-area: DamageTypesText; }
.ElementalBaneDamageTypes { grid-area: ElementalBaneDamageTypes; }

.SpellLevel { grid-area: SpellLevel; }
.SpellLevelText { grid-area: SpellLevelText; }