:root {
    --blue: #00f;
    --bun: #eba44a;
    --brown: #4d1c13;
    --salat: #4ca673;
    --tomato: #ea5b58;
    --cheese: #fbe292;
    --meat: #863330;
    --mint: #00ff78;
}

*,
html,
body {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    display: grid;
    grid-template-rows: 80px 1fr;
    background: var(--blue);
    font: normal 16px/1 sans-serif;
    height: 100vh;
    place-items: center;
}

h1 {
    color: var(--cheese);
}

i {
    color: var(--mint);
    font-style: normal;
    text-transform: capitalize;
    margin: 0 0 8px;
}

.burgerGrid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 5vh 10vw;
    padding: 0 0 40px;
}

.burger {
    align-items: center;
    display: flex;
    flex-direction: column;
    width: 100px;
}

.burger span {
    display: block;
    width: 50px;
}

.bunHead {
    background: var(--bun);
    border: 2px solid var(--brown);
    border-radius: 13px 13px 3px 3px;
    height: 14px;
}

.salat {
    background: var(--salat);
    border-radius: 2px;
    height: 6px;
}

.salat::after {
    border-bottom: 6px dotted var(--tomato);
    content: "";
    display: block;
    height: 4px;
}

.tomato {
    background: var(--tomato);
    border-radius: 1px;
    height: 4px;
}

.cheese {
    background: var(--cheese);
    border-radius: 2px;
    height: 2px;
    margin: 0 1px;
}

.cheese::after {
    border: 10px solid transparent;
    border-top-color: var(--cheese);
    content: "";
    display: block;
    height: 0;
    transform: scaleY(1);
    width: 0;
}

.meat {
    background: var(--meat);
    border: 2px solid var(--brown);
    border-radius: 5px;
    height: 10px;
}

.bunBottom {
    background: var(--bun);
    border: 2px solid var(--brown);
    border-radius: 3px 3px 9px 9px;
    height: 12px;
}

.uuuuuuuu {
    gap: 1px;
}