@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap");
@import "tailwindcss";

/*! ---------------GENERAL STYLES--------------- !*/

* {
  font-family: "Inter", sans-serif;
}

body {
  scroll-behavior: smooth;
}

:root {
  --accent-main: #e23636;
  --accent-dark: #b91c1c;
  --bg-primary: #0a0a0a;
  --bg-secondary: #121212;
  --um-blue: #205a95;
  --um-maize: #ffcb05;
}

/* Material You card hover */

.card-hover:hover {
}

.fade-in {
  animation: fadeIn 0.8s ease-in;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.slide-in-left {
  animation: slideInLeft 0.8s ease-out;
}

@keyframes slideInLeft {
  from {
    opacity: 0;
    transform: translateX(-50px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.slide-in-right {
  animation: slideInRight 0.8s ease-out;
}

@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(50px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Colors */
.bg-primary {
  background-color: var(--bg-primary) !important;
}

.bg-secondary {
  background-color: var(--bg-secondary) !important;
}

.text-accent {
  color: var(--md-sys-color-primary);
}

/* Buttons */
.btn {
  background-color: var(--md-sys-color-primary);
  color: #fff;
}

.btn:hover {
  background-color: var(--md-sys-color-primary);
}

/*! ------------------NAVIGATION------------------ !*/

.nav-link {
  position: relative;
  font-weight: 600;
}

#mobile-menu {
  max-height: 0;
  overflow: hidden;
  transition:
    max-height 0.3s ease-out,
    opacity 0.3s ease-out;
  opacity: 0;
}

#mobile-menu.menu-open {
  max-height: 500px;
  opacity: 1;
  transition:
    max-height 0.4s ease-in,
    opacity 0.4s ease-in;
}

#mobile-menu .flex {
  animation: slideDownFade 0.4s ease-out;
}

@keyframes slideDownFade {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.nav-link::after {
  content: "";
  position: absolute;
  bottom: -5px;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--md-sys-color-primary);
  transition: width 0.3s ease;
}

.nav-link:hover::after {
  width: 100%;
}

/*! -------------------MAIN PAGE------------------- !*/

.text-um-blue {
  color: var(--um-blue);
}

.text-um-maize {
  color: var(--um-maize);
}

/*! -------------------ABOUT PAGE------------------- !*/

.tab-button {
  transition: all 0.3s ease;
}

.tab-button.active {
  color: var(--md-sys-color-primary);
  border-bottom: 2px solid var(--md-sys-color-primary);
}

/*! ------------------PROJECTS PAGE------------------ !*/

.project-card {
  position: relative;
  overflow: visible !important;
  aspect-ratio: 1 / 1;
  transition:
    background-color 0.4s ease,
    box-shadow 0.4s ease;
}
.project-card:hover {
  background-color: transparent !important;
  box-shadow: none !important;
}
.project-card > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
  transition: all 0.4s cubic-bezier(0.2, 0, 0, 1);
}
.project-card:hover > img {
  transform: scale(0.5);
  opacity: 0;
}
.project-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  color: var(--md-sys-color-on-primary);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 24px;
  pointer-events: none;
  z-index: 10;
  opacity: 0;
  transition: opacity 0.4s ease;
}
.project-overlay::before {
  content: "";
  position: absolute;
  top: -25%;
  left: -25%;
  right: -25%;
  bottom: -25%;
  background: var(--md-sys-color-primary);
  z-index: -1;
  opacity: 0;
  transform: scale(0.5);
  transition: all 0.4s cubic-bezier(0.2, 0, 0, 1);
  -webkit-mask-image: var(--m3-mask);
  mask-image: var(--m3-mask);
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}
.project-card:hover .project-overlay {
  opacity: 1;
  pointer-events: auto;
}
.project-card:hover .project-overlay::before {
  opacity: 1;
  transform: scale(0.75);
}

