/* ++++++++++
 * GOOGLE Fonts 
 ++++++++++ */
@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');
}

/* ++++++{"path":"/tauri/C/Users/norma/Documents/Entwicklung/Web-Entwicklung/floxzy.net/entwicklung/outfit.css"}++++
 * CSS-Variables 
 ++++++++++ */
:root{
  interpolate-size:       allow-keywords;         /*
  * Allows interpolation between keywords and numerical values.
  * Normally, CSS animations cannot smoothly transition between, for example,
  * auto and a fixed pixel size, because auto is not a fixed numerical value.
  * With allow-keywords, the browser can still enable such transitions.
  * 
  * Improves animations and transitions of layout sizes. For example, widths
  * or heights that change between auto, min-content, max-content, or fixed
  * length values can be smoothly animated.*/
  --background-color:     #ED7700;
  --background-color-d:   rgba(0,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:       0.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;
}

/* ++++++++++
 * generel formatting 
 ++++++++++ */
*{
  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;          /* setup of section scroll snapping */
}
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: 0.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: 0.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: 0.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;     /* positioning of scroll snapper */
  position: relative;
  padding: 0.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: 0.5rem;
  left: 0.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: 0.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: 0.5rem;
  
  background-color: var(--background-color-d);
  border-radius: var(--border-radius);
  border: 0.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 
 ++++++++++ */
.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 page 
 ++++++++++ */
#about{
  grid-template-columns: 1fr;
  grid-template-rows: 1fr 1fr;
  background: url(./images/florence_chair.png) right bottom no-repeat, var(--background-color-d);
  details p {
    color: white;
    text-shadow: 0 0 10px var(--text-color);
  }
}

/* ++++++++++
 * background page 
 ++++++++++ */
#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 and expertise 
 ++++++++++ */
#skills details > div{
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(15rem,1fr));
  gap: 0.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);
  }
}

/* ++++++++++
 * case studies
 ++++++++++ */
/*#caseStudies */.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;
}

/* ++++++++++
 * subpages
 ++++++++++ */
.subpage{
  padding: 0.5rem;
  .panelsContainer{
    margin: 0.5rem 0;
  }
  /*.panels:not(:last-child){
    margin-bottom: 1rem;
  }*/
}


/* ++++++++++
 * Media queries
 ++++++++++ */
@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); }
    }
  }
}