@import url("/css/style1.css");

:root { --page-background: #f1f3e8; --text-color: #253528; --accent-color: #49734b; --font-family: "Trebuchet MS", sans-serif; --button-background: #49734b; --button-border: 1px solid #49734b; }
body { background: radial-gradient(ellipse at 85% 15%, #d9e7c7, transparent 34rem), #f1f3e8; }
main > nav { border-color: #cbd9bd; background: rgb(249 250 242 / 94%); }
main > nav a { color: #35553a; }
main > nav a:hover, main > nav a:focus-visible { background: #e1edcf; color: #274c2c; }
.home-hero { border-radius: 2rem 0.5rem 2rem 0.5rem; background: linear-gradient(140deg, #274c35, #73965a); }
.char-card, .project-card, #about-div, #project-div, #contact-name, .talk-text, #email, #instagram, #linkedin, .intro-text { border-color: #d6ddc9; border-radius: 1rem 0.35rem 1rem 0.35rem; background: #fafbf5; }
.card-header, .p-card-header, #contact-name { color: #416a42; }
button, #switch-theme { border-radius: 0.6rem; }
.home-hero #switch-theme { color: #274c35; }

body {
  background:
    radial-gradient(ellipse at 86% 12%, #d9e7c7, transparent 34rem),
    var(--page-background);
}

.home-hero {
  overflow: hidden;
  background-image:
    linear-gradient(90deg, #274c35 0 0.6rem, transparent 0.6rem),
    linear-gradient(140deg, #365c3b, #73965a);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 12%), 0 1.25rem 3rem rgb(39 76 53 / 16%);
}

.char-card, .project-card, #about-div, #project-div, #contact-name, .talk-text, #email, #instagram, #linkedin {
  transition: transform 250ms ease, box-shadow 250ms ease, border-color 250ms ease;
}

.char-card:hover, .project-card:hover, #about-div:hover, #project-div:hover, #contact-name:hover, .talk-text:hover, #email:hover, #instagram:hover, #linkedin:hover {
  transform: translateY(-6px) rotate(-0.3deg);
  border-color: #9ab67a;
  box-shadow: 0 1.2rem 2rem rgb(39 76 53 / 16%);
}

main > nav a, a, button {
  transition: transform 200ms ease, color 200ms ease, background-color 200ms ease, box-shadow 200ms ease;
}

main > nav a:hover, a:hover { transform: translateY(-2px); }
button:hover { box-shadow: 0 0.5rem 1rem rgb(39 76 53 / 25%); }