@import url('https://fonts.googleapis.com/css2?family=Comfortaa&display=swap');

:root {
    --eyePosX: column;
    --eyePosY: flex-start;

    --tongueTop: 0vw;
    --tongueBottom: 0vw;
    --tongueLeft: 3.5vw;
    --tongueRight: 0vw;
    --tongueWidth: 2.5vw;
    --tongueHeight: 1vw;
}

.top-bar,
.buttons,
.buttons button {
    border: .6vh solid hsl(0, 0%, 0%);
    box-sizing: border-box;
    border-radius: 1.5vh;
}

* {
    font-family: 'Comfortaa',sans-serif;
}

body {
    background-color: hsl(165, 60%, 70%);
    height: 100%;
    display: flex;
}

.top-bar {
    position: absolute;
    display: flex;
    flex-direction: column;
    margin: 0;
    top: -.5%;
    left: 25%;
    width: 50vw;
    height: 35vh;
    justify-content: center;
    align-items: center;
    border-radius: 0;
    background-color: hsl(270, 50%, 65%);
}

.top-bar .heading {
    position: relative;
    font-size: 5vw;
}

.buttons {
    position: absolute;
    display: flex;
    flex-direction: column;
    top: 34%;
    left: 50%;
    transform: translateX(-50%);
    justify-content: center;
    align-items: center;
    gap: 2vh;
    padding: 1.5vw;
    padding-bottom: 1.1vh;
    background-color: hsl(270, 40%, 70%);
    overflow: hidden;
}

.buttons button {
    width: 55vw;
    height: 19vh;
    font-size: 2vw;
    background-color: hsl(165, 60%, 60%);
    border: .7vh solid hsl(0, 0%, 0%);
}

.buttons button:hover {
    font-weight: bold;
    background-color: hsl(165, 60%, 55%);
    transform: scale(1.025);
    cursor: pointer;
}

.about-button {
    position: absolute;
    justify-content: center;
    text-align: center;
    bottom: 3vh;
    left: 3vh;
    height: 5vh;
    width: 5.4vh;
    font-size: 2.3vh;
    font-weight: bold;
    background-color: hsl(165, 60%, 60%);
    border: .5vh solid hsl(0, 0%, 0%);
    box-sizing: border-box;
    border-radius: 50%;
}

.about-button:hover {
    font-size: 2.5vh;
    background-color: hsl(165, 60%, 60%);
    transform: scale(1.07);
    cursor: pointer;
}

/*Animation */

.animation {
    display: grid;
    grid-template-columns: repeat(5, 5vw);
    grid-template-rows: repeat(3, 5vw);
}

.text {
    grid-column: span 3;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 2.4vw;
    border: .25vw solid hsl(0, 0%, 0%);
    box-sizing: border-box;
}


.snake {
    background-color: hsl(262, 80%, 40%);
}

.snake-head {
    display: flex;
    justify-content: center;
    flex-direction: var(--eyePosX);
    align-items: var(--eyePosY);
    gap: 1vw;
}

.snake-head .eye1,
.snake-head .eye2 {
    margin: .25vw;
    height: 1.2vw;
    width: 1.2vw;
    background-color: hsl(0, 0%, 0%);
    box-sizing: border-box;
    border: .25vw solid hsl(0, 0%, 100%);
    border-radius: 50%;
}

.snake-head .tongue {
    position: absolute;
    margin-top: var(--tongueTop);
    margin-bottom: var(--tongueBottom);
    margin-left: var(--tongueLeft);
    margin-right: var(--tongueRight);
    width: var(--tongueWidth);
    height: var(--tongueHeight);
    background-color: hsl(380, 80%, 70%);
}