/* fonts */
@import url('https://fonts.googleapis.com/css2?family=Jost:ital,wght@0,100..900;1,100..900&family=Playfair+Display:ital,wght@0,400..900;1,400..900&display=swap');


/* root */
:root {
    --light-shade: #F8F6F5;
    --light-accent: #B0BC73;
    --accent: #CD8452;
    --dark-accent: #898279;
    --dark-shade: #402b20;
    --ff-display: "Playfair Display", serif;
    --ff-body: "Jost", sans-serif;
}

/* reset css */
* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    min-height: 100dvh;
    background: var(--dark-shade);
    font-family: var(--ff-body);
    color: var(--dark-shade);
    display: flex;
    justify-content: center;
    align-items: center;
}

p {
    font-weight: 300;
}

/* text */
h1#title {
    font-size: 2rem;
    font-family: var(--ff-display);
}


/* widget */
.jokeWidget {
    margin: 20px;
    background: var(--light-shade);
    padding: 20px;
    border-radius: 8px;
    width: 50vw;
    min-width: 600px;
}

/* joke header */
.jokeHeader {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 20px;
}

/* joke list */
.jokeList.space {
    margin-top: 10px;
}

/* button */ 
button#jokeBtn {
    border-radius: 100px;
    font-size: 0.8rem;
    padding: 6px 12px;
    color: var(--light-shade);
    background: var(--accent);
    border: 2px solid var(--accent);
    text-transform: uppercase;
    letter-spacing: 0.1rem;
    transition: all 0.3s ease;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    position: relative;
    overflow: hidden;

    &:hover {
        opacity: 0.8;
    }
}

#jokeBtn::before, #jokeBtn::after{
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: -100%;
    left: 0;
    background-color: var(--dark-shade);
    z-index: -1;
    transition: all 400ms ease-in;
}

#jokeBtn:hover {
    border: var(--dark-shade);
}

#jokeBtn::before {
    opacity: 0.3;
}

#jokeBtn::after {
    transition-delay: 0.3s;
}

#jokeBtn:hover::before, #jokeBtn:hover::after {
    top: 0;
}

/* media query */
@media screen and (max-width: 650px) {
    .jokeWidget {
        min-width: 100%;
    }
}