@layer reset{
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* https://kilianvalkhof.com/2022/css-html/your-css-reset-needs-text-size-adjust-probably/ */
html {
  -moz-text-size-adjust: none;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
}

body,
h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd {
  margin: 0;
}

/* https://www.scottohara.me/blog/2019/01/12/lists-and-safari.html */
[role="list"] {
  list-style: none;
  margin: 0;
  padding: 0;
}

body {
  min-block-size: 100vh;
  line-height: 1.6;
}

h1,
h2,
h3,
button,
input,
label {
  line-height: 1.1;
}

h1,
h2,
h3,
h4 {
  text-wrap: balance;
}

p,
li {
  text-wrap: pretty;
}

img,
picture {
  max-inline-size: 100%;
  display: block;
}

input,
button,
textarea,
select {
  font: inherit;
}

}

@layer base{
    :root{
        --ff-body: 'Open Sans';
        --clr-background:#ffffff;
        --clr-font-display:#0a0a0a;
        --clr-separator:#f5f5f5;
        --clr-font-body:#737373;
        --fs-300: 0.875rem;
        --fs-400: 1rem;
        --fs-500: 1.125rem;
        --fs-600: 1.25rem;
        --fs-700: 1.5rem;
        --fs-800: 2rem;
        --fs-900: 3.75rem;
        --fs-1000: 3.75rem;
        --font-size-sm: var(--fs-300);
        --font-size-regular: var(--fs-400);
        --font-size-md: var(--fs-500);
        --font-size-lg: var(--fs-600);
          @media (width > 760px) {
             --fs-300: 0.875rem;
            --fs-400: 1rem;
            --fs-500: 1.25rem;
            --fs-600: 1.5rem;
            --fs-700: 2rem;
            --fs-800: 3rem;
            --fs-900: 5rem;
            --fs-1000: 7.5rem;
        }
    }

    body{
        font-family: var(--ff-body);
        font-size:var(--fs-300);
        color: var(--clr-font-display);
        background-color:var(--clr-background);
    }

    h2{
        display:flex;
        margin-top:25px;
        justify-content:flex-start;
        margin-bottom:15px;

    }
   ul svg {
        width : 36px;
        height : 36px;
    }
    p a
    { 
        text-decoration: underline;
    }
}

@layer layout{
    .home-layout
    {
        display:flex;
        justify-content: center;
        padding-inline:10px;
        margin-inline:10px;
        align-items: center;
        min-height: 100vh;
        opacity: 0;
        transform: translateY(30px);
        animation: fadeInUp 0.8s ease-out forwards;

    }

    .font-description
    {
        margin-bottom:25px;
        color:var(--clr-font-body);
    }

    .routes-layout
    {
        display:flex;
        flex-direction: column;
        margin-inline:10px;
        padding-inline:10px;
        justify-content:center;
        align-items: center;
        overflow-x:hidden;
        opacity: 0;
        transform: translateY(30px);
        animation: fadeInUp 0.8s ease-out forwards;
    }
    .profile-img
    {
       /* clip-path: inset(26% 5% 15% 18%);*/
          width: 140px;
          height: 150px;
          object-fit: cover;
          object-position: 20% 80%; 
    }
 
    .p-inline{
     padding-inline: 40px;
    }

    .site-info
    {
        height:100px;
        width:350px;
    }

     @media (max-width: 500px) {
                 .home-layout,
                 .routes-layout {
                     padding-inline: 5px;
                     margin-inline: 5px;         
                }
                .profile-img{
                   width:150px;
                  height:115px; 
                  
                } 
                .work-year
                {   
                    margin-right:20px;
                }
                 .site-info {
                     width: 100%; 
                     max-width: 300px;
                 }
                .others-layout
                {
                  &[data-padding="compact"] {
                    padding-inline:90px; 
                } 


                } 
                }

    .work-section
    {
        display:grid;
        grid-template-areas: 'year position'
                               '.  location'
                                '.   description';
        grid-template-columns: 1fr 4fr;
    }
       a[href*="github.com"],a[href*="others"],a[href*="work"],a[href*="projects"] {
            color: black
}
}

@layer components{

   .photo-img
    {
          width: 140px;
          height: 150px;
          object-fit: cover;
          object-position: 20% 80%;
          flex-shrink: 0;
          user-select: none;
    }
    .icons
    {
      list-style-type: none;
      margin: 0;
      padding: 0;
      display: flex;
      gap: 15px;
      justify-content: center; 
    }
    .list
    {
      list-style-type: none;
      margin: 0;
      padding: 0;
      display: flex;
      flex-direction:column; 
      justify-content: center;
      align-items: flex-start; 
      gap:5px;
    }
    .sublist
    {
        list-style-type:none; 
        color:var(--clr-font-body); 
        padding:0;
    }
    .list-separator
    {
        display:flex;
        gap:5px;
        border-bottom: 1px solid var(--clr-separator);
        margin-bottom: 25px;
    }
    .site-profile
    {
        display:flex;
        gap:25px;
    }
    .description-space
    {
        margin-bottom:15px;
    }
    .work-year
    {
        grid-area: year;
    }
    .work-position
    {
        grid-area:position;
    }
    .work-location
    {
        grid-area:location;
        color:var(--clr-font-body);
        margin-bottom:5px;
    }
    .work-description
    {
        grid-area:description;
        color:var(--clr-font-body);
    }
    .photo-carousel
    { 
        overflow-x: auto;
        overflow-y: hidden;
        scroll-behavior: smooth;
        scroll-snap-type: x mandatory; 
        scrollbar-width: none;
        -ms-overflow-style: none;
    }
    .photo-carousel::-webkit-scrollbar {
        display: none;
    }
    .photo-carousel:active {
        cursor: grabbing;
    }
    .photo-carousel-container
    {
        display: flex;
        gap: 5px;
        width: max-content;
    }
    .photo-carousel .photo-img {
        scroll-snap-align: start;
    }
    .mem-vid-gallery
    {
        display:flex;
        flex-direction: column; 
        gap:15px;
    }
    .comp-vid-gallery
    {
        display:flex; 
        flex-direction:column;
        gap:15px;
    }

}

@keyframes fadeInUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@layer utilities{
.visually-hidden {
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
  }

.text-center {
    text-align: center;
  }
  .max-w{
    max-width:530px;
  }
    .mb 
  {
    margin-block:25px;
  } .font-size-sm { font-size: var(--font-size-sm); } .font-size-regular { font-size: var(--font-size-regular); } .font-size-md { font-size: var(--font-size-md);
  }
  .font-size-lg {
    font-size: var(--font-size-lg);
  }
}