:root {
    /*Color*/
    --color-white: white;
    --color-light-white: #eeeeee;
    --color-green: #86e086;
    --color-light-green: #e9ffe9;
    --color-dark-green: #54a954;
    --color-blue: #80b8e1;
    --color-light-blue: #c4e0f5;
    --color-dark-blue: #5ca3da;
    --color-black: black;

    /*Font Size*/
    --font-large: 48px;
    --font-medium: 28px;
    --font-regular: 18px;
    --font-small: 16px;
    --font-micro: 14px;

    /*Font Weight*/

    /*Size*/

    /*Animation*/

}

body {
    box-sizing: border-box;
}

a {
    text-decoration: none;
    color: var(--color-black)
}

h1 {
    text-align: center;
}


.role_list {
    display: flex;
    flex-direction: row;
    width: 500px;
    justify-content: space-around;
    margin:auto;
    background-color: var(--color-light-white);
}

.role {
    text-align: center;
    height: 50px;
    width: 100%;
    margin:auto;
    line-height:50px;
    border: 1px var(--color-white) solid
}


.product_list {
    background-color: var(--color-light-green);
    max-width: 1080px;
    margin: auto;
}

.product {
    font-size: var(--font-medium);
    /*padding: 16px;*/
    border: 1px lightgrey solid;
    border-radius: 2px;
    height: 60px;
    line-height: 60px;
    text-align: center;
}

.product:hover {
    background-color: var(--color-white);
    cursor: pointer;
}

.my_package {
    background-color: var(--color-light-blue);
    max-width: 1080px;
    margin: auto;
}

.my_product {
    font-size: var(--font-medium);
    /*padding: 16px;*/
    border: 1px lightgrey solid;
    border-radius: 2px;
    height: 60px;
    line-height: 60px;
    text-align: center;
}