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

:root { --page-background: #eee5d4; --text-color: #332c24; --accent-color: #9a5c35; --font-family: Georgia, "Times New Roman", serif; --button-background: #74442e; --button-border: 1px solid #74442e; }
body { background: linear-gradient(120deg, #e3d4bb, #f8f2e7 45%, #e8ddca); }
main { width: min(100% - 2rem, 62rem); }
main > nav { border-color: #d3c4ab; border-radius: 0.3rem; background: #fbf7ef; }
main > nav a { color: #68462f; }
main > nav a:hover, main > nav a:focus-visible { background: #eee0c8; color: #50351f; }
.home-hero { border-radius: 0.3rem; background: linear-gradient(125deg, #63412f, #a56e46); }
.home-hero h1 { font-family: Georgia, serif; font-weight: 400; letter-spacing: -0.035em; }
.char-card, .project-card, #about-div, #project-div, #contact-name, .talk-text, #email, #instagram, #linkedin, .intro-text { border-color: #dfd1bb; border-radius: 0.3rem; background: #fbf7ef; box-shadow: 0 0.3rem 1.5rem #5c432011; }
.card-header, .p-card-header, #contact-name { color: #74442e; }
button, #switch-theme { border-radius: 0.3rem; }
.home-hero #switch-theme { color: #63412f; }

body {
  background: linear-gradient(120deg, #e3d4bb, #f8f2e7 45%, #e8ddca);
}

main > nav {
  box-shadow: 0 0.5rem 1rem #5c432022;
  transition: transform 250ms ease, box-shadow 250ms ease;
}

main > nav:hover {
  transform: translateY(-3px);
  box-shadow: 0 0.9rem 1.5rem #5c432033;
}

.home-hero {
  overflow: hidden;
  border-block: 0.35rem double #e3c9a7;
  background-image:
    linear-gradient(90deg, rgb(255 249 237 / 9%) 0 1px, transparent 1px 3rem),
    linear-gradient(125deg, #63412f, #a56e46);
  background-size: 3rem 100%, 100% 100%;
}

.char-card, .project-card, #about-div, #project-div, #contact-name, .talk-text, #email, #instagram, #linkedin {
  position: relative;
  overflow: hidden;
  transition: transform 220ms ease, box-shadow 220ms ease;
}

.char-card::before, .project-card::before, #about-div::before, #project-div::before, #contact-name::before, .talk-text::before, #email::before, #instagram::before, #linkedin::before {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 0.25rem;
  background: #ad744c;
  content: "";
  transform: scaleY(0.15);
  transform-origin: center;
  transition: transform 220ms 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: translateX(5px);
  box-shadow: 0 0.8rem 1.8rem #5c432033;
}

.char-card:hover::before, .project-card:hover::before, #about-div:hover::before, #project-div:hover::before, #contact-name:hover::before, .talk-text:hover::before, #email:hover::before, #instagram:hover::before, #linkedin:hover::before {
  transform: scaleY(1);
}

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

main > nav a:hover, a:hover { transform: translateY(-2px); }
button:hover { box-shadow: 0 0.4rem 0.9rem #74442e44; }