/*
### Primary

- Light Cyan: hsl(193, 38%, 86%)
- Neon Green: hsl(150, 100%, 66%)

### Neutral

- Grayish Blue: hsl(217, 19%, 38%)
- Dark Grayish Blue: hsl(217, 19%, 24%)
- Dark Blue: hsl(218, 23%, 16%)
*/

* {
    font-family: "Manrope", sans-serif;
    --light-cyan: hsl(193, 38%, 86%);
    --neon-green: hsl(150, 100%, 66%);
    --grayish-blue: hsl(217, 19%, 38%);
    --dark-grayish-blue: hsl(217, 19%, 24%);
    --dark-blue: hsl(218, 23%, 16%);
}

body {
    background-color: var(--dark-blue);
    color: var(--light-cyan);
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    margin: 0;
    justify-content: center;
}

main {
    max-width: 44rem;
    background-color: var(--dark-grayish-blue);
    padding: 1rem;
    width: 80%;
    margin: auto;
    border-radius: 1rem;
}

h2 {
    color: var(--neon-green);
    text-align: center;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

h1 {
    width: 90%;
    margin: auto;
    text-align: center;
}

.button {
    background-color: var(--neon-green);
    padding: 1rem;
    width: fit-content;
    border-radius: 50%;
    margin: auto;
    line-height: 0;
    position: relative;
    margin-top: -1rem;
    top: 3em;
}

.button img {
    width: 1.5rem;
}

.sep img {
    width: 100%;
    padding-top: 2rem;
}

@media screen and (min-width: 700px) {
    .sep img {
        content: url(./images/pattern-divider-desktop.svg) !important;
    }
    
}

.sep img {
    content: url(./images/pattern-divider-mobile.svg);
}

.button:hover {
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    box-shadow: 0px 0px 5rem 0.1rem var(--neon-green);

}

.attribution {
    padding-bottom: 1rem;
    
}

.attribution a, .attribution a:visited {
    color: var(--neon-green);
}