@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Old+Standard+TT:ital,wght@0,400;0,700;1,400&display=swap');

:root{
    /* --spacing: 1rem; */
    background-color: #0d0d0d;
    color: white;
    font-size: 115%;
    font-family: "Noto Sans", sans-serif;
    scroll-padding-top: 90px;
}

@media print {
    html,body {
        background-color: white;
    }
    p em {
        font-style: italic;
    }
}



/* HEADER */
h1{
    font-size: 1.4rem;
    padding-inline: 1rem;
    padding-block-start: 4rem;
    text-align: center;
    font-weight: 500;
    @media (width > 500px) {
        font-size: 1.6rem;
        
    }
     @media (width > 625px) {
        font-size: 2rem;
        
    }
     @media (width > 1270px) {
        font-size: 2.6rem;
        
    }
    @media print {
        color: black;
        padding-block: 0.05rem;
    }
    

}

h2 {
    font-size: 1rem;
    font-weight: 300;
    padding-block-start: 1%;
    padding-block-end: 3%;
    text-align: center;
     @media (width > 625px) {
        font-size: 1.3rem;
        padding-block-end: 2%;
        
    }
     @media (width > 1270px) {
        font-size: 1.7rem;
        padding-block-end: 1%;
        
    }
    @media print {
        color: black;
        padding-block: 0.05rem;
    }
   
}


.names {
    font-size: 1.75rem;
    font-family: "Old Standard TT", serif;
    font-weight: 700;
    font-style: normal;
    text-transform: uppercase;
    padding-inline: 2rem;
    /* background-color: #FFFAE3; */
    background-color: #E6E6E6;
    text-align: left;
    color: black;
    line-height: 90%;
    margin-inline-end: 2rem;
    margin-block-end: 2rem;
    margin-block-start: 4.5rem;
    padding-block-start: 1rem;
    
    em {
        color: #FF2424;
    }
      @media (width > 449px) {
        font-size: 2.6rem;
        padding-inline-end: 15rem;
        
    }
    @media (width > 625px) {
        font-size: 2.8rem;
        padding-inline-end: 15rem;
    }
     @media (width > 675px) {
        font-size: 3.2rem;
        padding-inline-end: 15rem;
        
    }
     @media (width > 776px) {
        font-size: 3.4rem;
        margin-inline-end: 2.5rem;
        
    }
 @media (width > 827px) {
        font-size: 3.8rem;
        padding-inline-end: 25rem;
        margin-inline-end: 3rem;
       
        
    }


     @media (width > 1270px) {
        font-size: 4.2rem;
        padding-inline-end: 30rem;
        padding-inline-start: 3.8rem;
        padding-block-start: 3%;
        padding-block-end: 2%;
        margin-inline-end: 3.75rem;
    }

    @media (width > 1400px) {
        font-size: 4.4rem;
    }

  @media (width > 1543px) {
        font-size: 4.8rem;
         margin-inline-end: 4.2rem;
         padding-inline-end: 40rem;
    }

       @media print {
        color: black;
        background-color: white;

        em {
            color: #818181;
        }
    }

}




/* APPLE STYLE BUTTONS (BLUE) AND (STROKE) */
ol {
  text-align: center;
  padding-block: 3%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  gap: 1rem;
  @media print {
        visibility: hidden;
    }

    @media (width > 750px) {
        ol{
            padding-block: 1rem;
        }
    }

    @media (width > 850px) {
            padding-block: 1rem;
    }
     @media (width > 1000px) {
            padding-block: 1rem;
    }

    @media (width > 1200px) {
            padding-block: 1.5rem;
    }

}

/* work on nesting */
.buttons{
  margin-block-end: 3rem;
  li:hover {
        background-color: #1388FE;
        color: #ffffff;
        }

  .blue {
      background-color: #0171e3;
      padding-block: 0.4rem;
      /* from the class website; border radius*/
      border-radius: 1.2rem;
      @media (width > 1270px) {
        padding-block: 0.6rem;
        border-radius: 1.6rem;
       
    }
      
  }
  
  .stroke {
      color: #0171e3;
      border-color: #0171e3;
      border-style: solid;
      padding-block: 0.4rem;
      border-width: 0.1rem;
      border-radius: 1.2rem;
      @media (width > 1270px) {
        padding-block: 0.6rem;
        border-radius: 1.6rem;
       
    }
  }
}



