*, *::before, *::after {box-sizing: border-box;} * {margin: 0;}
body {
    --perspectiveTransform: rotateX(25deg) rotateY(25deg);
    --textColor: #081038;
    --subtleColor: #ffe0c3;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    font-family: system-ui, -apple-system, sans-serif;
    color: var(--textColor, black);
    background: #fffefe;
}

h1 {
    text-transform: uppercase;
    letter-spacing: .1ch;
    line-height: 1;
    overflow-wrap: break-word;
}

main {
    display: grid;
    width: 100vw;
    min-height: 100vh;
    grid-template-rows: min-content 1rem;
    padding: 1rem;
}

main:has(.home) {
    overflow: hidden;
}

header {
    position: relative;
}

.page {
    grid-row: 2;
    height: min-content;
    width: min-content;
    position: relative;
}

.links {
    display: flex;
    gap: 1rem;
}


a {
    color: currentColor;
    text-decoration: underline;
    &:hover {
        text-decoration: none;
    }
}

nav {
    display: flex;
    flex-flow: column;
    view-transition-name: navigation;
    transform: var(--perspectiveTransform);
    transform-origin: left center;
    margin-top: 2rem;
   
}

nav a {
    text-transform: uppercase;
    letter-spacing: .1ch;
    font-size: 1.2rem;
}

.home-link {
    text-decoration: none;
    line-height: 1;
    margin-bottom: 1.5rem;
}

@media screen and (min-width: 200px) {
    main {
        grid-template-columns: minmax(20%, 5rem) 1fr;
        grid-column: 2;
    }
    .page {
        grid-column: 2;
    }
    nav {

        transform-origin: right center;
        text-align: right;
        transform: rotateX(-25deg) rotateY(25deg);
    }
}

@media screen and (min-width: 600px) {
    .subtitle {
        font-size: 1.5rem;       
    }
    h1 {
        font-size: 5rem;
    }
}



.home .page{
    transform: var(--perspectiveTransform);
    transform-origin: left center;
}

.about h1 {
    width: min-content;
    margin-bottom: 2rem;
}

.about p {
    max-width: 35rem;
    margin: 1rem 0;
    overflow-wrap: break-word;
}

.home .home-link {
    visibility: hidden;
}

@view-transition {
    navigation: auto;
}
@keyframes fade-in {
    from {
        opacity: 0;
    }
}

@keyframes fade-out {
    to {
        opacity: 0;
    }
}

@keyframes slide-from-right {
    from {
        transform: rotateX(25deg) rotateY(90deg);
    }
}

@keyframes slide-to-left {
    to {
        transform: rotateX(25deg) rotateY(90deg);
    }
}



:root::view-transition-old(root) {
    transform-origin: left center;
	animation: 90ms cubic-bezier(0.4, 0, 1, 1) both fade-out, 300ms cubic-bezier(0.4, 0, 0.2, 1) both slide-to-left;
}

:root::view-transition-new(root) {
    transform-origin: left center;
	animation: 210ms cubic-bezier(0, 0, 0.2, 1) 90ms both fade-in, 300ms cubic-bezier(0.4, 0, 0.2, 1) both
			slide-from-right;
}

@media screen and (min-width: 10px) {
    .page.grow-left:after,
.page.grow-bottom:before,
.title-name:after,
.title-name:before,
.home header:before,
.home header:after,
.github:after,
.github:before,
.home:before,
.home:after,
.bird-pictures:after {
    content: "";
    display: block;
    position: absolute;
    --border:  solid 1px var(--subtleColor, #333);
}
} 


.page.grow-left:after {
    animation: growY 10s ease 5s forwards;
    transform: scaleY(0);
    transform-origin: top;
    border-left: var(--border);
    left: -2rem;
    top: 0;
    height: 100vh;
}

  .page.grow-bottom:before {
    transform: scaleX(0);
    height: 0;
    transform-origin: left top;
    animation: growX 12s ease 8s forwards, growH 2s ease 16s forwards;
    border-bottom: var(--border);
    left: -2rem;
    top: calc(100% + 2rem);
    width: 100vw;
    background: var(--subtleColor, #333);
}

.title-name:after {
    animation: growY 5s ease 25s forwards;
    transform-origin: bottom;
    border-left: var(--border);
    right: -5rem;
    bottom: -2rem;
    height: 100vh;
    transform: scaleY(0);
}

.title-name:before {
    animation: growX 5s ease 28s forwards;
    transform-origin: left;
    border-bottom: var(--border);
    left: calc(100% + 5rem);
    bottom: 8rem;
    width: 100vw;
    transform: scaleX(0);
}

.home header:before {
    animation: growW 5s ease 28s forwards;
    transform-origin: right;
    border-top: var(--border);
    right: -20rem;
    top: -1rem;
    width: 0;
    transform: rotateX(-25deg) rotateY(25deg);
}

.home header:after {
    animation: grow2 5s ease 28s forwards;
    transform-origin: right;
    transform: rotateX(-25deg) rotateY(25deg);
    border-bottom: var(--border);
    right: -20rem;
    bottom: -20.5rem;
    width: 0;
}

.github:after {
    animation: growY 5s ease 20s forwards;
    transform-origin: top;
    border-left: var(--border);
    top: calc(100% + 2rem);
    height: 100vh;
    transform: scaleY(0);
}

.github:before {
    animation: growX 2s ease 22s forwards;
    transform-origin: left;
    border-bottom: var(--border);
    top: calc(100% + 10rem);
    left: -2rem;
    height: 8px;
    width: 2rem;
    transform: scaleX(0);
}

.home:before {
    animation: growX 2s ease 22s forwards;
    transform-origin: left;
    border-bottom: var(--border);
    bottom: 2rem;
    left: 0;
    height: 8px;
    width: 7.5rem;
    transform: scaleX(0);
}

.bird-pictures:after {
    transform-origin: top;
    border-left: var(--border);
    top: calc(100% + 2rem);
    height: 100vh;
    transform: scaleY(0);
    left: 100%;
    width: 0;
    animation: growY 5s ease 22s forwards, growW 5s ease 25s forwards;
    background: var(--subtleColor, #333);
}

  
  @keyframes growY {
    0% {
      transform: scaleY(0);
    }
    100% {
      transform: scaleY(1);
    }
  }

  @keyframes growH {
    0% {
      height: 0;
    }
    100% {
      height: 2rem;
    }
  }
  @keyframes growW {
    0% {
      width: 0;
    }
    100% {
      width: 100vw;
    }
  }

  @keyframes grow2 {
    0% {
      width: 0;
    }
    100% {
      width: 22rem;
    }
  }

  @keyframes growX {
    0% {
      transform: scaleX(0);
    }
    100% {
      transform: scaleX(1);
    }
  }