*{margin:0;padding:0}body{font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif}body{background:#455d58}.container{background:#455d58;color:#fff;height:33.34em;width:70%;margin:0 auto}.start{text-align:center;display:flex;flex-direction:column;gap:12px;padding:10px 0 0}.first-part{display:flex;flex-direction:column;gap:12px}.input-fields{display:flex;flex-direction:column;align-items:center;gap:12px}.main-input{display:flex;gap:8px;width:42em}.input-fields input{font-size:16px;height:2.6em;width:40em;padding:0 18px;border:1px solid grey;border-radius:4px;outline:none}.input-fields button{font-size:16px;height:2.6em;width:8em;padding:0 18px;border:1px solid grey;border-radius:4px;outline:none;cursor:pointer;position:relative;transition:all .3s ease-in-out}.second-part{background:#fff;width:74%;border:none;border-radius:8px;margin:10px auto;padding:10px}.second-part h2{color:#2f4f4f;text-align:center;padding:0 0 10px}.content{width:90%;margin:0 auto;color:#000}.content ul{list-style:none;font-size:16px;display:flex;flex-direction:column;gap:6px}.contents{display:flex;justify-content:space-between;align-items:center;padding:8px 4px;gap:18px;background:#ececec;border:1px solid rgba(128,128,128,.648);border-radius:6px}.contents div{width:100%;display:flex;align-items:center;justify-content:center}.control-btns{display:flex;gap:8px}.control-btns button:last-child{font-size:12px;height:2.6em;padding:0 18px;border:1px solid grey;background:#d34a4a;color:#fff;border-radius:4px;outline:none;cursor:pointer;position:relative;transition:all .2s ease-in-out}.control-btns button:last-child:hover{background:#993131}@media (max-width: 768px){.container{width:90%;height:auto}.main-input{flex-direction:row;width:100%}.input-fields input{width:95%}.input-fields button{width:100%}.second-part{width:97%}.contents{flex-direction:row;gap:12px}}@media (max-width: 480px){.main-input{flex-direction:row;width:100%}.input-fields input{width:90%}.input-fields button{width:100%}.contents{flex-direction:column;gap:12px}.second-part{width:94%}}@media (max-width: 320px){.main-input{flex-direction:column;width:100%}.input-fields input,.input-fields button{width:100%}.contents{flex-direction:column;gap:12px}.second-part{width:94%}}.navbar{height:4em;background:#3f5651;color:#fff;display:flex;justify-content:start;align-items:center;padding:0 24px;position:sticky;z-index:100;top:0}.logo h2{cursor:pointer}@media (max-width: 768px){.navbar{justify-content:center}}