li {
    /* block-size: 2rem; */
    /* padding: 3%; */
    font-weight: 300;
    font-size: 0.7rem;
    width: 5rem;

     @media (width > 1270px) {
        font-size: 1rem;
        
    }
    @media (width > 1270px) {
        width: 6rem;
       
    }
/* increase size of top bar text  + bottom bar */
    /* .bar {
        @media (width > 625px) {
        font-size: 1rem;
        
    }

    } */
     
}




/* NAVIGATION AND BOTTOM FOLIO */
.bar {
    text-align: center;
    background-color: color-mix(in srgb, #181818, transparent 70%); ;
    padding-block: 0.1rem;
    position: sticky;
    top: 0;
    font-weight: 300;
    font-size: 0.7rem;
    backdrop-filter: blur(2.5rem); 
     
    
      @media print {
        visibility: hidden;
    }

     @media (width > 645px) {
            padding-block: 0.1rem;
    }
    
    li:hover {
        color: #0171E3;
    }

    p:hover {
        color: #0171E3; 
    }
    
}

/*from MDN to target p wihtout affecting big letter */
  @media print {
       p:not(.bigletter) {
        color: black;
        background-color: white;
  }
     }  




/* PARAGRAPHS */
.apple {
    background-color: #282828;
    border-radius: 0rem;
    margin: 0;
    font-weight: 300;

   @media (width > 650px) {
    border-radius: 0.5rem;
    margin: 1rem;
   }
   @media print {
    background-color: white;
   }

}

em {
    color: #0171e3;
}

p{
    /* margin-block-start: 2calc(2 * var(--spacing)); */
    /* padding-block: 8%; */
    line-height: 160%;
    font-size: 0.85rem;
    padding: 1rem;
     @media (width > 675px) {
        font-size: 1rem;
        }
}

/*from MDN to target p wihtout affecting big letter */
  @media print {
       p:not(.bigletter) {
        color: black;
        background-color: white;
        em {
            color: black;
        }
  }
     }  

/* part 2 */
.part2 {
    background-color: #FFFAE3;
    font-size: 2rem;
    font-weight: 400;
    font-family: "Old Standard TT", serif;
    font-style: normal;
    background-color: #E6E6E6;
    text-align: left;
    color: black;
    /* margin-inline-end: 1rem; */
    line-height: 150%;
    padding-inline-start: 0.5rem;
    margin-block-start: 4rem;
    padding-block-end: 3rem;
   
    @media (width > 650px) {
        margin-inline-end: 2rem;
    }
    
    @media (width > 950px) {
        padding-inline-start: 1rem;
        padding-inline-end: 2rem;
        margin-inline-end: 2rem;
        }
    @media print {
        background-color: white;
        padding-inline-start: 1.5rem;
      }

    @media (width > 1270px) {
        margin-inline-end: 3.75rem;
        /* margin-inline-end: 3.75rem; */
          /* display: grid; */
        /* grid-template-columns: 1fr 1fr; */
        /* grid-template-areas: 
        'blockquote blockquote'
        'bodycopy bodycopy'; */
      

      p{
        /* display: flex; */
        font-size: 1.2rem;
        @media (width > 1543) {
            /* padding-inline-start: 30%; */
        }
      

      }      
    } 


    @media (width > 800px) {
        p{
            padding-inline-start: 2rem; 
            max-width: 65ch;
        }
}

    @media (width > 1000px) {
        p{
            padding-inline-start: 2rem; 
            max-width: 80ch;
        }
}

@media (width > 1370px) {
        p{
            padding-inline-start: 3rem; 
            max-width: 80ch;
        }
}

@media (width > 1440px) {
        p{
            padding-inline-start: 3rem; 
            max-width: 90ch;
        }
}


     @media (width > 1543px) {
        font-size: 4.8rem;
         margin-inline-end: 4.2rem;
         padding-inline-end: 6rem;

}


    
    .bigletter {
        line-height: 90%;
        font-weight: 700;
        text-transform: uppercase;
        font-size: 2.5rem;
        padding-inline-start: 1rem;
        padding-block-start: 3rem;
         @media (width > 500px) {
        font-size: 2.8rem;}
         @media (width > 625px) {
        font-size: 3.2rem;} 
        @media (width > 800px) {
        padding-inline-start: 2rem; 
        line-height: 100%;
        font-size: 3.5rem;
    }
         @media (width > 1000px) {
        font-size: 3.9rem;
        padding-inline-start: 2rem; 
        line-height: 100%;
        padding-inline-end: 10rem;
    } 
        @media (width > 1270px) {
        font-size: 4.7rem;  
        padding-inline-start: 2rem; 
        grid-area: blockquote;   
        padding-block: 4rem;      
        } 

        @media (width > 1369px) {
            padding-inline-end: 6rem;
            font-size: 6rem;
            padding-inline-start: 2.6rem;
            
        }
        @media (width > 1400px) {
            padding-inline-end: 8rem;
            font-size: 6rem;
            padding-inline-start: 2.6rem;
            
        }

              @media print {
        color: black;
        background-color: white;

        em {
            color: #818181;
        }
    }
    }  
    em {
        color: #FF2424;}


} 




/* part 3 */

.part3 {
    background-color: #FFFAE3;
    font-size: 1.4rem;
    line-height: 90%;
    font-weight: 700;
    text-transform: uppercase;
    font-family: "Old Standard TT", serif;
    font-style: normal;
    background-color: #E6E6E6;
    text-align: left;
    color: black;
    margin-inline-end: 2rem;
    padding-inline-start: 1.5rem;
    padding-block: 1rem;
    margin-block-end: 3rem;
    padding-inline-end: 1rem;

     em {
        color: #FF2424;
    }
      @media (width > 500px) {
        font-size: 1.6rem;
     @media (width > 625px) {
        font-size: 2rem;
        
    }
     @media (width > 950px) {
        padding-inline-end: 8rem;
        padding-inline-start: 2.3rem;
        
    }
     @media (width > 1050px) {
        padding-inline-end: 12rem;

        
    }
    }
    @media (width > 1270px) {
        margin-inline-end: 3.75rem;
        font-size: 3rem;
        padding-inline: 3.8rem;
        padding-block: 2rem;     
    } 

    @media (width > 1400px) {
            padding-inline-end: 10rem;
            font-size: 3.5rem;
            /* padding-inline-start: 2.6rem; */
            
        }
         @media print {
        color: black;
        background-color: white;

        em {
            color: #818181;
        }

}
}







#part3 {
    margin-block-start: 4rem;
    margin-block-end: 2rem;
       @media (width > 650px) {
     margin: 2rem;   
}
     @media (width > 900px) {
     margin: 4rem;   
}
    @media (width > 1050px) {
     margin: 6rem;  
     margin-inline: 10rem; 
}
    @media (width > 1270px) {
       margin-block: 6rem; 
       margin-inline: 15rem;
    }

    @media (width > 1400px) {
       margin-block: 8rem; 
       margin-inline: 20rem;
}

}



/* start media queries */
/* sticky nav bar blur */


#part1 {
      @media (width > 650px) {
     margin: 2rem;   
}
   @media (width > 900px) {
     margin: 4rem;   
}

@media (width > 1050px) {
     margin: 6rem;  
     margin-inline: 10rem; 
}
    @media (width > 1270px) {
       margin-block: 6rem; 
       margin-inline: 15rem;
    }

    @media (width > 1400px) {
       margin-block: 8rem; 
       margin-inline: 20rem;
}

}



/* @media (width > 375px){
    :root {
        font-size: 150%;
    } */
/* } */



/******************* STILL TO DO
finish print (boxes, alignment)