:root {
    /* color */
    --color-black: #3f454d;
    --color-white: #ffffff;
    --color-blue: #3b88c3;
    --color-yellow: #fbbe28;
    --color-pink: #fd7f84;
    --color-light-grey: #dfdfdf;

    /* size */
    --base-space: 8px;
    --size-button: 60px;
    --size-border: 4px;
    --size-thumbnail: 50px;
    --font-size: 18px;

    /* animation */
    --animation-duration: 300ms;
}

* {
    box-sizing: border-box;
}

body {
    height: 100vh;
    background-color: var(--color-black);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.logo {
    cursor: pointer;
    transition: transform var(--animation-duration) ease;
}

.btn {
    background-color: transparent;
    border: none;
    outline: none;
    cursor: pointer;
    transition: transform var(--animation-duration) ease;
    margin-right: var(--base-space);
}

.btn:hover,
.logo:hover {
    transform: scale(1.1);
}

.buttons {
    display: flex;
    align-items: center;
}

.imgBtn {
    width: var(--size-button);
    height: var(--size-button);
}

.colorBtn {
    font-size: var(--font-size);
    padding: calc(var(--base-space) * 2);
    border-radius: var(--size-border);

}

.blue {
    background-color: var(--color-blue);
}

.yellow {
    background-color: var(--color-yellow);
}

.pink {
    background-color: var(--color-pink);
}

.items {
    width: 60%;
    height: 60%;
    list-style: none;
    padding-left: 0;
    overflow-y: scroll;
}

.item {
    background-color: var(--color-white);
    display: flex;
    align-items: center;
    padding: var(--base-space);
    margin-bottom: var(--base-space);
}

.item_thumbnail {
    width: var(--size-thumbnail);
    height: var(--size-thumbnail);
}

.item_description {
    margin-left: var(--base-space);
    font-size: var(--font-size);
}