@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap');


:root {
    --color-base-1: #1DB954;
    --color-base-2: #81b71a;
    
    --color-black-1: #191414;
    
    --color-white-1:#FFFFFF;
    --color-white-2:#F8F8F8;

    --color-passed: #08C203;
    --color-error:  #C20803;
}
body {
    font-family: 'Inter', sans-serif;
}

.btn {
    background-color: var(--color-base-1);
    color: var(--color-white-2);

    border-radius: 8px;
    padding: 1rem;

    font-weight: 600;

    border: none;

    cursor: pointer;
    transition:0.2s all;
    text-decoration: none;
}

.white {
    background-color: var(--color-white-2);
    color: var(--color-base-1);
}


/*top*/
.top__header {
    background-color: var(--color-black-1);

    width: 100vw;
    height: 140px;

    max-width: 100%;

    display: flex;
    align-items: center;
    justify-content: space-between;

    position: fixed;
    
}
.top__logo {
    margin: 0.5rem;

    display: flex;
    align-items: center;
}
.top__logo > img {
    width:  40px;
    height: 40px;
    max-width: 40px;
    max-height: 40px;
    padding: 0.4rem;
}

.top__logo > p {
    color: var(--color-white-2);

    font-size: 20px;
    font-weight: 700;
}
.top__menu {
    padding: 1rem;
}

.top__menu > i{
    font-size: 2rem;
    color: var(--color-white-2);
    transition: 0.5s;
}

.top__menu > i:hover{
    font-size: 2.5rem;
    color: var(--color-base-1);

}