:root {
    --orange: hsl(31, 98%, 49%);
    --coral: hsl(355, 89%, 64%);
    --yellow: hsl(54, 100%, 49%);
    --green: hsl(152, 76%, 53%);
    --light-blue: hsl(195, 69%, 52%);
    --mid-blue: hsl(203, 100%, 29%);
    --dark-blue: hsl(231, 100%, 9%);
}

.get-the-app {
    display: flex;
    justify-content: right;
}

a,
a:hover {
    text-decoration: none;
}

.get-it-on-tildagon {

    &:hover {
        filter: brightness(80%);
    }

    width: fit-content;

    display: grid;

    padding: 1rem;

    background-color: var(--light-blue);

    border-radius: 2rem;
    grid-template-columns: 10rem 20rem;
    grid-template-rows: 4rem 5rem;

    align-items: center;
    justify-items: center;

    grid-template-areas: "logo get-it-on"
    "logo tildagon";

    .tildagon-body {
        fill: var(--green);
    }

    .tildagon-logo {
        fill: var(--orange);
    }

    .tildagon-edge-connector {
        fill: none;
        stroke: var(--mid-blue);
        stroke-miterlimit: 10;
        stroke-width: 2px;
    }

    svg {
        grid-area: logo;
    }


    span {
        text-align: left;
        text-transform: uppercase;
        font-weight: bold;
        font-size: 2rem;
        align-self: end;
    }

    span.get-it-on {
        grid-area: get-it-on;
        color: var(--coral);
    }

    span.tildagon {
        grid-area: tildagon;
        color: var(--mid-blue);
        font-size: 3.4rem;
        align-self: self-start;
    }
}