h1 {
    text-align: center;
    font-size: 30px;
    margin: 0 10px 0 0;
    width: 90%;
}

.header {
    margin-top: 10px;
    margin-bottom: 10px;
    display: inline-flex;
    text-align: center;
    width: 100%;
}

.header .btn {
    margin-left: auto;
    margin-right: 2px;
}

.container {
    max-width: 1000px;
}

.row {
    margin: 0;
}

.noPadding {
    padding: 0;
}

.grassTile {
    height: 220px;
    width: 100%;
    border: 3px solid white;
}

.content {
    margin-bottom: 20px;
}

.robot {
    position: absolute;
    padding: 0;    
    height: 200px;
    margin-top: -210px;
    background-image: url(../images/robot_back.png);
    background-repeat: no-repeat;
    background-position-x: 20%;
    background-size: contain;
    z-index: 20;
}

.robot.right {
    background-image: url(../images/robot_right.png);
}

.robot.left {
    background-image: url(../images/robot_left.png);
}

.robot.forward {
    background-image: url(../images/robot_forward.png);
}

.goal {
    position: absolute;
    padding: 0;
    height: 200px;   
    background-image: url(../images/gift.png);
    background-repeat: no-repeat;
    background-position-x: 20%;
    background-size: contain;
    z-index: 10;
}

.goal.row1 {
    margin-top: -650px;
}

.goal.row2 {
    margin-top: -430px;
}

.goal.row3 {
    margin-top: -210px;
}

.gif {
    position: absolute;
    display: none; 
    height: 90vh;
    width: 140vh;
    margin-top: -90vh;
    z-index: 30;
}

.displayNone {
    display: none;
}

.warning {
    font-size: 22px;
    margin: 20px 0;
}