body {
    margin: 0;
    padding: 0;
    background-color: #A20A0A;
    font-family: 'Sofia';
}

.container {
    margin: 0 auto;
    max-width: 25em;
}

.title {
    color: #799351;
    text-align: center;
    /*margin-bottom: 3em;*/
}

.titlebar {
    margin-top: 2em;
    display: grid;
    grid-template-columns: 2fr 1fr 2fr;
    grid-template-rows: 4em;
    align-content: center;
    justify-items: center;
    align-items:  center;

}

.titlebar img {
    height: 4em;
}

.caneseparator {
    width: 60%;
    height: 1em;
    margin: 2.5em auto;
    border: 0;
    background-image: repeating-linear-gradient(45deg, red 0%, red 10%, white 10%, white 20%);
    box-shadow: 0.2em 0.2em 0.5em;
    border-radius: 1em;
}

@keyframes bellsJingle {
    0% {rotate: -10deg;}
    50% {rotate: 10deg;}
    100% {rotate: -10deg;}
}


footer img {
    display: block;
    width: 10em;
    margin: 2em auto;
    animation-name: bellsJingle;
    animation-duration: 0.3s;
    animation-iteration-count: infinite;

}

.grid-container {
    padding: 2px;
    height: 20em;
    width: 20em;
    align-content: center;
    display: grid;
    grid-template-columns: repeat(3,1fr);
    grid-template-rows: repeat(3,1fr);
    grid-gap: 1em;
    margin-left: auto;
    margin-right: auto;
    justify-content: center;
}


.item-button {
    box-sizing: border-box;
    display: grid;
    font-size: 1em;
    justify-content: center;
    align-content: center;
    text-align: center;
    font-size: 0.7em;
    padding: 1em;
    width: 100%;
    border-radius: 1rem;
    text-align: center;
    overflow: hidden;
    cursor: pointer;
    
}

.item-button-norm {
    box-shadow: black 1px 1px 3px;
    background-color: #F6EEC9;
    color: 799351;
}

.item-button-pressed {
    background-image: url("../img/kranssi.png");
    background-size: 95%;
    background-color: transparent;
    background-position: center;
    background-repeat: no-repeat;
    box-shadow: 0px;
    border: 0;
    color: transparent;
    animation: bellsJingle 4s;
    animation-iteration-count: infinite;
}