/* Official Material 3 Expressive Shapes generated via material-shapes-ts */
.m3-shape-sunny {
  --m3-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201%201%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M0.99691%200.5C0.99691%200.51795%200.99072%200.53589%200.97834%200.55042C0.95303%200.58011%200.92773%200.6098%200.90242%200.6395C0.89181%200.65195%200.8854%200.66742%200.8841%200.68373C0.881%200.72262%200.8779%200.76151%200.87479%200.8004C0.87176%200.83845%200.84154%200.86866%200.80349%200.8717C0.7646%200.8748%200.72571%200.8779%200.68683%200.88101C0.67052%200.88231%200.65504%200.88872%200.64259%200.89933C0.6129%200.92463%200.58321%200.94994%200.55351%200.97524C0.52446%201%200.48173%201%200.45268%200.97524C0.42298%200.94994%200.39329%200.92463%200.3636%200.89933C0.35115%200.88872%200.33567%200.88231%200.31936%200.88101C0.28048%200.8779%200.24159%200.8748%200.2027%200.8717C0.16465%200.86866%200.13443%200.83845%200.1314%200.8004C0.12829%200.76151%200.12519%200.72262%200.12209%200.68373C0.12079%200.66742%200.11437%200.65195%200.10377%200.6395C0.07846%200.6098%200.05316%200.58011%200.02785%200.55042C0.00309%200.52137%200.00309%200.47863%200.02785%200.44958C0.05316%200.41989%200.07846%200.3902%200.10377%200.3605C0.11437%200.34805%200.12079%200.33258%200.12209%200.31627C0.12519%200.27738%200.12829%200.23849%200.1314%200.1996C0.13443%200.16155%200.16465%200.13134%200.2027%200.1283C0.24159%200.1252%200.28048%200.1221%200.31936%200.11899C0.33567%200.11769%200.35115%200.11128%200.3636%200.10067C0.39329%200.07537%200.42298%200.05006%200.45268%200.02476C0.48173%200%200.52446%200%200.55351%200.02476C0.58321%200.05006%200.6129%200.07537%200.64259%200.10067C0.65504%200.11128%200.67052%200.11769%200.68683%200.11899C0.72571%200.1221%200.7646%200.1252%200.80349%200.1283C0.84154%200.13134%200.87176%200.16155%200.87479%200.1996C0.8779%200.23849%200.881%200.27738%200.8841%200.31627C0.8854%200.33258%200.89181%200.34805%200.90242%200.3605C0.92773%200.3902%200.95303%200.41989%200.97834%200.44958C0.99072%200.46411%200.99691%200.48205%200.99691%200.5Z%22%20fill%3D%22black%22%2F%3E%3C%2Fsvg%3E");
}
.m3-shape-pentagon {
  --m3-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201%201%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M0.5%200.04284C0.53375%200.04284%200.56751%200.05304%200.59641%200.07343C0.70374%200.14917%200.81108%200.22491%200.91841%200.30066C0.9759%200.34122%201%200.41468%200.97772%200.48142C0.93726%200.60258%200.89681%200.72374%200.85636%200.84489C0.83397%200.91195%200.77121%200.95716%200.70052%200.95716C0.56684%200.95716%200.43316%200.95716%200.29948%200.95716C0.22879%200.95716%200.16603%200.91195%200.14364%200.84489C0.10319%200.72374%200.06274%200.60258%200.02228%200.48142C0%200.41468%200.0241%200.34122%200.08159%200.30066C0.18892%200.22491%200.29626%200.14917%200.40359%200.07343C0.43249%200.05304%200.46625%200.04284%200.5%200.04284Z%22%20fill%3D%22black%22%2F%3E%3C%2Fsvg%3E");
}
.m3-shape-gem {
  --m3-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201%201%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M0.49949%200.99998C0.49138%200.99997%200.48327%200.99954%200.47519%200.99871C0.43561%200.99463%200.39762%200.97722%200.32164%200.94239C0.26002%200.91415%200.19841%200.88591%200.13679%200.85767C0.05274%200.81914%200.00417%200.72981%200.01753%200.63832C0.03136%200.54361%200.0452%200.4489%200.05903%200.35418C0.06799%200.29284%200.10152%200.23779%200.15191%200.20168C0.2273%200.14764%200.3027%200.09361%200.37809%200.03958C0.41404%200.01381%200.45717%200%200.5014%200.00008C0.54562%200.00017%200.5887%200.01415%200.62455%200.04005C0.69974%200.09437%200.77492%200.14869%200.85011%200.20301C0.90036%200.23931%200.93368%200.2945%200.94241%200.35587C0.95588%200.45064%200.96935%200.5454%200.98282%200.64017C0.99583%200.7317%200.94692%200.82085%200.86272%200.85905C0.801%200.88706%200.73927%200.91507%200.67755%200.94307C0.60143%200.97761%200.56338%200.99487%200.52378%200.9988C0.5157%200.99961%200.50759%201%200.49949%200.99998Z%22%20fill%3D%22black%22%2F%3E%3C%2Fsvg%3E");
}
.m3-shape-cookie4sided {
  --m3-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201%201%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M0.87137%200.87078C0.81048%200.93176%200.71594%200.95913%200.62198%200.91859C0.60838%200.91272%200.59478%200.90686%200.58118%200.90099C0.52948%200.87868%200.47087%200.87873%200.41921%200.90112C0.40576%200.90695%200.3923%200.91278%200.37885%200.91861C0.19107%201%200.00049%200.80973%200.08157%200.62181C0.08744%200.60821%200.09331%200.59461%200.09918%200.58101C0.12148%200.52932%200.12143%200.4707%200.09904%200.41904C0.09321%200.40559%200.08738%200.39214%200.08155%200.37869C0.00016%200.19091%200.19043%200.00033%200.37835%200.08141C0.39195%200.08728%200.40555%200.09314%200.41915%200.09901C0.47084%200.12132%200.52946%200.12127%200.58112%200.09888C0.59457%200.09305%200.60802%200.08722%200.62147%200.08139C0.80926%200%200.99984%200.19027%200.91875%200.37819C0.91289%200.39179%200.90702%200.40539%200.90115%200.41899C0.87884%200.47068%200.87889%200.5293%200.90128%200.58096C0.90711%200.59441%200.91294%200.60786%200.91877%200.62131C0.95947%200.7152%200.93225%200.80979%200.87137%200.87078Z%22%20fill%3D%22black%22%2F%3E%3C%2Fsvg%3E");
}
.m3-shape-cookie6sided {
  --m3-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201%201%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M0.71652%200.8729C0.69965%200.88262%200.68396%200.89441%200.66983%200.90803C0.66933%200.90851%200.66883%200.90899%200.66833%200.90947C0.57443%201%200.42569%200.99987%200.33196%200.90917C0.30375%200.88188%200.26927%200.86194%200.23155%200.85109C0.23089%200.8509%200.23022%200.85071%200.22955%200.85051C0.1042%200.81446%200.02995%200.68558%200.06162%200.55906C0.07115%200.52098%200.07119%200.48115%200.06172%200.44306C0.06156%200.44239%200.06139%200.44172%200.06122%200.44104C0.02977%200.31446%200.10425%200.18571%200.22967%200.14988C0.2674%200.1391%200.30192%200.11922%200.33017%200.09197C0.33067%200.09149%200.33117%200.09101%200.33167%200.09053C0.42557%200%200.57431%200.00013%200.66804%200.09083C0.69625%200.11812%200.73073%200.13806%200.76845%200.14891C0.76911%200.1491%200.76978%200.14929%200.77045%200.14949C0.8958%200.18554%200.97005%200.31442%200.93838%200.44094C0.92885%200.47902%200.92881%200.51885%200.93828%200.55694C0.93844%200.55761%200.93861%200.55828%200.93878%200.55896C0.97023%200.68554%200.89575%200.81429%200.77033%200.85012C0.75146%200.85551%200.7334%200.86318%200.71652%200.8729Z%22%20fill%3D%22black%22%2F%3E%3C%2Fsvg%3E");
}
.m3-shape-clover4leaf {
  --m3-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201%201%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M0.5%200.09813C0.50483%200.09442%200.50965%200.09071%200.51448%200.087C0.62763%200%200.78774%200.01042%200.88866%200.11134C0.98958%200.21226%201%200.37237%200.913%200.48552C0.90929%200.49035%200.90558%200.49517%200.90187%200.5C0.90558%200.50483%200.90929%200.50965%200.913%200.51448C1%200.62763%200.98958%200.78774%200.88866%200.88866C0.78774%200.98958%200.62763%201%200.51448%200.913C0.50965%200.90929%200.50483%200.90558%200.5%200.90187C0.49517%200.90558%200.49035%200.90929%200.48552%200.913C0.37237%201%200.21226%200.98958%200.11134%200.88866C0.01042%200.78774%200%200.62763%200.087%200.51448C0.09071%200.50965%200.09442%200.50483%200.09813%200.5C0.09442%200.49517%200.09071%200.49035%200.087%200.48552C0%200.37237%200.01042%200.21226%200.11134%200.11134C0.21226%200.01042%200.37237%200%200.48552%200.087C0.49035%200.09071%200.49517%200.09442%200.5%200.09813Z%22%20fill%3D%22black%22%2F%3E%3C%2Fsvg%3E");
}
.m3-shape-pill {
  --m3-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201%201%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M0.87316%200.12684C0.9404%200.19407%200.98515%200.28377%200.99546%200.38397C0.99697%200.3987%200.99849%200.41342%201%200.42814C0.99936%200.54387%200.9531%200.65468%200.87127%200.73652C0.82635%200.78143%200.78143%200.82635%200.73652%200.87127C0.65468%200.9531%200.54387%200.99936%200.42814%201C0.41342%200.99849%200.3987%200.99697%200.38397%200.99546C0.18357%200.97485%200.02515%200.81643%200.00454%200.61603C0.00303%200.6013%200.00151%200.58658%200%200.57186C0.00064%200.45613%200.0469%200.34532%200.12873%200.26348C0.17365%200.21857%200.21857%200.17365%200.26348%200.12873C0.34532%200.0469%200.45613%200.00064%200.57186%200C0.58658%200.00151%200.6013%200.00303%200.61603%200.00454C0.71623%200.01485%200.80593%200.0596%200.87316%200.12684Z%22%20fill%3D%22black%22%2F%3E%3C%2Fsvg%3E");
}
.m3-shape-slanted {
  --m3-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201%201%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M0.87553%200.91402C0.86773%200.92106%200.85933%200.92742%200.85041%200.93306C0.80464%200.96198%200.74103%200.96178%200.6138%200.96138C0.47652%200.96094%200.33923%200.96051%200.20195%200.96007C0.19245%200.96004%200.18769%200.96003%200.185%200.95994C0.08063%200.95655%200%200.86705%200.00749%200.76289C0.00768%200.76021%200.00816%200.75548%200.00912%200.74602C0.0228%200.61113%200.03647%200.47625%200.05015%200.34136C0.06298%200.21478%200.0694%200.15149%200.10293%200.10898C0.11598%200.09242%200.13176%200.07821%200.14959%200.06694C0.19536%200.03802%200.25897%200.03822%200.3862%200.03862C0.52348%200.03906%200.66077%200.03949%200.79805%200.03993C0.80755%200.03996%200.81231%200.03997%200.815%200.04006C0.91937%200.04345%201%200.13295%200.99251%200.23711C0.99232%200.23979%200.99184%200.24452%200.99088%200.25398C0.9772%200.38887%200.96353%200.52375%200.94985%200.65864C0.93702%200.78522%200.9306%200.84851%200.89707%200.89102C0.89054%200.8993%200.88334%200.90699%200.87553%200.91402Z%22%20fill%3D%22black%22%2F%3E%3C%2Fsvg%3E");
}
.m3-shape-verysunny {
  --m3-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201%201%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M0.50001%200.99329C0.47255%200.99329%200.44509%200.97988%200.42902%200.95306C0.4171%200.93317%200.40519%200.91328%200.39327%200.89339C0.37453%200.86212%200.33753%200.84678%200.30216%200.85564C0.27963%200.86128%200.25711%200.86692%200.23458%200.87256C0.17393%200.88774%200.11899%200.83278%200.13419%200.77213C0.13982%200.74964%200.14546%200.72715%200.1511%200.70466C0.15996%200.6693%200.14464%200.63229%200.11337%200.61355C0.09346%200.6016%200.07354%200.58966%200.05362%200.57772C0%200.54557%200.00001%200.46786%200.05365%200.43572C0.07353%200.42381%200.09342%200.41189%200.11331%200.39997C0.14459%200.38123%200.15992%200.34423%200.15107%200.30886C0.14543%200.28634%200.13979%200.26381%200.13415%200.24129C0.11896%200.18063%200.17392%200.12569%200.23457%200.14089C0.25706%200.14653%200.27955%200.15217%200.30204%200.1578C0.33741%200.16667%200.37441%200.15135%200.39316%200.12008C0.4051%200.10016%200.41704%200.08024%200.42898%200.06033C0.46113%200.0067%200.53885%200.00672%200.57098%200.06035C0.5829%200.08024%200.59481%200.10013%200.60673%200.12002C0.62547%200.15129%200.66247%200.16662%200.69784%200.15777C0.72037%200.15213%200.74289%200.14649%200.76542%200.14085C0.82607%200.12567%200.88101%200.18063%200.86581%200.24128C0.86018%200.26377%200.85454%200.28625%200.8489%200.30874C0.84004%200.34411%200.85536%200.38111%200.88663%200.39986C0.90654%200.4118%200.92646%200.42375%200.94638%200.43569C1%200.46784%200.99999%200.54555%200.94635%200.57769C0.92647%200.5896%200.90658%200.60152%200.88669%200.61344C0.85541%200.63218%200.84008%200.66917%200.84893%200.70454C0.85457%200.72707%200.86021%200.7496%200.86585%200.77212C0.88104%200.83277%200.82608%200.88772%200.76543%200.87252C0.74294%200.86688%200.72045%200.86124%200.69796%200.85561C0.66259%200.84674%200.62559%200.86206%200.60684%200.89333C0.5949%200.91325%200.58296%200.93316%200.57102%200.95308C0.55494%200.97989%200.52748%200.9933%200.50001%200.99329Z%22%20fill%3D%22black%22%2F%3E%3C%2Fsvg%3E");
}
.m3-shape-flower {
  --m3-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201%201%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M0.36975%200.18639C0.37854%200.16002%200.38733%200.13365%200.39612%200.10728C0.40897%200.06874%200.43312%200.03496%200.46544%200.01034C0.47421%200.00365%200.48493%200.00003%200.49596%200.00002C0.49833%200.00002%200.50071%200.00001%200.50308%200.00001C0.51411%200%200.52484%200.0036%200.53363%200.01027C0.56599%200.03483%200.59021%200.06857%200.60313%200.10708C0.61197%200.13344%200.62081%200.15979%200.62965%200.18615C0.65451%200.17371%200.67938%200.16128%200.70424%200.14885C0.74058%200.13068%200.78154%200.12388%200.8218%200.12932C0.83273%200.13079%200.84288%200.13581%200.85068%200.1436C0.85236%200.14528%200.85405%200.14696%200.85573%200.14863C0.86353%200.15643%200.86857%200.16656%200.87007%200.17749C0.87559%200.21774%200.86886%200.25872%200.85076%200.29509C0.83837%200.31998%200.82599%200.34486%200.81361%200.36975C0.83998%200.37854%200.86635%200.38733%200.89272%200.39612C0.93126%200.40897%200.96504%200.43312%200.98966%200.46544C0.99635%200.47421%200.99997%200.48493%200.99998%200.49596C0.99998%200.49833%200.99999%200.50071%200.99999%200.50308C1%200.51411%200.9964%200.52484%200.98973%200.53363C0.96517%200.56599%200.93143%200.59021%200.89292%200.60313C0.86656%200.61197%200.84021%200.62081%200.81385%200.62965C0.82629%200.65451%200.83872%200.67938%200.85115%200.70424C0.86932%200.74058%200.87612%200.78154%200.87068%200.8218C0.86921%200.83273%200.86419%200.84288%200.8564%200.85068C0.85472%200.85236%200.85304%200.85405%200.85137%200.85573C0.84357%200.86353%200.83344%200.86857%200.82251%200.87007C0.78226%200.87559%200.74128%200.86886%200.70491%200.85076C0.68002%200.83837%200.65514%200.82599%200.63025%200.81361C0.62146%200.83998%200.61267%200.86635%200.60388%200.89272C0.59103%200.93126%200.56688%200.96504%200.53456%200.98966C0.52579%200.99635%200.51507%200.99997%200.50404%200.99998C0.50167%200.99998%200.49929%200.99999%200.49692%200.99999C0.48589%201%200.47516%200.9964%200.46637%200.98973C0.43401%200.96517%200.40979%200.93143%200.39687%200.89292C0.38803%200.86656%200.37919%200.84021%200.37035%200.81385C0.34549%200.82629%200.32062%200.83872%200.29576%200.85115C0.25942%200.86932%200.21846%200.87612%200.1782%200.87068C0.16727%200.86921%200.15712%200.86419%200.14932%200.8564C0.14764%200.85472%200.14595%200.85304%200.14427%200.85137C0.13647%200.84357%200.13143%200.83344%200.12993%200.82251C0.12441%200.78226%200.13114%200.74128%200.14924%200.70491C0.16163%200.68002%200.17401%200.65514%200.18639%200.63025C0.16002%200.62146%200.13365%200.61267%200.10728%200.60388C0.06874%200.59103%200.03496%200.56688%200.01034%200.53456C0.00365%200.52579%200.00003%200.51507%200.00002%200.50404C0.00002%200.50167%200.00001%200.49929%200.00001%200.49692C0%200.48589%200.0036%200.47516%200.01027%200.46637C0.03483%200.43401%200.06857%200.40979%200.10708%200.39687C0.13344%200.38803%200.15979%200.37919%200.18615%200.37035C0.17371%200.34549%200.16128%200.32062%200.14885%200.29576C0.13068%200.25942%200.12388%200.21846%200.12932%200.1782C0.13079%200.16727%200.13581%200.15712%200.1436%200.14932C0.14528%200.14764%200.14696%200.14595%200.14863%200.14427C0.15643%200.13647%200.16656%200.13143%200.17749%200.12993C0.21774%200.12441%200.25872%200.13114%200.29509%200.14924C0.31998%200.16163%200.34486%200.17401%200.36975%200.18639Z%22%20fill%3D%22black%22%2F%3E%3C%2Fsvg%3E");
}

