@font-face {
    font-family: "Work Sans";
    src: url("./assets/fonts/WorkSans-VariableFont_wght.ttf") format("truetype");
    font-weight: normal;
    font-style: normal;
}

body, main, .rowClose, .rowFar, .attribution{
    display: flex;
    align-items: center;
    text-align: left;
    font-family: "Work Sans";
}

body, main, .attribution{
    flex-direction: column;
    justify-content: center;
    gap: 0.5rem;
}

body{
    padding-block: 1%;
    background-color: hsl(275, 100%, 97%);
}

main{
    width: 90%;
    align-items: flex-start;
    background-color: hsl(0, 0%, 100%);
    padding: 1%;
    border-radius: 2%;
}

.rowClose{
    justify-content: space-around;
    gap: 0.5rem;
    width: max-content;
}

.rowFar{
    justify-content: space-between;
    width: 100%;
}

h1, strong{ color: hsl(292, 42%, 14%); }

h1{
    font-size: 2em;
    font-weight: 700;
}

p{ display: none; }

p.active{
    display: inline;
    color: hsl(292, 16%, 49%);
    font-weight: 400;
    overflow-wrap: break-word;
}

a { color: hsl(228, 45%, 44%); }

a:hover { color: green; }

:focus{
    background-color: hsl(275, 100%, 90%);
    color: hsl(292, 42%, 14%);
    border: none;
    outline: 0.2rem solid hsl(292, 42%, 14%);
}

    .clickbleIMG{ cursor: pointer; }

.attribution { text-align: center; }

#pattern-desktop{
    width: 100%;
    z-index: -1;
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
}

@media screen and (min-width: 1440px) {

    body{
        height: 95vh;
        font-size: 2em;
    }
    
    main{
        width: 70%;
        height: 70%;
        padding: 1%;
        justify-content: space-evenly;
    }

    .rowClose{ gap: 1rem; }

    .clickbleIMG{
        width: 3rem;
        height: 3rem;
    }
    
    .clickbleIMG:hover{
        width: 4rem;
        height: 4rem;
    }

    .attribution { flex-direction: row; }
    
    #pattern-desktop{ display: inline; }
    
    #pattern-mobile{ display: none; }

    #icon-star{ width: 2em; }
}