/* Custom Properties */

:root {
  --yellow: oklch(0.968 0.211 109.77);
  --white: oklch(1 0 0);
  --boxshadow: oklch(0.5999 0 0);
  --accentBlue: oklch(62% 0.2 250);
  --accentPurple: oklch(60% 0.18 300);
  --shade1: oklch(from oklch(0% 0.02 260) 5% c h);
  --shade2: oklch(from oklch(0% 0.02 260) 10% c h);
  --shade3: oklch(from oklch(0% 0.02 260) 20% c h);
  --shade4: oklch(from oklch(0% 0.02 260) 30% c h);
  --shade5: oklch(from oklch(0% 0.02 260) 40% c h);
  --shade6: oklch(from oklch(0% 0.02 260) 50% c h);
  --shade7: oklch(from oklch(0% 0.02 260) 60% c h);
  --shade8: oklch(from oklch(0% 0.02 260) 70% c h);
  --shade9: oklch(from oklch(0% 0.02 260) 95% c h);
  --mainFont: "Roboto", sans-serif;
  font-family: var(--mainFont);
}

/* Global Styles */

html {
  box-sizing: border-box;
}

*,
*::before,
*::after {
  box-sizing: inherit;
}

html,
body {
  height: 100%;
}

body {
  background: var(--shade9);
  margin: 0;
  font-size: 1rem;
  line-height: 1.5rem;
}
h1,
h2,
h3 {
  margin: 0;
}
h1 {
  font-size: 3.125rem;
  line-height: 5rem;
}
h2 {
  font-size: 1.625rem;
}
h3 {
  font-size: 1.5rem;
}

a {
  color: var(--accentBlue);
}
a:hover {
  color: var(--accentPurple);
  text-decoration: none;
}

.content-wrapper {
  margin: 0 auto;
  padding: 1.875rem;
  max-width: 56.25rem;
}

body .lnk {
  color: var(--shade9);
  transition: transform 0.2s ease-in-out;
  display: inline-block;
}

button:hover {
  transition: transform .2s ease-in-out;
  cursor: pointer;
   transform: scale(1.1);
}

body button:hover {
    border: 0.063rem solid var(--shade9);
    transform: scale(1.1);
}

body .lnk:hover {
  transform: scale(1.1);
  border: 0.063rem solid var(--shade9);
  border-radius: 0.625rem;
  padding: 0.125rem 0.25rem;
}

/* Home */

.home {
  background: url(../images/cat-japan.jpg) no-repeat; /* my photo, taken by me */
  background-size: cover;
  display: flex;
  flex-direction: column;
}

.home .content-wrapper {
  flex: 1 0 auto;
  padding: 0.625rem;
}
.content-bg {
  background: var(--shade9);
  opacity: 70%;
  padding: 1.25rem;
}

/* Resume */

.resume header::before {
  background: url(../images/cat-japan.jpg) center; /* my photo, taken by me */
  background-size: cover;
  content: "";
  display: block;
  height: 15.625rem;
}
.resume-section {
  margin-bottom: 3.125rem;
  display: flex;
  flex-direction: column;
}
.resume-section h2 {
  margin: auto;
  padding: 3.125rem 0 1.563rem 0;
}

/* Projects */

.project-wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: minmax(7.5rem, auto);
  gap: 1.25rem;
  justify-items: center;
  margin: 0.625rem;
}

.project-item {
  display: grid;
  justify-content: center;
  grid-template-rows: auto 1fr auto;
  text-align: center;
  padding: 1rem;
  margin: 1.875rem 0;
  max-width: 21.875rem;
  min-height: 22.5rem;
  box-sizing: border-box;
  box-shadow: 0 0.313rem 1.25rem var(--boxshadow);
  border-radius: 1.25rem 1.25rem;
  height: 100%;
  align-items: center;
  align-content: start;
}


.project-item .btn:hover {
    transform: scale(1.05);
}


.project-item .btn {
  transition: transform 0.2s ease-in-out;
  display: inline-block;
  background-color: var(--accentBlue);
  padding: 0.5rem 1.25rem;
  color: var(--shade9);
  text-decoration: none;
  border-radius: 0.625rem;
  margin-block-start: auto;
}



.project-item img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  margin-bottom: 1.25rem;
  border-radius: 0.625rem 0.625rem;
}

.project-item h3 {
  text-align: center;
}

/* Navigation */

.nav-buttons {
  display: flex;
  align-items: flex-end;
  gap: 1rem;
}

.primary-nav {
  background-color: var(--shade4);
  padding: 0;
  display: flex;
  height: 3.125rem;
}

.primary-nav ul {
  margin: 0 1.25rem;
  padding: 0;
  display: flex;
  justify-content: space-between;
  list-style-type: none;
  align-items: center;
  width: 100%;
}