md-icon {
  font-family: "Material Symbols Outlined" !important;
}

.project-card,
.course-project-card {
  border-radius: 24px;
}

.course-project-card {
  position: relative;
  aspect-ratio: 1 / 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  overflow: visible !important;
  /* Slightly less saturated and lighter background */
  background-color: color-mix(in srgb, var(--md-sys-color-background) 92%, #ffffff 8%);
  transition:
    background-color 0.4s ease,
    box-shadow 0.4s ease,
    color 0.4s ease;
  z-index: 1;
}

.course-project-card:hover {
  background-color: transparent !important;
  box-shadow: none !important;
}

/* Ensure text transitions color */
.course-project-card * {
  transition: color 0.4s ease;
}

.course-project-card:hover h3,
.course-project-card:hover p {
  color: var(--md-sys-color-on-primary) !important;
}

.course-project-card::before {
  content: "";
  position: absolute;
  top: -15%;
  left: -15%;
  right: -15%;
  bottom: -15%;
  background: var(--md-sys-color-primary);
  z-index: -1;
  opacity: 0;
  transform: scale(0.5);
  transition: all 0.4s cubic-bezier(0.2, 0, 0, 1);
  -webkit-mask-image: var(--m3-mask);
  mask-image: var(--m3-mask);
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}

.course-project-card:hover::before {
  opacity: 1;
  transform: scale(0.85);
}

.misc-card {
  position: relative;
  color: var(--md-sys-color-on-primary) !important;
  transition: box-shadow 0.3s ease;
  aspect-ratio: 1 / 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 1;
}

.misc-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--md-sys-color-primary);
  -webkit-mask-image: var(--m3-mask);
  mask-image: var(--m3-mask);
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  scale: 1;
  rotate: 0deg;
  transition:
    scale 0.4s cubic-bezier(0.2, 0, 0, 1),
    rotate 0.4s cubic-bezier(0.2, 0, 0, 1);
  z-index: -1;
}

