.mypage-badge {
    justify-self: center;
}

.mypage-icon {
    width: 50px;
    height: 50px;
    justify-self: center;
}

.control-buttons {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    margin: var(--fw-air-huge) 0;

    @media only screen and (max-width: 480px) {
        flex-wrap: wrap;
    }
}

.control-button {
    width: 100%;
    display: grid;
    grid-template-rows: auto min-content;
    grid-gap: var(--fw-air-tiny);
    appearance: none;
    text-decoration: none;
    background: transparent;
    border: 2px solid var(--fw-dark-blue);
    border-radius: 2px;
    padding: var(--fw-air-small);
    margin: var(--fw-air-tiny);
    cursor: pointer;
    color: var(--fw-dark-blue);
}

.control-button--selected {
    background-color: var(--fw-dark-blue);
    color: var(--fw-white);
    cursor: context-menu;
}

    .control-button:hover,
    .control-button:focus {
        text-decoration: none !important;
    }

.control-button__icon {
    width: 50px;
    height: 50px;
    margin: 0 auto;
    position: relative;
    border-radius: 150px;
}

.control-button__label {
    text-align: center;
}

.control-button:hover,
.control-button:focus {
    text-decoration: underline;
    color: var(--fw-dark-blue);
    background-color: var(--fw-dark-blue--pale);
    outline: none;
}

.control-button--selected,
.control-button--selected:hover,
.control-button--selected:focus {
    background-color: var(--fw-dark-blue);
    color: var(--fw-white);

    span {
        font-weight: 500;
    }
}