/*STYLE FILE- linked to the index*/

   /*
   @import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700&display=swap');
   @import url('https://fonts.googleapis.com/css2?family=Barlow:wght@400;500;600;700&display=swap');
   @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
   @import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&display=swap');
   @import url('https://fonts.googleapis.com/css2?family=Rajdhani:wght@400;500;600;700&display=swap');
   */
   @import url('https://fonts.googleapis.com/css2?family=Barlow:wght@400;500;600;700&display=swap');
    body {
      margin: 0;
      font-family: 'Barlow', sans-serif;
      background: #050505;
      color: #ffffff;
    }

    .hero{
    
    height:340px;
    
    background:
    
    linear-gradient(
    rgba(0,0,0,.45),
    rgba(0,0,0,.75)
    ),
    
    url("images/banner.png");
    
    background-size:cover;
    
    background-position:center;
    
    display:flex;
    
    justify-content:center;
    
    align-items:center;
    
    text-align:center;
    
    border-bottom:1px solid rgba(255,255,255,.08);
    
    }
    
    .hero-overlay{
    
    padding:20px;
    
    }
    
    .hero h1{
    
      margin:0;
    
      font-size:96px;
    
      font-weight:700;
    
      letter-spacing:-2px;
    
    }
    
    .hero p{
    
    color:#d5d5d5;
    
    margin-top:20px;
    
    font-size:18px;
    
    letter-spacing:4px;
    
    }

    nav{
    
    display:flex;
    
    justify-content:center;
    
    gap:50px; /* note this should be changed if I add more sections, so that everything fits */
    
    background:#050505;
    
    padding:18px;
    
    position:sticky;
    
    top:0;
    
    z-index:100;
    
    border-bottom:1px solid rgba(255,255,255,.08);
    
    }

      nav span{

      color:
      
      rgba(255,255,255,.15);
      
      }

    nav a {
      color: #e6e6e6;
      text-decoration: none;
      font-size: 14px;
    }

    nav a:hover{
    
    color:white;
    
    text-shadow:
    0 0 10px rgba(255,255,255,.5);
    
    }

   @media(max-width:800px){
   
     nav {
       justify-content: flex-start;
       gap: 25px;
       overflow-x: auto;
       white-space: nowrap;
       padding: 15px 20px;
     }
   
     nav a {
       font-size: 13px;
       flex-shrink: 0;
     }
   
     nav span {
       flex-shrink: 0;
     }
   
   }

    section {
      max-width: 900px;
      margin: auto;
      padding: 40px 20px;
    }

    h2{
    
    border-left:2px solid white;
    
    padding-left:14px;
    
    margin-bottom:30px;
    
    font-size:30px;
    
    font-weight:600;
    
    }

    .card{
    
      background:#111111;
    
      padding:20px;
    
      margin:15px 0;
    
      border-radius:14px;
    
      border:1px solid #ffffff12;
    
      transition:.2s;
    
      box-shadow:
      0 10px 30px rgba(255,255,255,.03);
    
    }
    
    .overview-card{
    
    display:grid;
    
    grid-template-columns:
    2fr 1fr;
    
    gap:50px;
    
    align-items:center;
    
    }
    
    .overview-card > div:last-child{
    
    border-left:
    1px solid rgba(255,255,255,.10);
    
    padding-left:40px;
    
    }
    
    @media(max-width:800px){
    
    .overview-card{
    
    grid-template-columns:
    1fr;
    
    }
    
    .overview-card > div:last-child{
    
    border-left:none;
    
    padding-left:0;
    
    padding-top:20px;
    
    border-top:
    1px solid rgba(255,255,255,.10);
    
    }
    
    }
    

    .card:hover{
    
      transform:
      translateY(-4px);
    
      border-color:
      rgba(255,255,255,.20);
    
    }

    .card h3 {
      margin-top: 0;
    }

    .card img {
      width: 100%;
      margin-top: 10px;
      border-radius: 10px;
      border: 1px solid #ffffff18;
    }
/*technical skills section css */
    .skills-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 20px;
    }
    
    .skills-grid .card {
      margin: 0;
    }

    .skills-grid ul {
      list-style: none;
      padding: 0;
      margin: 20px 0 0;
    }
    
    .skills-grid li {
      margin: 10px 0;
    }
    
    .skills-grid li::before {
      content: "■";
      font-size: 7px;
      margin-right: 12px;
      vertical-align: middle;
    }
    
    @media(max-width:800px){
      .skills-grid {
        grid-template-columns: 1fr;
      }
    }

    a {
      color: #f0f0f0;
      text-decoration: none;
    }

    a:hover {
      color:white;
      opacity:.75;
    }

    .btn{
    
    display:inline-block;
    
    background:white;
    
    color:black;
    
    padding:12px 18px;
    
    border-radius:6px;
    
    font-weight:700;
    
    border:
    1px solid white;
    
    transition:.2s;
    
    }
    
        .btn:hover{
        
        background:#e5e5e5;
        
        transform:
        translateY(-2px);
        
        }

   .image-btn {
     display: inline-block;
     background: white;
     color: black;
     padding: 8px 14px;
     border-radius: 5px;
     font-size: 13px;
     font-weight: 600;
     border: 1px solid white;
     transition: .2s;
   }
   
   .image-btn:hover {
     background: #e5e5e5;
     transform: translateY(-2px);
   }

   .image-buttons {
     display: flex;
     flex-wrap: wrap;
     gap: 10px;
     margin-top: 15px;
   }
   
               .contact-links{
        
        display:flex;
        
        flex-direction:column;
        
        gap:14px;
        
        }
        
        .contact-links a{
        
        display:flex;
        
        align-items:center;
        
        gap:10px;

        line-height:1;  
        
        }
        
        .contact-links img{
        
        width:18px;
        
        height:18px;
        
        padding:0px;
        
        border:1px solid rgba(255,255,255,.15);
        
        border-radius:3px;
        
        background:#111111;
        
        object-fit:contain;

        flex-shrink:0;  

        vertical-align:middle;  
        
        transition:.2s;
        
        }
        
        .contact-links a:hover img{
        
        border-color:white;
        
        }


                  ::selection{
              background:white;
              color:black;
              }