@keyframes playful-rotate {
  0% {
    rotate: 0deg;
  }
  100% {
    rotate: 360deg;
  }
}

@keyframes playful-bounce {
  0% {
    scale: 1;
  }
  50% {
    scale: 1.2;
  }
  100% {
    scale: 1.05;
  }
}

.misc-card:hover::before {
  animation:
    playful-rotate 1.4s ease-in-out forwards,
    playful-bounce 1.4s ease-in-out forwards;
  scale: 1.05;
  rotate: 360deg;
}
.misc-card * {
  color: var(--md-sys-color-on-primary) !important;
}

/* Segmented Button Styles */
.segmented-btn-container {
  display: inline-flex;
  border: 1px solid var(--md-sys-color-outline);
  border-radius: 9999px;
  overflow: hidden;
  background-color: transparent;
}

.segmented-btn {
  padding: 0.5rem 1.5rem;
  font-weight: 500;
  color: var(--md-sys-color-on-surface);
  background: transparent;
  border-right: 1px solid var(--md-sys-color-outline);
  transition: all 0.2s ease;
  cursor: pointer;
  outline: none;
  text-decoration: none;
}

.segmented-btn:last-child {
  border-right: none;
}

.segmented-btn:hover {
  background: color-mix(in srgb, var(--md-sys-color-on-surface) 8%, transparent);
}

.segmented-btn.active {
  background: var(--md-sys-color-secondary-container);
  color: var(--md-sys-color-on-secondary-container);
}

.btn-icon-circle {
  background-color: color-mix(in srgb, var(--md-sys-color-primary) 50%, #000000);
  color: var(--md-sys-color-on-primary) !important;
  border-radius: 50%;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  font-size: 16px;
}
/* Ensure md-icon scales its internal svg down slightly so it fits inside the circle */
md-icon.btn-icon-circle {
  font-size: 20px;
}

/* Cutout effect for icons */
md-filled-button .btn-icon-circle {
  color: var(--md-sys-color-primary) !important;
}

md-elevated-button .btn-icon-circle {
  color: #ffffff !important;
}

/* Revert project button to white, but keep text on-primary */
md-elevated-button {
  --md-elevated-button-container-color: #ffffff;
  --md-elevated-button-label-text-color: var(--md-sys-color-on-primary);
}

.chip-bg-blend {
  background-color: color-mix(in srgb, var(--md-sys-color-primary) 50%, #000000);
}