@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@300;400;600;700&display=swap');
:root{--teal:#0f879d;--dark:#0b5967;--light:#d4edfc;--danger:#f08080}*{box-sizing:border-box}body{margin:0;font-family:Nunito,Arial,sans-serif;color:#454545;background:#fafafa}.site-header{height:80px;background:var(--teal);color:#fff}.header-content,.wrapper{width:min(1100px,80%);margin:auto}.header-content{height:100%;display:flex;align-items:center;gap:15px}.logo{width:50px;height:50px;border-radius:50%;background:#fff;color:var(--teal);display:grid;place-items:center;font-size:26px;font-weight:700}h1{font-weight:300;margin:0}.display-link{margin-left:auto;color:#fff}.wrapper{padding:35px 0}.success{padding:12px 18px;background:#d9f3e3;border-radius:8px}.add-button,.delete-button,.submit-button{border:0;cursor:pointer;font:inherit;border-radius:9px;transition:.25s}.add-button{margin:20px 0;background:var(--light);color:var(--dark);padding:11px 20px}.add-button:hover{background:#ffee9f}.form-panel{display:grid;grid-template-rows:0fr;transition:grid-template-rows .25s}.form-panel>form{overflow:hidden}.form-panel.open{grid-template-rows:1fr}fieldset{border:1px solid #eee;border-radius:8px;padding:28px;margin-bottom:35px}legend{color:var(--dark);font-size:20px}.field{display:grid;grid-template-columns:120px minmax(180px,1fr);gap:10px;margin:13px 0;align-items:center}.field input,.field select{padding:10px;border:1px solid #ccc;border-radius:5px;font:inherit}.field span{grid-column:2;color:#b42318}.validation{color:#b42318}.submit-button{margin-left:130px;padding:11px 20px;background:var(--teal);color:#fff}.meeting-card{background:#fff;border-radius:12px;padding:40px 7%;box-shadow:0 0 35px #ddd}.meeting-card h2{color:var(--dark)}.meeting-head,.meeting-row{display:grid;grid-template-columns:2.5fr 1fr 1.2fr auto;gap:20px;align-items:center}.meeting-head{font-size:12px;color:#858585;text-decoration:underline;padding-bottom:8px}.meeting-row{padding:20px 0;border-bottom:1px dashed var(--dark)}.subject{font-size:19px;font-weight:600;color:var(--dark)}.room{font-style:italic}.time{font-weight:700}.delete-button{padding:9px 16px;background:var(--danger);color:#213}.delete-button:hover{background:#ffee9f}.empty{padding:25px 0}.display-page{margin:40px 60px}.display-page h1{display:inline-block;background:#00b9ba;color:#fff;padding:15px 80px 15px 60px;margin-left:-60px;border-radius:0 100px 100px 0;font-size:35px}.display-head,.display-row{display:grid;grid-template-columns:45% 30% 25%;gap:15px}.display-head{clear:both;padding:35px 20px 10px;color:#858585;font-style:italic}.display-row{padding:25px 20px;border-radius:15px;font-size:28px}.display-row:nth-of-type(even){background:#eee}.display-time{font-size:32px;font-weight:700}@media(max-width:750px){.header-content,.wrapper{width:92%}.meeting-head{display:none}.meeting-row{grid-template-columns:1fr}.field{grid-template-columns:1fr}.field span{grid-column:1}.submit-button{margin-left:0}.display-page{margin:20px}.display-head{display:none}.display-row{grid-template-columns:1fr}.display-link{display:none}}
.subject, .subjecttitle {
    float: left !important;
    width: 45% !important;
}
.room, .roomtitle {
    float: left !important;
    width: 20% !important;
}
.time, .timetitle {
    float: left !important;
    width: 20% !important;
}
.delete-button {
    margin-top: -10px;
}
.meeting-head, .meeting-row {
    display: block;
    vertical-align: auto;
}