.settings{height:20svh;background-color:var(--primary);padding:10px 20px;box-sizing:border-box}.settings .settingsTop{display:flex;align-items:center;justify-content:space-between;height:40%}.settings #settingsTitle{color:#fff;font-size:2rem;display:flex;margin-bottom:auto}.settings #settingsOptions{height:50%;display:grid;grid-template:1fr/1fr 1fr 1fr 1fr;column-gap:20px;min-height:80px}.settings #settingsOptions .item{display:flex;flex-direction:column;gap:10px}.settings #settingsOptions{background-color:var(--secondary);border-radius:10px;padding:10px;box-sizing:border-box}.settings #settingsOptions select,.settings #settingsOptions input,.settings #settingsOptions label{color:#fff}.settings #settingsOptions select,.settings #settingsOptions input{padding:10px;transition:background-color .3s}.settings #settingsOptions select:hover,.settings #settingsOptions input:hover{background-color:var(--primary-hover)}.settings #settingsOptions select option{color:#000;background-color:#fff}@media screen and (max-width: 820px){.settings{height:25svh;min-height:220px}.settings .settingsTop{height:30%}.settings #settingsOptions{height:70%;grid-template:1fr 1fr/1fr 1fr;min-height:140px}}@media screen and (max-width: 760px){.settings{border-top:1px solid #000}}@media screen and (max-width: 520px){.settings{height:auto}.settings .settingsTop{height:auto}.settings #settingsTitle{font-size:1.5rem}.settings #settingsOptions{height:auto;grid-template:none;grid-template-columns:1fr}}
