body {
    font-family: 'Lato', sans-serif;
    background-color: #3f3f46
}

.font-medieval {
    font-family: 'MedievalSharp', cursive
}

.parchment-bg {
    background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9XYwMCUiPjxmaWx0ZXIgaWQ9Im4iPjxmZVR1cmJ1bGVuY2UgdHlwZT0iZnJhY3RhbE5vaXNlIiBiYXNlRnJlcXVlbmN5PSIwLjUiIG51bU9jdGF2ZXM9IjMiIHN0aXRjaFRpbGVzPSJzdGl0Y2giLz48L2ZpbHRlcj48cmVjdCB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSIjZjVmMTVhIi8+PHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsdGVyPSJ1cmwoI24pIiBvcGFjaXR5PSIwLjUiLz48L3N2Zz4=');
    background-size: cover
}

.stone-pattern {
    background-color: #78716c;
    background-image: linear-gradient(335deg, rgba(0, 0, 0, 0.2) 23px, transparent 23px), linear-gradient(155deg, rgba(0, 0, 0, 0.2) 23px, transparent 23px), linear-gradient(335deg, rgba(0, 0, 0, 0.2) 23px, transparent 23px), linear-gradient(155deg, rgba(0, 0, 0, 0.2) 23px, transparent 23px);
    background-size: 58px 58px
}

.input-cell {
    transition: all 0.2s
}

.input-cell:focus {
    background-color: #fef9c3;
    transform: scale(1.1);
    z-index: 10
}