.primary-nav a {
  text-decoration: none;
  color: var(--shade9);
  background-color: var(--accentBlue);
  padding: 0.5rem 0.5rem;
  border-radius: 1.875rem;
}

.user-button {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--accentBlue);
  color: var(--shade9);
  border: 0;
  padding: 0.313rem 0.938rem;
  border-radius: 0.625rem;
  font-size: 1rem;

  anchor-name: --menu-btn;
}

/* Navigation Popover Menu */

.profile-menu {
  border: none;
  background-color: var(--shade4);
  height: 12.5rem;
  width: 12.5rem;
  position: absolute;
  margin: 0;
  inset: auto;
  position-anchor: --menu-btn;
  top: calc(anchor(bottom) + 0.563rem);
  right: anchor(right);
}

.profile-menu ul {
  list-style-type: none;
  margin: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  padding: 0 1.25rem;
  height: 100%;
  text-align: center;
}


.profile-menu .btn {
  display: inline-block;
  color: var(--shade9);
  border-radius: 0.625rem;
  font-size: 1rem;
}

.profile-menu .currPage {
  color: var(--accentPurple);
  text-decoration: underline;
}

.currPage:hover {
  text-decoration: none;
}

/* Nav Contact Popover */

.contact-button {
  anchor-name: --contact-button;
  background-color: var(--accentBlue);
border-radius: 0.625rem;
  font-size: 1rem;
  padding: 0.313rem 0.938rem;
  border: none;
  color: var(--shade9);
}

.contact-popover {
  position-anchor: --contact-button;
  margin-block-start: 3.125rem;
  left: anchor(bottom);
  bottom: anchor(left);
  position: absolute;
  border: none;
  background-color: var(--shade4);
  color: var(--shade9);
  padding: 1rem;
  justify-items: center;
  opacity: 0;
  transition: none;
}

.contact-popover ul {
  list-style-type: none;
  margin: 0;
  padding: 0.625rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  align-items: center;
  text-align: center;
}

.contact-popover .contact-photo {
  width: 12.5rem;
 border-radius: 50%; 
margin: auto;
padding: 1.25rem;
justify-self: center;
}

.contact-popover button {
  border: none;
  color: var(--shade9);
  background-color: var(--accentBlue);
  padding: 0.313rem 0.938rem;
  border-radius: 0.625rem;

}

.contact-content {
  grid-row: 1/2;
  grid-column: 2/3;
  
}

.contactContent {
  list-style: none;
padding: 1.25rem 1.25rem;
}

@container (min-width: 31.25rem)  {
  .contact-popover{
    grid-template-columns: 12.5rem 1fr;
    width: auto;
  }
  .contact-popover .bio {
    display: none;
  }
}

@container (min-width: 50rem) {
  .contact-popover {
    grid-template-columns: 15.625rem 1fr;
    max-width: 30vw;
  }
  .contact-popover .bio {
    display: list-item;
  }
}

/* Work Experience in Projects Page*/

.work-item {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 1.25rem;
  margin: 1.875rem 0;
}
.work-details p {
  margin: 0;
}
.work-summary p:first-child {
  margin-block-start: 0;
}

/* Education in Projects Page */

.education-item {
  margin: 1.875rem 0;
}
.education-item p {
  margin: 0;
}

/* SVG Animations page */

.svg-container {
  background-color: var(--white);
  height: 62.5rem;
  width: 100%;
  text-align: center;
}

svg {
  width: 100vh;
  height: 100vh;
}

/* All Animation Keyframes */

@keyframes FadeIn {
  0% {
    opacity: 0;
    transform: translateY(-0.938rem);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes blurInOut {
  0% {
    filter: blur(0rem);
  }
  25%{
    filter: blur(0.25rem);
  }
  50% {
    filter: blur(0.5rem);
  }
  75% {
    filter: blur(0.25rem);
  }
  100% {
    filter: blur(0rem);
  }
}

@keyframes merge {
  0% {
    height: 0;
  }
  100% {
    height: 100%;
  }
}

@keyframes falling-tear {
  0% {
    opacity: 0;
    transform: translateY(0);
  }
  20% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translateY(0.625rem);
  }
}

@keyframes eyebrow-tilt-L {
  0% {
    transform: translateY(0);
    transform: rotate(0deg);
  }
  50% {
    transform: translateY(0.063rem) rotate(-4deg);
  }
  100% {
    transform: translateY(0);
    transform: rotate(0deg);
  }
}

@keyframes eyebrow-tilt-R {
  0% {
    transform: translateY(0);
    transform: rotate(0deg);
  }
  50% {
    transform: translateY(0.063rem) rotate(4deg);
  }
  100% {
    transform: translateY(0);
    transform: rotate(0deg);
  }
}

@keyframes eye-tilt-L {
  0% {
    transform: rotate(4deg);
  }
  50% {
    transform: rotate(-4deg);
  }
  100% {
    transform: rotate(4deg);
  }
}

@keyframes eye-tilt-R {
  0% {
    transform: rotate(-4deg);
  }
  50% {
    transform: rotate(4deg);
  }
  100% {
    transform: rotate(-4deg);
  }
}

/* Applys animations */

.contact-popover:popover-open {
  display: grid;
  grid-template-columns: 1fr;
  width: 100%;
  opacity: 1;
  animation: FadeIn 0.5s ease-out forwards;
}

.logoType {
  opacity: 0;
  animation: FadeIn 0.8s ease-in forwards;
}

.animations-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
  margin: 1.25rem;
}

