.row{
    /*height = rem set in JS*/
    width: 100%;
}

.tile{
    position: relative;
    display: inline-block;
    z-index: 100;
    /*height = rem set in JS*/
    /*width = rem set in JS*/
}


.wall{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.wall > div{
    width: 100%;
    height: 100%;
    overflow-y: hidden;
}

.wall img{
    width: 100%;
}

.character{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.sprite-wrapper{
    /*
    background-color: red;
    overflow-y: hidden;
    height: 40px;
    width: 80px;*/
    /*background-color: #f00;*/
    width: 100%;
    height: 100%;
    overflow-y: hidden;
}

.character-sprite{
    /*
    width: 100%;
    object-fit: cover;*/
    /*transform: scale(6);*/
    /*height: 100%;*/
    image-rendering: pixelated;
    width: 100%;
}


.message{
    position: absolute;
    z-index: 2000;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding: 1.2rem;
/*
    margin: 0;
    padding: 0;
    box-sizing: border-box;*/
}

.message-shape{
    width: 100%;
    height: 100%;

    /*margin: 0;
    padding: 0;
    box-sizing: border-box;*/
}

.message-render{
    width: 100%;
    height: 100%;
    overflow: hidden;
/*
    margin: 0;
    padding: 0;
    box-sizing: border-box;*/
}

.message-container{
    position: relative;
    width: 100%;
    height: 100%;
/*
    margin: 0;
    padding: 0;
    box-sizing: border-box;*/
}

.message-background{
    /*
    position: absolute;
    left: 0;
    top: 0;*/
    width: 100%;
    height: 100%;
/*
    margin: 0;
    padding: 0;
    box-sizing: border-box;*/
}

.message-text{
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 2001;
    font-family: 'Lora', serif;
    color: #16171c;
    font-size: 2.6rem;
    font-weight: bold;
    transform: translate(-50%, -50%);
    width: 80%;
    opacity: .94;
    text-align: justify;

    /*
    margin: 0;
    padding: 0;
    box-sizing: border-box;*/
}

.wind-anim-container{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 0;
}

.wind-wrapper{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}

.wind-wrapper > div{
    width: 100%;
    height: 100%;
    overflow-y: hidden;
}

.wind-wrapper img{
    width: 100%;
    /*
    position: absolute;
    
    top: 0;
    left: 0;*/
}

.checkered-wrapper{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}

.checkered-wrapper img{
    width: 100%;
}

.blackscreen{
    position: absolute;
    z-index: 200000;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: rgb(22, 23, 28);
}

.press-to-restart{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    color: white;
    font-size: 2rem;
}