:root {

    /* colors */
    --background-color: #fff;
    --contrast-color: #f8f8f8;
    --primary-color: #559188;
    --item: #303030;

    /* boxs-shadow */
    --shadow: 0px 2px 2px rgba(0, 0, 0, 0.25);
    --depth: 0px 1px 0px rgba(0, 0, 0, 0.15) inset, 0px -1px 0px rgba(211, 211, 211, 0.25) inset;

    /* fonts-family */
    --global: "Poppins", sans-serif;

    /* fonts-size */
    --nav-item-size: .8em;
}

*{
    font-family: var(--global);
    color: var(--item);
    outline: none;

    @media (pointer: coarse) {
        cursor: none;
      }

    select {
        border: none;
        background-color: transparent;
    }
}

.content {
    background-color: var(--background-color);
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;
}

.nav {
    background-color: var(--contrast-color);
    margin-bottom: 2em;
    padding: 0 15px;
    height: 50px;
    max-width: 90%;
    border-radius: 100px;
    box-shadow: var(--shadow);
    display: flex;
    justify-content: space-around;
    align-items: center;
    >.nav-item {
        display: flex;
        margin-right: 10px;
        align-items: center;
        text-decoration: none;
        >iconify-icon {
            margin: 5px;
        }
        >.name {
            >p{   
                font-weight: 600;
                font-style: normal;
                font-size: var(--nav-item-size);
                line-height: 13px;
            }
        }
    }
    >.nav-item.active {
        >iconify-icon {
            color: var(--primary-color);
        }
        >.name {
            >p{   
                color: var(--primary-color);
            }
        }
    }
}

.panel-container{
    background-color: var(--contrast-color);
    width: 90%;
    box-shadow: var(--shadow);
    border-radius: 4px;
    padding: 1em;
}


@media (max-width: 767px) {
    .nav  .nav-item  .name  p{   
        display: none;
    }
  }