.animation-item {
  background-color: var(--shade4);
  color: var(--shade9);
  padding: 1.875rem;
  text-align: center;
  border-radius: 0.625rem
}



.triangle {
  width: 0;
  height: 0;
  border-left: 2.5rem solid transparent;
  border-right: 2.5rem solid transparent;
  border-bottom: 2.5rem solid var(--accentBlue);
  margin: 1.875rem auto;
  transition: transform 0.6s ease-in-out;
}

.triangle:hover {
  transform: rotate(360deg);
}

.circle {
  width: 6.25rem;
  height: 6.25rem;
  background-color: var(--accentBlue);
  border-radius: 50%;
  margin: 1.25rem auto;
}

.circle:hover {
    animation: blurInOut 2s infinite alternate ease-in-out;
}

.squares-container {
  position: relative;
  width: 12.5rem;
  height: 12.5rem;
  margin: 3.125rem auto;
  overflow: hidden;
  background-color: var(--shade6);
}

.square {
  width: 100%;
  height: 6.25rem;
  margin: auto;
  position: absolute;
  mix-blend-mode: multiply;
}

.square-one {
  height: 0;
  top: 0;
  background-color: var(--accentBlue);
  animation: merge 3s infinite alternate ease-in-out;
}

.square-two {
  background-color: var(--yellow);
}


#char-L-eye {
  animation: eye-tilt-L 3s infinite;
  transform-box: fill-box;
}

#char-R-eye {
  animation: eye-tilt-R 3s infinite;
  transform-box: fill-box;
  transform-origin: right 50%;
}

#L-eyebrow {
  animation: eyebrow-tilt-L 3s infinite;
}

#R-eyebrow {
  animation: eyebrow-tilt-R 3s infinite;
  transform: fillbox;
  transform-origin: right 50%;
}

#L-tear1 {
  animation: falling-tear 1.5s infinite ease-in;
  opacity: 0;
}
#L-tear2 {
  animation: falling-tear 1.5s infinite ease-in;
  opacity: 0;
  animation-delay: 0.2s;
}
#R-tear1 {
  animation: falling-tear 1.5s infinite ease-in;
  opacity: 0;
  animation-delay: 0.4s;
}
#R-tear2 {
  animation: falling-tear 1.5s infinite ease-in;
  opacity: 0; 
  animation-delay: 0.6s;
}

/* Footer */

footer {
  background: var(--shade4);
  color: var(--shade9);
  justify-content: space-between;
  padding: 0 1.25rem;
  text-align: center;
}

footer a {
  color: var(--accentBlue);
}
footer a:hover {
  color: var(--accentPurple);
}

.socials {
  list-style-type: none;
  padding: 0;
}

.socials li {
  display: inline-block;
  margin-left: 0.625rem;
}

.socials img {
  width: 2rem;
}
.socials img:hover {
  opacity: 0.5;
}

/* Media Queries */

@media screen and (max-width: 37.5rem) {
  .project-wrapper {
    grid-template-columns: 1fr;
  }
}

@media screen and (max-width: 37.5rem) {
  .animations-grid {
    grid-template-columns: 1fr;
  }
}

@media screen and (max-width: 56.25rem) {
  .project-wrapper {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media screen and (max-width: 62.5rem) {
  svg {
    width: 50%;
    height: 100%;
  }

  .svg-container {
    height: 100vh;
  }
}

@media screen and (min-width: 34.375rem) {
  footer {
    display: flex;
    justify-content: space-between;
    padding: 0 1.25rem;
  }
}

@media screen and (min-width: 34.375rem) {
  .work-item {
    display: grid;
    grid-template-columns: 7.5rem 1fr;
    column-gap: 1.25rem;
  }
  .work-summary p:first-child {
    margin-block-start: 0;
  }
}

@media screen and (min-width: 93.75rem) {
  body {
    font-size: 1.3rem;
    line-height: 2rem;
  }
  h1 {
    font-size: 6rem;
    line-height: 7rem;
  }
  h2 {
    font-size: 3rem;
    line-height: 4rem;
  }
  h3 {
    font-size: 2rem;
    line-height: 3rem;
  }
}

@media screen and (min-width: 93.75rem) {
  .resume header::before {
    height: 23.438rem;
  }
}