*{box-sizing:border-box;margin:0;padding:0;font-family:Titillium Web,sans-serif}.button,.fav__card--button{background-color:#f59546;border:none;border-radius:5px;outline:2px solid #e26c0b;transition:background-color .3s,outline .5s ease-in}.button:hover,.fav__card--button:hover{background-color:#e26c0b;outline:2px solid #f59546}.button:active,.fav__card--button:active{background-color:#c25f0e;outline:2px solid #4d290b}.button{align-items:center;gap:5px;padding:5px 10px;font-family:Otomanopee One,sans-serif;display:flex}.button__title{display:none}@media (width>=768px){.button__title{display:inline}}.main__fav--button,.fav__card--button{margin-right:2px;padding:2px 4px;font-size:10px}.icon--button{width:12px}.icon--section{width:16px;padding:5px 0}@media (width>=768px){.icon--section{width:20px}}.fav__card--icon{align-self:center;width:12px;height:12px;margin-bottom:-2px}.header{flex-direction:column;padding:10px 2px;font-family:Otomanopee One,sans-serif;display:flex}@media (width>=768px){.header{flex-direction:row;align-items:center;gap:10px}}.header__title{color:#d7d7d7;margin-bottom:10px;font-family:Otomanopee One,sans-serif;font-size:24px}@media (width>=768px){.header__title{align-self:baseline;margin-bottom:0;font-size:32px}}.search{align-items:center;gap:10px;display:flex}.search__input{border:none;border-radius:5px;outline:2px solid #f59546;width:100%;padding:5px}.search__input::placeholder{color:#969696}.search__input:focus{outline:2px solid #e26c0b}body{background-color:#414141;grid-template-rows:100px 1fr;height:100vh;padding:0 10px;display:grid}@media (width>=768px){body{grid-template-rows:80px 1fr}}@media (width>=1200px){body{justify-items:center;max-width:1310px;margin:0 auto}}.main{grid-template-columns:minmax(120px,1fr) 3fr;display:grid}@media (width>=768px){.main{grid-template-columns:minmax(225px,1fr) 3fr}}.main__fav,.main__res{border:2px solid #969696;border-radius:5px;margin-bottom:10px}.main__fav--header,.main__res--header{background-color:#969696;align-items:center;margin-bottom:10px;padding:0 6px;display:flex}@media (width>=768px){.main__fav--header,.main__res--header{padding:0 10px}}.main__res{margin-left:10px}.main__res--title{padding-left:10px}.main__fav--header{justify-content:space-between}.main__fav--title,.main__res--title{color:#d7d7d7;font-family:Otomanopee One,sans-serif;font-size:18px}@media (width>=768px){.main__fav--title,.main__res--title{font-size:24px}}.fav,.res{flex-wrap:wrap;justify-content:center;gap:10px;width:100%;padding:0 10px 10px;display:flex}.res__card{border:2px solid #d7d7d7;border-radius:5px;width:145px;height:225px;margin-bottom:30px;position:relative}@media (width>=768px){.res__card{width:225px;height:350px}}.res__card--title{color:#414141;background-color:#d7d7d7;border-radius:5px;width:100%;height:70px;margin:5px;padding:5px;position:absolute;bottom:-35px;overflow:hidden}.res__card--selected{border:2px solid #e26c0b}.res__card--selected>.res__card--title{color:#4d290b;background-color:#e26c0b}.fav__card{border:2px solid #e26c0b;border-radius:5px;grid-template-columns:2fr 1fr;place-items:center;gap:10px;width:100%;padding:3px 2px;display:grid}@media (width>=768px){.fav__card{grid-template-columns:2fr 4fr 1fr}}.fav__card--img{width:50px}.fav__card--title{color:#969696;text-align:left;display:none}@media (width>=768px){.fav__card--title{display:inline}}