@font-face{font-family:'Genos-Regular';src:url(./fonts/Genos-Regular.ttf) format('truetype')}@font-face{font-family:'MeowScript';src:url(./fonts/MeowScript-Regular.ttf) format('truetype')}:root{interpolate-size:allow-keywords;--background-color:#ed7700;--background-color-d:rgba(0,0,0,.25);--secondary-color:#47376e;--text-color:black;--secondary-text-color:#4700ed;--fontgenosreg:'Genos-Regular' , sans-serif;--fontmeowscript:'MeowScript' , sans-serif;--letter-spacing:.05rem;--text-shadow:2px 2px 5px var(--secondary-text-color) , -2px -2px 5px white;--border-radius:0 20px;--box-shadow:2px 2px 10px black , -2px -2px 10px white;--box-shadow-inset:-2px -2px 10px black , 2px 2px 10px white}*{margin:0;padding:0;line-height:1.15;box-sizing:border-box;scrollbar-width:none;-ms-overflow-style:none}html{font-size:24px;font-family: var(--fontGenosReg);letter-spacing:var(--letter-spacing);scroll-behavior:smooth;scroll-snap-type:y mandatory}body{background-color:var(--background-color);color:var(--text-color)}h1{padding-right:1rem;padding-bottom:1rem;font-size:min(13vw,5rem);text-align:center;font-family: var(--fontMeowScript);text-shadow:var(--text-shadow)}.subpage h1,h2{padding-right:1rem;padding-bottom:.5rem;font-size:min(10vw,3rem);font-family: var(--fontMeowScript);text-align:center;text-shadow:2px 2px 5px var(--secondary-text-color) , -2px -2px 5px white}h3{margin-bottom:.5rem;font-size:min(8vw,2rem)}p,li{text-align:justify;hyphens:auto;-webkit-hyphens:auto;-ms-hyphens:auto;&:not(:last-child){ margin-bottom: 0.5rem; }
}ul{li{ margin-left: 1rem; }
}a,a:visited{color:var(--text-color);text-decoration:none;&:hover{ color: var(--secondary-text-color); }
}button:not(.social-media>button){margin-top:1rem;padding:.25rem;font-family:inherit;font-size:inherit;border-radius:var(--border-radius);border:none;outline:none;box-shadow:var(--box-shadow);background-color:var(--secondary-color);transition:300ms ease-in-out;a{
    display: inline-flex;
    justify-content: center;
    width: 100%;
    height: 100%;
    color: white;
    &:hover,&:active{ color: var(--text-color); }
  }
  &:hover,
  &:active{
    color: var(--text-color);
    background-color: var(--background-color);
    box-shadow: var(--box-shadow-inset);
  }
}section{scroll-snap-align:start;position:relative;padding:.5rem;height:100vh;height:100svh;display:grid;overflow:scroll;>*{
    align-self: start;
  }
  &:nth-child(even){ background-color: rgba(0,0,0,0.25); }
}.circlePortrait{justify-content:flex-end;img{
    margin: 5px;
    border-radius: 50%;
    overflow: hidden;
    aspect-ratio: 1 / 1;
    border: 0.5rem solid var(--secondary-color);
    box-shadow: var(--box-shadow);
  }
}.social-media{position:absolute;top:.5rem;left:.5rem;display:flex;gap:1rem;button{
    display: grid;
    grid-template-columns: 2rem;
    place-items: center;
    aspect-ratio: 1 / 1;
    border: 2px solid var(--accent-color);
    border-radius: var(--border-radius);
    background-color: var(--background-color);
    box-shadow: var(--box-shadow);
    position: relative;
    outline: none;
    &:hover,
    &:focus,
    &:active{
      background-color: var(--accent-color);
      box-shadow: var(--box-shadow-inset);
      svg { fill: white; }
    }
    a{
      width: 100%;
      height: 100%;
      padding: 0.25rem;
      display: inline-flex;
      justify-content: center;
      align-items: center;
      svg {
        height: 1.5rem;
        aspect-ratio: 1 / 1;
        fill: var(--accent-color);
      }
    }
  }
}nav{position:fixed;top:0;right:0;z-index:9;padding:.5rem;display:flex;flex-direction:column;align-items:flex-end;gap:1rem;.nav-container,
  #overlay,
  #navbar-active{ display: none; }
  #navbar-active:checked{
    ~ .open-navbar{ display: none; }
    ~ #overlay{
      display: block;
      width: 100vw;
      height: 100vh;
      height: 100svh;
      position: fixed;
      top: 0;
      left: 0;
      z-index: 8;
      background-color: transparent;
      border-radius: none;
    }
    ~ .nav-container{
      z-index: 10;
      right: 0.5rem;
      width: min(10rem,75vw);
      height: calc(100vh - 1rem);
      height: calc(100svh - 1rem);
      padding-bottom: 1rem;
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      gap: 1rem;
      /*background-color: var(--background-color-d);*/
      background-color: rgba(255,255,255,0.5);
      border-radius: var(--border-radius);
      box-shadow: var(--box-shadow);
    }
  }
  a{
    margin: 0 0.5rem;
    text-shadow: var(--text-shadow);
    &::before{
      content: '⭏';
      left: 0;
    }
  }
  label{
    display: grid;
    grid-template-columns: 2rem;
    place-items: center;
    aspect-ratio: 1 / 1;
    border: 2px solid var(--accent-color);
    border-radius: var(--border-radius);
    background-color: var(--background-color);
    box-shadow: var(--box-shadow);
    position: relative;
    outline: none;
    svg{
      fill: var(--secondary-color);
      border: 2px solid var(--secondary-color);
      box-shadow: var(--box-shadow);
      border-radius: var(--border-radius);
    }
    &:hover,
    &:focus,
    &:active{
      background-color: var(--secondary-color);
      box-shadow: var(--box-shadow-inset);
      svg{
        fill: white;
        box-shadow: var(--box-shadow-inset);
      }
    }
  }
}details{margin-bottom:1rem;&::details-content{
    display: block;
    overflow: clip;
    transition: height 0.5s ease, opacity 0.5s ease-in-out, content-visibility 0.5s allow-discrete;
    height: 0;
    opacity: 0;
  }
  &[open]::details-content{
    height: auto;
    opacity: 1;
  }
  &[open] summary::marker { content: '- '; }
  summary{
    margin-bottom: 0.5rem;
    margin-right: 1rem;
    position: relative;
    font-size: min(8vw,4rem);
    font-weight: bold;
    font-family: var(--fontMeowScript);
    text-shadow:  2px 2px 5px var(--secondary-text-color), -2px -2px 5px white;
    &::marker{ content: '+ '; }
  }
}.panels{padding:.5rem;background-color:var(--background-color-d);border-radius:var(--border-radius);border:.15rem solid var(--secondary-text-color);box-shadow:var(--box-shadow);.innerPanel{
    margin-top: 0.5rem;
    padding: 0.15rem 0.5rem;
    background-color: var(--background-color);
    border-radius: var(--border-radius);
    box-shadow: 1px 1px 5px black inset, -1px -1px 5px white inset;
    display: flex;
    flex-direction: column;
    .time-period{
      font-size: 0.75rem;
      text-align: right;
    }
    .heading{
      font-size: 1.15rem;
      font-weight: bold;
    }
    .body{ font-size: 0.75rem; }
  }
}.landingPage{grid-template-columns:1fr;grid-template-rows:1fr 1fr;justify-content:center;align-content:center;>div{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
}.circlePortrait img{width:min(60vw,500px)}.slogan{color:var(--secondary-text-color);text-shadow:var(--text-shadow);text-align:center;font-size:min(6vw,2.5rem)}#about{grid-template-columns:1fr;grid-template-rows:1fr 1fr;background:url(images/xflorence_chair.png.pagespeed.ic.AfoUdKgno3.png) right bottom no-repeat , var(--background-color-d);details p {
    color: white;
    text-shadow: 0 0 10px var(--text-color);
  }
}#background{grid-template-columns:1fr;grid-template-rows:1fr 1fr 1fr 1fr;grid-template-areas:"panel2" "panel3" "panel3" "panel3";gap:1rem;.circlePortrait{ display: none; }
}.flexPanel{display:flex;flex-direction:column;justify-content:space-between}#skills details>div{display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));gap:.5rem;padding:10px;p{
    padding: 0.25rem;
    text-align: center;
    border: 2px solid var(--secondary-text-color);
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    background-color: var(--background-color);
  }
}.panelsContainer{display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));gap:1rem}.threeRowSubgrid{display:grid;grid-template-rows:subgrid;grid-row:span 3;gap:0}.subpage{padding:.5rem;.panelsContainer{
    margin: 0.5rem 0;
  }
  /*.panels:not(:last-child){
    margin-bottom: 1rem;
  }*/
}@media (orientation:landscape) and (min-width:1000px){h1{text-align:left;font-size:5rem}h2,details summary{font-size:3rem;: }.panels{.innerPanel{
      .time-period,.body{ font-size: 1rem; }
      .heading{ font-size: 1.25rem; }
    }
  }section{padding:3rem}.landingPage{grid-template-columns:1fr 1fr;grid-template-rows:1fr;gap:1rem;>div{
      align-self: center;
      justify-self: end;
      &.social-media{
        position: fixed;
        z-index: 9;
        flex-direction: row;
        align-items: flex-end;
        top: auto;
        bottom: 0.5rem;
        left: 50%;
        transform: translateX(-50%);
        button {
          &:hover::before,
          &:focus::before,
          &:active::before{
            transform: translateY(-2.5rem) rotate(0);
            opacity: 1;
            color: white;
          }
          &::before {
            content: attr(social-name);
            position: absolute;
            background-color: var(--accent-color);
            color: var(--text-color);
            font-size: 0.75rem;
            padding: 0.5rem;
            border-radius: var(--border-radius);
            box-shadow: var(--box-shadow);
            transform: translateY(-0.5rem) rotate(25deg);
            opacity: 0;
            transition: var(--transition);
          }
          &::after{
            content: "";
            position: absolute;
            width: 0;
            height: 0;
            border-left: 0.25rem solid transparent;
            border-right: 0.25rem solid transparent;
            border-top: 0.5rem solid var(--accent-color);
            transform: translateY(0) rotate(25deg);
            opacity: 0;
            transition: var(--transition);
          }
          &:hover::after,
          &:focus::after,
          &:active::after{
            transform: translateY(-1.4rem);
            opacity: 1;
          }
        }
      }
      .slogan{
        text-align: left;
        font-size: 2rem;
      }
      &.landingText{ align-items: flex-start; }
    }
  }#background{grid-template-rows:1fr 1fr;grid-template-columns:1fr 1fr;grid-template-areas:"panel2 panel3" "panel1 panel3";.circlePortrait{
      display: flex;
      justify-content: flex-start;
      img{ width: min(100%,500px); }
    }
  }}