*{margin:0;padding:0;box-sizing:border-box}body,html{height:100%;width:100%;overflow-x:hidden}body{background-color:rgb(96,136,127);min-height:100vh;display:flex;align-items:center;justify-content:center}.title{text-align:center;margin-bottom:20px}.title h1{font-size:clamp(1.5rem,4vw,2.5rem);margin-bottom:15px;color:white}.title img{max-width:80px;height:auto;margin-bottom:20px}.inputText{justify-content:center;margin-bottom:20px}.inputText,.inputText form{align-items:center;display:flex}.inputText form{flex-direction:column;gap:10px}.inputText label{color:white;font-size:clamp(.9rem,2.5vw,1.1rem);text-align:center}.inputText input[type=input]{padding:8px 12px;border:2px solid #666;border-radius:5px;font-size:clamp(.8rem,2vw,1rem);background-color:#333;color:white;width:200px;max-width:80vw}.inputText input[type=button]{padding:8px 16px;background-color:#666;color:white;border:none;border-radius:5px;cursor:pointer;font-size:clamp(.8rem,2vw,1rem);transition:background-color .2s}.inputText input[type=button]:hover{background-color:#888}.leftSide,.rightSide{flex-direction:column;min-width:300px;max-width:400px}.everything,.leftSide,.rightSide{display:flex;align-items:center;justify-content:center;padding:20px}.everything{flex-direction:row;width:100%;max-width:1200px;min-height:100vh;gap:20px}.list{border:5px solid maroon;border-radius:30px;display:flex;flex-direction:column;height:300px;width:100%;max-width:360px;min-width:280px;overflow:auto;padding:15px;background-color:rgba(255,255,255,.1)}.listTitle{display:flex;font-family:Arial Black,sans-serif;font-size:clamp(1rem,2.5vw,1.25rem);justify-content:left;margin-bottom:15px;color:white;font-weight:700}.listItems{background-color:transparent;border:none;cursor:pointer;font-family:Arial,sans-serif;font-size:clamp(.9rem,2vw,1rem);outline:0;padding:8px 12px;color:white;text-align:left;width:100%;border-radius:5px;transition:background-color .2s}.listItems:hover{background-color:rgba(255,255,255,.1)}.smallText{color:maroon;font-size:clamp(.7rem,1.5vw,.9rem);margin-top:10px;text-align:center;font-weight:700}@media (max-width:768px){.everything{flex-direction:column;padding:10px;gap:15px}.leftSide,.rightSide{min-width:100%;max-width:100%;padding:10px}.list{height:250px;max-width:100%}.title h1{font-size:1.8rem}.inputText input[type=input]{width:100%;max-width:250px}}@media (max-width:480px){.everything{padding:5px}.title h1{font-size:1.5rem}.list{height:200px;padding:10px}.listTitle{font-size:1rem}.listItems{font-size:.9rem;padding:6px 8px}}@media (max-height:600px){.everything{min-height:100vh;padding:10px}.list{height:200px}}