body,h1,h2,h3,p,ul,li{margin:0;padding:0}.navbar{background-color:#181719;padding:2vw;position:flex;flex-direction:column;border-radius:10px;width:7vw}.navbar ul li:hover{text-shadow:.5vh 1vh 1vh #8528e2}.navbar ul{list-style-type:none;padding:2vh;display:flex;flex-direction:column}li{font-size:1vw}ul.dropdown-menu{display:none;position:absolute;top:100%;left:0;background-color:#a61212;padding:2vw}.log-out{bottom:3%;position:absolute}body{font-family:Helvetica,sans-serif;display:flex;justify-content:stretch;align-items:stretch;height:100vh;margin:0;padding:0}img{border:0px;border-color:#8528e2}ul{list-style-type:none;padding:0;display:flex;flex-direction:column;gap:15px}li{margin-right:15px}a{text-decoration:none;color:#fff;font-weight:700}a.active{color:#ff0}ul.dropdown,li.dropdown-item{position:relative}ul.dropdown-menu{display:none;position:absolute;top:100%;left:0;background-color:#333;padding:10px}li:hover>ul.dropdown-menu{display:block}div#root{padding:0;margin:0;background-color:#000;width:100%}.embed{position:absolute;text-align:justify;display:flex;align-items:center;justify-content:center;height:80vh;top:10%;right:5%;width:35vw}.embed iframe{width:100%;height:100%}#row1{position:absolute;width:89vw;height:5vh;background-color:#0e0e0e}.research{position:absolute;text-align:left;top:100%;left:20%;color:#e3e7f9}#box1{width:50vw}.research-interest{position:absolute;top:63%;left:34.5%;transform:translate(-50%,-50%);width:39.2vw;height:8vh;background-color:#121212;border-radius:15px}.keywords_list{position:absolute;top:5%;font-weight:700;left:3%;display:flex;font-size:1.2vw;color:#eaedf8}.select_keywords{position:absolute;top:50%;font-weight:700;left:3%;display:flex;font-size:.6vw;color:#eaedf8}#box2{width:80vw;height:200px;display:flex;left:20%}#box3{flex-grow:1;display:flex;flex-direction:column}.inner-box{position:absolute;top:35%;left:22%;transform:translate(-50%,-50%);width:14vw;height:33vh;background-color:#121212;border-radius:1vw;overflow-x:hidden;overflow-y:hidden}.also-inner-box{position:absolute;top:35%;right:35%;transform:translate(-50%,-50%);width:22vw;height:33vh;background-color:#121212;border-radius:1vw}.research:hover{filter:drop-shadow(0 0 1em hsla(0,0%,100%,.667))}.editbutton{background-color:#121212;color:#efe7e7;height:2vh;width:4vw;top:49%;cursor:pointer;font-size:1vh;font:bold;position:relative;right:90%;display:inline-block}.profheading{position:absolute;top:8%;left:42%;display:flex;color:#dadde9}.Name{position:absolute;top:50%;font-style:Sans-Serif;left:22%;font-weight:bolder;display:flex;font-size:1vw;text-align:start;color:#eaedf8}.Description{position:absolute;top:5%;font-style:Sans-Serif;font-weight:700;left:5%;display:flex;font-size:2vw;color:#eaedf8}.Description_Text{position:absolute;font-style:Sans-Serif;top:25%;font-weight:400;left:5%;display:flex;font-size:1vw;color:#eaedf8}.Other_Details{position:absolute;top:55%;left:4%;font-style:Sans-Serif;display:flex;text-align:start;font-size:1vw;color:#eaedf8}.imagecrop{width:auto;height:12vh;border-radius:50%;overflow:hidden;position:absolute;bottom:55%;left:30%;display:flex}.text{width:100vw;height:100vh;overflow-x:hidden}.imagecrop img{width:100%;height:auto;position:relative;display:block}.profpic{height:6em;padding:1.5em;will-change:filter;transition:filter .3s}.logo:hover{filter:drop-shadow(0 0 2em #646cffaa)}.logo.react:hover{filter:drop-shadow(0 0 2em #61dafbaa)}body{font-family:Helvetica,sans-serif;color:#eaedf8}.container{margin:0 auto;padding:2rem;text-align:center}.heading{margin-bottom:2rem;color:#eaedf8}.post-form{max-width:800px;margin:0 auto;display:flex;flex-wrap:wrap;justify-content:space-between;color:#eaedf8}.form-group{width:calc(48% - 1rem);margin-bottom:1.5rem;color:#f4f4fa}.form-group.description-group{width:100%}.form-group.description-group textarea{width:100%;padding:.375rem .75rem;font-size:1rem;border-radius:.25rem;border:1px solid #e9edf1;margin-bottom:1rem;resize:none}.form-group label{display:block;font-weight:700;margin-bottom:.5rem;color:#f6f3f3}.form-group input,.form-group textarea{width:100%;padding:.375rem .75rem;font-size:1rem;border-radius:.25rem;border:1px solid #0a0a0a;margin-bottom:1rem;color:#090909}.form-check-input{margin-right:.5rem}.btn-success{width:100%;padding:.5rem 1rem;font-size:1rem;font-weight:600;line-height:1.5;color:#f7f2f2;background-color:#28a745;border-radius:.25rem;cursor:pointer}body{font-family:Helvetica,"Sans Serif";justify-content:stretch;height:100vh;margin:0;padding:0;max-width:200%;background-color:#c5b2c5}.title{font-weight:bolder;color:#f5f5f5;width:100%;padding:10%;margin:auto auto auto 110%;text-align:center;font:Helvetica}.uciLogo{margin:auto;padding:30%;position:absolute;bottom:15%;left:16%;text-align:center}.buttonSignIn{position:absolute;margin:5%;left:40%;background-color:#000;color:#fff;padding:10px 15px;font-size:16px;border:none;cursor:pointer;border-radius:5px;top:25%;font-family:Georgia,serif}.buttonLogOut{position:relative;margin:5%;left:140%;background-color:#000;color:#fff;padding:10px 15px;font-size:16px;border:none;cursor:pointer;border-radius:5px;font-family:Georgia,serif}.buttonLogOut:hover,.buttonSignIn:hover{color:#5a0aaa;box-shadow:0 0 10px #5a0aaa}.typing-container{display:flex;justify-content:center;align-items:center}.typewrite{position:absolute;padding:5%;margin-left:auto;margin-right:auto;font-size:37px;font-family:sans-serif;color:#5a0aaa;top:40%;text-shadow:0 0 20px #5a0aaa}.search-bar{width:80%;padding:1.2%;border:1px solid #444242;border-radius:5x;background-color:#434047;color:#fff;height:3%;position:absolute;top:0%;margin-bottom:20px}.dashboard-container{display:flex;max-width:100vw;width:100vw;height:100vh;max-height:100vh}.left-column{flex:1;overflow-y:auto;overflow-x:auto;padding:1vw;background-color:#434047}.right-column{flex:3;padding:1vw;color:#fff;background-color:#101011;display:flex;flex-direction:column;align-items:center;justify-content:center}.content-info{opacity:0;animation:fadeIn .5s ease-in-out forwards;height:70vh;width:50vw}.content-info h2{font-size:5vh;font-weight:bolder;color:#fff;margin-bottom:10px}.content-info p{font-size:16px;color:#ccc;margin-bottom:8px}.stuffies{font-weight:bolder;font-size:medium}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.left-column li{margin-top:2vh;font-weight:bolder;padding-block:1vw;width:20vw;color:#fff;cursor:pointer;transition:background-color .3s ease}.left-column li:hover{background-color:#f1f5c0}.Titletile{font-weight:bolder}@media (max-width: 100%){.dashboard-container{flex-direction:column}.left-column,.right-column{max-width:100%;width:100%}}<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Your Page Title</title> <style> html{margin:0;padding:0}body{margin:0;padding:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;line-height:1.5;color:#fdf9f9}#root{display:flex;height:100%;width:100%}</style> </head>{}