/*regular project section formatting */
    .project-details {
      background: #111111;
      border: 1px solid #ffffff12;
      border-radius: 14px;
      margin: 15px 0;
      overflow: hidden;
      transition: .2s;
    }
    
    .project-details summary {
      cursor: pointer;
      padding: 20px;
      font-size: 20px;
      font-weight: 600;
      list-style: none;
    }
    
    .project-details summary::-webkit-details-marker {
      display: none;
    }
    
    .project-details summary::before {
      content: "▸";
      margin-right: 12px;
    }
    
    .project-details[open] summary::before {
      content: "▾";
    }
    
    .project-details summary:hover {
      background: #181818;
    }
    
    .project-content {
      padding: 0 20px 20px 20px;
    }

    .project-layout {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 30px;
      align-items: center;
      margin-bottom:15px; /*Note: spacing between project sections*/
    }
    
    .project-layout img {
      width: 100%;
      border-radius: 10px;
      border: 1px solid #ffffff18;
    }
    
    .project-description {
      border-left: 1px solid rgba(255,255,255,.10);
      padding-left: 30px;
      font-size: 14px;
      line-height: 1.6;
    }
    
    @media(max-width:800px){
      .project-layout {
        grid-template-columns: 1fr;
      }
    
      .project-description {
        border-left: none;
        border-top: 1px solid rgba(255,255,255,.10);
        padding-left: 0;
        padding-top: 20px;
      }
    }

/*two images side by side format */
          .project-images-two {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 15px;
      }
      
      .project-images-two img {
        width: 100%;
        border-radius: 10px;
        border: 1px solid #ffffff18;
      }

/* three images in one row format */
      .project-images-three {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 15px;
        max-width: 650px;
        margin: 0 auto 20px;
      }
      
      .project-images-three img {
        width: 100%;
        border-radius: 10px;
        border: 1px solid #ffffff18;
      }

/* four images in one row format */
      .project-images-four {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 15px;
        max-width: 650px;
        margin: 0 auto 20px;
      }
      
      .project-images-four img {
        width: 100%;
        border-radius: 10px;
        border: 1px solid #ffffff18;
      }
      
/* description underneath four images section */
      .project-description-four {
        border-top: 1px solid rgba(255,255,255,.10);
        border-bottom: 1px solid rgba(255,255,255,.10);
        padding: 15px 0;
        margin-bottom: 25px;
        font-size: 14px;
        line-height: 1.6;
      }
      
      .project-description-four p {
        margin: 0;
      }
      
      /* mobile multi-image formating*/
      @media(max-width:800px){
         
         .project-images-three {
          grid-template-columns: 1fr 1fr;
          gap: 15px;
        }
         
        .project-images-four {
          grid-template-columns: 1fr 1fr;
          gap: 15px;
        }
      
        .project-description-four {
          padding: 15px 0;
          font-size: 14px;
          line-height: 1.6;
        }
      
      }

/*to help with height and spacing*/
      .project-images-two img,
      .project-images-three img,
      .project-images-four img {
        width: 100%;
        height: auto;
        object-fit: initial;
        justify-self: center;
      }


 /*cad section formating*/   
      .cad-layout {
        display: grid;
        grid-template-columns: 1.2fr 1fr;
        gap: 30px;
        align-items: center;
        margin-bottom: 25px; /*Note: spacing between project sections*/
      }
      
      .cad-layout img {
        width: 100%;
        border-radius: 10px;
        border: 1px solid #ffffff18;
      }
      
      .cad-description {
        border-left: 1px solid rgba(255,255,255,.10);
        padding-left: 30px;
        font-size: 14px;
        line-height: 1.6;
      }
      
      @media(max-width:800px){
        .cad-layout {
          grid-template-columns: 1fr;
        }
      
        .cad-description {
          border-left: none;
          border-top: 1px solid rgba(255,255,255,.10);
          padding-left: 0;
          padding-top: 20px;
        }
      }

      /* project info section */
      .project-info {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 20px;
        margin: 0 0 25px;
        padding: 15px 20px;
        border-top: 1px solid rgba(255,255,255,.10);
        border-bottom: 1px solid rgba(255,255,255,.10);
      }
      
      .project-info div {
        display: flex;
        flex-direction: column;
        gap: 5px;
      }
      
      .project-info span {
        font-size: 11px;
        text-transform: uppercase;
        letter-spacing: 1px;
        color: #999;
      }
      
      .project-info strong {
        font-size: 14px;
        font-weight: 500;
      }
      
      @media(max-width:800px){
        .project-info {
          grid-template-columns: 1fr 1fr;
          gap: 15px;
        }
      }

/*image caption stuff */
   .image-caption {
       text-align: left;
   }
   
   .image-caption p {
       margin: 8px 0 0;
       font-size: 12px;
       color: #aaa;
   }

/*small image format class*/
   .small-image img {
     width: 60%;
     height: auto;
     display: block;
     margin: 0 auto;
   }

    html {
      scroll-behavior: smooth;
    }

    footer {
      text-align: center;
      padding: 30px;
      font-size: 12px;
      color: #999;
      border-top: 1px solid #2a2a2a;
      margin-top: 40px;
    }