section { padding-bottom: 10vh; }
section .links { display: none; position: relative; margin-top: 3vh; margin-bottom: 3vh; gap: 0.75rem; z-index: 0; }
section .links li span { position: relative; top: 0; }

@media (max-width: 640px) { section .links { display: inline-flex; }
  header .links { display: none; } }
section.hero { padding-bottom: 22vh; }
section.hero img { border-radius: 100%; height: 50vh; object-fit: cover; z-index: 10; position: relative; max-width: 90vw; max-height: 90vw; aspect-ratio: 1 / 1; }
section.hero h1 { width: auto; font-size: 7vh; background: linear-gradient(225deg, var(--fg), var(--acc)); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; display: table; text-wrap: nowrap; z-index: 10; position: relative; margin: 0; margin-top: 5vh; }

section.blog h3 { margin: 0; color: var(--acc); }
section.blog span { margin: 0; color: var(--alt); }

.hoverbox { border: 1px solid var(--alt); border-radius: 1rem; padding: 1rem; transition: box-shadow 1s; background: var(--bg); }
.hoverbox:hover { box-shadow: 2px 2px 20px var(--fg); }

section.tech div { position: absolute; overflow: scroll; left: 0; width: 100vw; margin-top: 5vh; }
section.tech h1 { padding-bottom: 15vh; text-align: center; }
section.tech p { margin: 0; font-size: max(5vw, 10vh); color: var(--acc); width: max-content; background: linear-gradient(180deg, var(--fg), var(--acc)); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; }

section.education { background: linear-gradient(var(--alt), var(--alt)) no-repeat center/1px calc(100% - 10rem); z-index: -20; }
section.education ul.selector { text-align: center; text-decoration: none; list-style: none; display: flex; padding-left: 0; width: min-content; margin-left: auto; margin-right: auto; margin-bottom: 5vh; border-radius: 5rem; font-size: 1.1rem; font-weight: bold; border: 2px solid var(--acc); overflow: clip; }
section.education ul.selector li:first-of-type { border-left: none; }
section.education ul.selector li:last-of-type { border-right: none; }
section.education ul.selector li { padding: 0.5rem; border-left: 1px solid var(--acc); border-right: 1px solid var(--acc); display: flex; align-items: center; gap: 0.5rem; color: var(--acc); cursor: pointer; transition: 0.5s all; }
section.education ul.selector li ion-icon { transition: 0.5s all; color: var(--acc); }
section.education ul.selector li:hover { color: var(--fg); }
section.education ul.selector li:hover ion-icon { color: var(--fg); }
section.education ul.selector li.selected { background: var(--acc); color: white; }
section.education ul.selector li.selected ion-icon { color: white; }
section.education h1 { margin-bottom: 4rem; }
section.education > a { text-decoration: none; color: var(--fg); display: flex; }
section.education > a:has(.right) { justify-content: flex-end; }
section.education i { margin-right: 0.25rem; }
section.education .hoverbox { --hb-width: min(max(15vw, 20vh), 40vw); overflow: clip; width: var(--hb-width); padding: 0; display: block; }
section.education .hoverbox hr { width: calc(35% - 2px - var(--hb-width)); margin-left: min(max(15vw, 20vh), 40vw); float: left; transform: translateY(-10cqh); position: absolute; color: var(--alt); border: 1px dashed var(--alt); overflow: visible; }
@media (max-width: 820px) { section.education .hoverbox hr { width: calc(45% - 2px - var(--hb-width)); } }
section.education .hoverbox.left hr:after { bottom: -10px; right: -11px; }
section.education .hoverbox.left > span { position: absolute; margin-left: 35%; transform: translate(20px, -10.25cqh); }
@media (max-width: 820px) { section.education .hoverbox.left > span { margin-left: 45%; } }
section.education .hoverbox.right { float: right; clear: left; }
section.education .hoverbox.right hr { transform: translate(calc(-100% - var(--hb-width)), -10cqh); }
section.education .hoverbox.right hr:before { bottom: -10px; left: -11px; }
section.education .hoverbox.right > span { position: absolute; margin-left: calc(max(15vw, 20vh) - 35vw - 20px); transform: translate(-100%, -10.25cqh); }
@media (max-width: 820px) { section.education .hoverbox.right > span { transform: translate(calc(-100% + max(15vw, 20vh) - 45vw - 20px), -10.25cqh); } }
section.education .hoverbox.left hr:after, section.education .hoverbox.right hr:before { content: ""; width: 20px; height: 20px; position: absolute; border-radius: 50%; border: 1px solid var(--alt); background-color: var(--bg); display: block; }
section.education .hoverbox .cover { width: 100%; object-fit: cover; height: 5rem; transition: transform 1s; }
section.education .hoverbox .cover.sm { height: 2.5rem; }
section.education .hoverbox:hover .cover { transform: scale(1.1); }
section.education .hoverbox .icon { position: relative; transform: translateY(-50%); width: 3rem; height: 3rem; object-fit: contain; border-radius: 0.75rem; margin-left: 1rem; background: white; border: 1px solid var(--alt); }
section.education .hoverbox .content { width: 100%; margin: 0; margin-top: -2rem; padding: 1rem; box-sizing: border-box; }
section.education .hoverbox .content h1 { font-size: 1em; margin: 0; }
section.education .hoverbox .content span { color: var(--alt); }
section.education .modal { position: fixed; min-height: 100vh; width: 100vw; top: 0; left: 0; display: flex; z-index: 21; }
section.education .modal .overlay { width: 100%; height: 100%; position: absolute; background-color: var(--fg); left: 0; z-index: 20; opacity: 0.4; }
section.education .modal .close { position: fixed; top: 1rem; right: 1rem; font-weight: 900; font-size: 2rem; line-height: 0.5; text-decoration: none; color: var(--fg); z-index: 100; }
section.education .modal .leftarrow { left: 1rem; }
section.education .modal .rightarrow { right: 1rem; }
section.education .modal .leftarrow, section.education .modal .rightarrow { position: fixed; font-weight: 900; font-size: 2rem; cursor: pointer; top: calc(25vh - 1rem); z-index: 100; }
section.education .modal .mcontent { color: var(--fg); transition: transform 1s; background: var(--bg); width: 50%; position: relative; max-height: 95vh; margin-left: auto; margin-right: auto; margin-top: auto; border-radius: 1rem 1rem 0 0; z-index: 22; border: 1px solid var(--alt); border-bottom: none; overflow: scroll; }
@media (max-width: 820px) { section.education .modal .mcontent { width: 90%; } }
section.education .modal .slider { height: 50vh; width: 100%; }
section.education .modal .slider .slider-content { display: flex; flex-flow: row nowrap; position: absolute; top: 0; left: 0; width: 100%; height: 50vh; overflow-x: scroll; scroll-snap-type: x mandatory !important; }
section.education .modal .slider .slider-content > * { scroll-snap-align: center; flex: none; }
section.education .modal .slider .slider-content img { width: 100%; height: 100%; object-fit: cover; }
section.education .modal .slider .slider-content img.contain { object-fit: contain; }
section.education .modal .slider .slider-content iframe { width: 100%; height: 100%; display: block; }
section.education .modal .icon { position: relative; transform: translateY(-50%); width: 9rem; height: 9rem; object-fit: contain; border-radius: 2rem; margin-left: 3rem; background: white; border: 1px solid var(--alt); }
@media (max-width: 820px) { section.education .modal .icon { width: 5rem; height: 5rem; border-radius: 1rem; margin-left: 1rem; } }
section.education .modal .head { margin-top: -8.75rem; margin-left: 13rem; margin-right: 3rem; }
section.education .modal .head h1 { margin: 0; }
section.education .modal .head span { color: var(--alt); }
@media (max-width: 820px) { section.education .modal .head { margin-top: -5rem; margin-left: 6.5rem; margin-right: 1rem; }
  section.education .modal .head h1 { font-size: 1.2rem; } }
