#container {
    background-color: #4d8b00;
    padding: 2em;
    border-radius: 4px;
    width: min(500px, 90vw - 4em);
    display: flex;
    flex-direction: column;
    align-items: center;
}

#titleText {
    color:black;
    font-family: Noto Sans, 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: min(3em, 14vw);
    padding-bottom: 1em;
    color: white
}

#turtle {
    width: fit-content;
    position: relative;
    animation: turtle 80s linear infinite;
}

#turtleWalk {
    position: relative;
    animation: walk 1s infinite;
}

.boxes {
    display:flex;
    justify-content: center;
}

.box {
    width: min(100px, 22vw);
    display:flex;
    justify-content: center;
    font-size: min(1em, 6vw)
}

body {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    font-family: Noto Sans, 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: white;
    margin-bottom: 0px;
}

a {
    color: white;
}

footer {
    position:fixed;
    bottom:0px;
    background-color: #4d8b00;
    color: #fff;
    width:100%;
    height:20px;
}


@keyframes turtle {
    0% {
        top: -52px;
        left: 0%;
        transform: scaleX(-1);
    }
    49% {
        top: -52px;
        left: calc(100% - 68px);
        transform: scaleX(-1);
    }
    50% { 
        top: -52px;
        left: calc(100% - 68px);
        transform: scaleX(1);
    }
    99% {
        top: -52px;
        left: 0%;
        transform: scaleX(1);
    }
    100% { 
        top: -52px;
        left: 0%;
        transform: scaleX(-1);
    }
}

@keyframes walk {
    0% {
        transform: rotate(0deg);
    }
    50% {
        transform: rotate(15deg);
    }
    100% {
        transform: rotate(0deg);
    }
}