body{
    position: relative;
}
table{
    background: rgb(238, 237, 237);
}
td{
    border: 1px solid #d3d2d2;
    user-select: none;
    -moz-user-select: none;
    -webkit-user-drag: none;
    -webkit-user-select: none;
    -ms-user-select: none;
}
td.wall{
    animation-name: wall;
    animation-duration: 0.3s;
    animation-fill-mode: forwards;
}
td.weight{
    background-image: url('./icons/weight.svg');
    background-position: center;
    animation-name: icons;
    animation-duration: 1.0s;
    animation-fill-mode: forwards;
}
td.start{
    background-image: url('./icons/arrow.svg');
    background-position: center;
    animation-name: icons;
    animation-duration: 3.0s;
    animation-fill-mode: forwards;
}
td.end{
    background-image: url('./icons/pin_point.svg');
    background-position: center;
    animation-name: icons;
    animation-duration: 3.0s;
    animation-fill-mode: forwards;
}
td.visited{
    animation-name: visited;
    animation-duration: 1.0s;
    animation-fill-mode: forwards;
}
td.path{
    animation-name: path;
    animation-duration: 1.0s;
    animation-fill-mode: forwards;
}
@keyframes wall{
    0% {background-color: #a3a3a3; transform: scale(.3);}
    50% {background-color: #696969; transform: scale(1.3);}
    100% {background-color: #333333; transform: scale(1.0); border: none}
}
@keyframes visited{
    0% {background-color: #5c5eb8; transform: scale(.3); border-radius: 10px; background-color: #FFFF00;}
    25% {background-color: #3c88f1; transform: scale(.5); border-radius: 10px}
    50% {background-color: #387dd8; transform: scale(1.4); border-radius: 10px}
    75% {background-color: #1351a3; transform: scale(1.1);}
    100% {background-color: #1537b4; transform: scale(1.0);}

}
@keyframes path{
    0% {background-color: #a5f1a5; transform: scale(.4); border-radius: 10px}
    50% {background-color: #059205; transform: scale(1.1); border-radius: 10px;border: none}
    100% {background-color: #5cb85c; transform: scale(1.0); border: none}
}
@keyframes icons{
    0% {transform: scale(.3)}
    50% {transform: scale(1.1)}
    100% {transform: scale(1.)}
}


.tutorial{
    position: absolute;
    left: 27%;
    top: 15%;
    width: 900px;
    height: 550px;
    border: 1px solid black;
    background-color: white;
    padding: 25px;
}
.tutorial #title{
    text-align: center;
    font-size: 60px;
    margin: 0;
}
.tutorial #subtitle{
    text-align: right;
    margin-top: 0;
    margin-right: 20px;
}
.tutorial #description{
    text-align: center;
}
.tutorial nav{
    width: 850px;
    padding: 0;
    position: absolute;
    bottom: 5%;
}

@media screen and (max-width: 1600px){
    .tutorial{
        width: 700px;
    }
    .tutorial nav{
        width: 650px;
    }
}