:root{
    --background-color-1: #121212;
    --background-color-2: #333333;

    --point-color-1: #FFD700;
}

@font-face {
    font-family: "NanumGothic";
    src: url("/fonts/NanumGothic.otf");
}

*{
    margin: 0;
    padding: 0;

    font-family: "NanumGothic";
}

html, body{
    width: 100%;
    height: auto;

    background-color: var(--background-color-1);
}

.wrapper{
    width: 100%;
    height: auto;

    display: flex;
    flex-direction: column;
    align-items: center;
}

.header{
    width: 100%;
    height: 150px;

    display: flex;
    justify-content: center;
    align-items: center;
}

.header_title{
    width: 1200px;
    height: 100%;

    display: flex;
    justify-content: start;
    align-items: center;
}

.header_title span{
    color: white;
    font-size: 30px;
    font-weight: bold;

    padding-left: 20px;
}

.menu{
    width: 250px;
    height: auto;

    display: flex;
    flex-direction: column;
}

.category{
    width: 135px;
    height: 40px;

    margin-bottom: 20px;

    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 8px;

    display: flex;
    justify-content: start;
    align-items: center;

    cursor: pointer;

    transition: transform 0.5s ease;
}

.category span{
    color: rgba(255, 255, 255, 0.9);
    font-size: 15px;

    padding-left: 12px;
}

.category:hover{
    transform: translateX(15px);

    background-color: (255, 255, 255, 0.1);
}

.category.active{
    transform: translateX(15px);

    border: none;

    background-color: var(--point-color-1);
}

.category:hover span{
    font-weight: 500;
}

.category.active span{
    color: var(--background-color-1);
    font-weight: 500;
}