section.education .modal .cont { margin: 3rem; }
@media (max-width: 820px) { section.education .modal .cont { margin: 1rem; } }
section.education .modal:target .overlay { opacity: 0; animation: 500ms linear fadeIn forwards; }
section.education .modal:target .mcontent { transform: translateY(100vh); animation: 500ms cubic-bezier(0.08, 0.82, 0.17, 1) slideUp forwards; }
section.education .modal:not(:target) { visibility: hidden; transition-delay: 500ms; transition-property: visibility; }
section.education .modal:not(:target) .overlay { opacity: 0.4; animation: 500ms linear fadeOut forwards; }
section.education .modal:not(:target) .mcontent { transform: translateY(0); animation: 500ms cubic-bezier(0.6, 0.04, 0.98, 0.34) slideDown forwards; }

.mcontent:not(:has(.slider)) .icon { transform: none !important; margin-top: 3rem; }
@media (max-width: 820px) { .mcontent:not(:has(.slider)) .icon { margin-top: 1rem !important; } }
.mcontent:not(:has(.slider)) .cont { margin-top: 5rem !important; }
@media (max-width: 820px) { .mcontent:not(:has(.slider)) .cont { margin-top: 2rem !important; } }

.mcontent:not(:has(img.icon)) .head { margin-left: 3rem; }
@media (max-width: 820px) { .mcontent:not(:has(img.icon)) .head { margin-left: 1rem; } }

@keyframes fadeOut { from { opacity: 0.4; }
  to { opacity: 0; } }
@keyframes fadeIn { from { opacity: 0; }
  to { opacity: 0.4; } }
@keyframes slideUp { from { transform: translateY(100vh); }
  to { transform: translateY(0); } }
@keyframes slideDown { from { transform: translateY(0); }
  to { transform: translateY(100vh); } }