body{margin:0}:root{--htextOne: #000000;--htextTwo: #ffffff;--hbackgroundOne: #f3f4f6;--hbackgroundTwo: #ffffff;--accent: #2963EA;--textOne: #ffffff;--textTwo: #000000;--backgroundOne: #3a3a3a;--backgroundTwo: #1f1f1f}.background{display:flex;background-color:var(--backgroundOne)}.layout{background-color:var(--backgroundOne);display:grid;grid-template-columns:1fr 7fr;grid-template-rows:1fr 5fr;height:100vh;overflow:hidden}.loginPage{display:flex;height:100vh;width:100vw;justify-content:center;align-items:center}.loginPage form{display:flex;flex-direction:column;justify-items:center;background-color:var(--backgroundTwo);padding:100px;border-radius:10px;gap:15px}.loginPage img{width:30vw}.sidebar{grid-column:1;display:flex;align-items:center;justify-content:space-between;flex-direction:column;background-color:var(--backgroundTwo);color:var(--textOne);height:100vh}.sidebar img{display:flex;align-items:center;width:10vw}.spreadList{display:flex;flex-direction:column;gap:40px;width:12vw;align-items:center}.listItem{color:var(--textOne);background-color:var(--accent);text-decoration:none;padding:8px;border-radius:8px;width:80%}.listItem:hover{background-color:var(--backgroundOne);color:var(--textOne)}.header{grid-row:1;grid-column:2;border-left:2px solid var(--backgroundOne);font-weight:700;align-items:center;padding:5px;display:grid;background-color:var(--backgroundTwo);color:var(--textOne)}.page{display:flex;grid-column:2;flex-direction:column}.content{padding:20px;overflow:auto;align-content:start;justify-items:center;color:var(--textOne)}.content form{justify-content:center;align-content:center;flex-direction:column;width:16vw;gap:10px;display:flex;padding:20px;border-radius:10px;background-color:var(--backgroundTwo);color:var(--textOne)}.userList{display:grid;grid-auto-rows:minmax(80px,auto);row-gap:12px;column-gap:12px}.userCard{color:var(--textOne);background-color:var(--backgroundTwo);display:grid;grid-template-columns:2fr 2fr 1fr 1fr;align-items:center;padding:15px;border-radius:10px}.startCard{justify-self:start;background-color:var(--accent);padding:10px;border-radius:8px}.centerCard{justify-self:center;background-color:var(--backgroundOne);padding:10px;border-radius:8px}.endCard{justify-self:end}.mediaBox{display:grid;row-gap:10px;grid-template-columns:1fr 1fr 1fr 1fr 1fr;column-gap:10px;grid-auto-rows:minmax(80px,auto);padding-bottom:10px}.preUpload{display:grid;background-color:var(--backgroundTwo);padding:10px;border-radius:8px;grid-template-columns:3fr 1fr}.media{display:grid}