.preference-case{
    border: .1px solid var(--gray-official);
    background: var(--white-official);
    color: var(--black-official);
    text-align: center;
    border-radius: 16px;
    padding: 20px;
    margin: 10px;
}

.preference-case i{
    font-size: 150%;
}

.preference-case span {
    font-size: 80%;
}

.preference-case:hover {
    background: var(--gray-official);
    color: var(--white-official);
}

.prefered {
    box-shadow: 2px 2px 2px #9c9a9a;
    height: 220px;
    overflow: scroll;
    background: #ffffff;
}

.prefered .title {
    padding: 10px 20px;
    color: rgb(200, 176, 125);
    background: black;
}

.prefered .body {
    display: flex;
    justify-content: space-between;
    padding: 20px;
    color: rgb(59, 57, 57);
    border-top: .5px solid rgb(132, 131, 131);
}

.prefered .body img {
    width: 70px;
    cursor: pointer;
    height: 35px;
}

.padding-perefed {
    padding: 10px 20px;
}

.title-preference {
    padding-left: 10px;
    border-bottom: 3px solid rgb(174, 135, 50);
    margin-bottom: 20px;
}

.title-preference h2 {
    font-size: 140%;
    margin-top: 40px;
    color: rgb(133, 98, 25);
}

.title-preference select {
    height: 40px;
}


.preference h1{
    font-size: 110%;
}

.preference h2 {
    font-size: 90%;
    color: var(--orange-official);
    background: var(--black-official);
    font-weight: normal;
    padding: 15px;

}

.preference .case-lang{
    border: .5px solid var(--gray-official);
    background: var(--gray-official);
    color: var(--white-official);
    cursor: pointer;
    border-radius: 8px;
    padding: 20px 10px;
}

.preference .case-lang:hover {
    background: var(--white-official);
    color: var(--gray-official);
}

.case-selected-lang{
    border: .5px solid var(--gray-official);
    background: var(--white-official);
}

.case-selected-lang img{
    width: 100px;
}

.case-selected-lang p {
    font-size: 90%;
    color: var(--black-official);
}