:root{font-family:Arial,Helvetica,sans-serif}body{margin:0;overflow-x:hidden}h1{font-size:40px;margin-bottom:0;transition:all .3s ease;color:#000;text-decoration:none;text-align:center}h2{font-size:20px;text-align:center}.section-header{padding-top:30px;padding-bottom:20px;font-size:25px;font-weight:700;width:100%;text-align:center}.subsection-header{text-align:center;padding-top:20px;padding-bottom:20px;font-size:25px;font-weight:700}.subsection-header.title{font-size:35px;font-weight:bolder}.top-link{font-size:15px;font-weight:700;transition:all .3s ease;padding-bottom:10px;text-align:center}.main-div{display:flex;flex-direction:column;align-items:center;min-height:100vh}.main-grid{width:90%;display:flex;flex-direction:column}.nav-and-content{width:100%;display:flex;flex-direction:row;gap:0;margin:0;padding:0}.other-margin{position:relative;width:2%;min-height:1fr;background-color:#e6e6e6}.section-flexbox{width:100%;display:flex;flex-direction:column;align-items:center;row-gap:10px}a{text-decoration:unset;color:unset}.blue-link{color:#00f;text-decoration:underline}.padding-div{height:30px}.padding-div-2{height:20px}.red-text{color:red;padding-bottom:0;margin-bottom:0}.background-gray{width:100%;background-color:#e6e6e6}.flex-center-column{display:flex;flex-direction:column;align-items:center;width:100%}.footer{background-color:#e6e6e6;flex:1;width:100%}.about-me-img{width:30%}@media screen and (max-width: 1125px){.main-grid{width:85%}.about-me-img{width:40%}}@media screen and (max-width: 768px){.section-header{width:90%;text-align:center}.about-me-img{width:50%}.nav-and-content{flex-direction:column;row-gap:0px}.main-grid{width:100%}h1{margin-top:10px}.other-margin{width:0}}.ui-video-container{width:90%;display:flex;flex-direction:row;justify-content:space-around}.ui-video-container video{aspect-ratio:580 / 330}.ui-video-container img{object-fit:contain}.content-block{display:flex;justify-content:center;font-size:20px}.content-block li{margin-bottom:20px}.commentary-content-block{aspect-ratio:580 / 330;width:35%;flex-direction:column}.double-commentary-content-block{width:90%;flex-direction:row;font-size:20px}.commentary-video{width:55%}.double-commentary-video{width:47%}.double-commentary-img1{width:40%}.double-commentary-img2{width:55%}@media screen and (max-width: 768px){.double-commentary-content-block{flex-direction:column}.double-commentary-video{margin-bottom:10px}.ui-video-container{flex-direction:column;align-items:center}.commentary-content-block{width:90%;aspect-ratio:unset}.commentary-video,.double-commentary-video{width:90%}.double-commentary-img1{width:60%;padding-bottom:10px}.double-commentary-img2{width:100%}}.main-div{align-items:baseline}.navbar-grid{padding-top:0%;padding-right:2%;padding-bottom:30px;display:flex;flex-direction:column;gap:1rem;justify-content:left;align-items:stretch;width:15%}.grid-item-wrapper{height:100px}.grid-item{position:relative;width:100%;height:100%;transition:all .3s ease;border-radius:20px}.grid-item.grid-item.unselected{transition:all .3s ease}.grid-item.selected{box-shadow:0 10px 25px #0000004d;cursor:pointer;border-radius:10px}.grid-item img{position:relative;width:100%;height:100%;object-fit:cover;z-index:0;border-radius:20px}.img-top{object-position:top}.grid-item .overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:#000000b3;opacity:0;z-index:1;border-radius:20px}.grid-item.selected .overlay{opacity:1}.grid-item .title{position:absolute;top:0;left:0;width:100%;height:100%;align-content:center;color:#fff;font-size:1.5rem;font-weight:700;text-align:center;opacity:0;transition:all .3s ease;z-index:2}@media screen and (max-width: 1125px){.grid-item .title{font-size:1rem}}@media screen and (max-width: 768px){.grid-item .title{font-size:1.5rem}}@media screen and (max-width: 440px){.grid-item .title{font-size:1rem}}.grid-item.selected .title{opacity:1}.grid-item:hover{transform:translate(10px);transform-origin:center;cursor:pointer;border-radius:10px}.grid-item:hover img{border-radius:10px}.grid-item:hover .overlay{opacity:1;border-radius:10px}.grid-item:hover .title{opacity:1}@media screen and (max-width: 768px){.navbar-grid{width:100%;padding:0 30px 20px;box-sizing:border-box;display:grid;grid-template-columns:repeat(2,1fr);gap:10px;align-items:center;justify-content:center}.grid-item:hover{transform:translateY(5px);transform-origin:center;box-shadow:0 10px 25px #0000004d;cursor:pointer;border-radius:10px}.grid-item-wrapper{height:70px;width:100%}}