:root {

  /*whites*/
  --white-100: #FFF; /*Surfaces & Background*/


  /*grays*/
 --gray-100:#F5F5F5; /* Used for container bg containing cards or other content*/
 --gray-900: #181A1B; /*Copy*/



 /*blue grays*/
 --blue-gray-50: #ECEFF1;


 /*blues*/
  --blue-100: #EEF5FF; 

/*indigo*/
  --indigo-600: #3949AB;

/*teal*/
 --teal-50:#E0F2F1;
 --teal-200:#80CBC4;
 --teal-300:#4DB6AC;
 --teal-800:#00695C;



/*purple*/
 --purple-50:#F3E5F5;
 

 /*deep purple*/
 --deep-purple-900:#3B2443;

 /*red*/
 --red-50:#FFEBEE;
 --red-200:#EF9A9A;


/*deep-orange*/
 --deep-orange-100:#FFCCBC;



/*pink*/
 --pink-900:#880E4F;



 

 
 
 
 

 
  


 }


body {
  font-family: "Figtree", serif;
  font-optical-sizing: auto;
  font-size: 18px;
  font-weight: 300;
  line-height: 1.5;
  color: var(--copy);
  background-color: var(--white-100);
  margin: 0 auto 0 auto;
  padding: 0;
  width: 1240px; 
}


img, 
video {
  width: 100%;
  height: auto;
}




h1{
  font-family: "Figtree", sans-serif;
  font-optical-sizing: auto;
  font-size: 64px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--gray-900);
}


h2{
  font-family: "Figtree", sans-serif;
  font-optical-sizing: auto;
  font-size: 24px;
  font-weight:400;
  line-height: 1.5;
  color: var(--gray-900);
}


p, ul{
  font-family: "Figtree", sans-serif;
  font-optical-sizing: auto;
  font-size: 17px;
  font-weight: 300;
  line-height: 1.5;
  color: var(--gray-900);
}

ul{
  margin: 0 0 96px 0;
}

li{
  margin: 0 0 24px 0;
}


strong{
  font-weight: 600;
}


strong.content-list{
  display: block;
  margin: 36px 0 -8px 0;
}


.footer_font{
  font-family: "Figtree", serif;
  font-optical-sizing: auto;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--gray-900);
}


i{
  font-size: 24px;
  cursor: pointer;
  visibility: hidden;
}


a {
  text-decoration: underline;
  color: var(--indigo-600);
  
}
  

a:visited{
  color: var(--indigo-600);
}


a.mobile_mail_link{
  display: none;
}

h2 .material-symbols-outlined {
  /* Ensure the icon doesn't have its own weird spacing */
  display: inline-block;
  vertical-align: middle; 
  
  /* Match the thickness to your 1px border */
  font-variation-settings: 'wght' 400;
  }




button{
  background-color: var(--white-100);
  color: var(--gray-900);
  letter-spacing: 2px;
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  font-family: "Figtree", serif;
  font-optical-sizing: auto;
  border: 2px solid var(--gray-900);
  padding: 12px 18px;
  border-radius: 36px;
  transition-duration: 0.3s;
}


button:hover{
  cursor: pointer;
  background-color: var(--blue-100);
  border-color: var(--indigo-600);
  color: var(--indigo-600);
}

button.contact-card-button{
  background-color: var(--teal-200);
  color: var(--gray-900);
  letter-spacing: 2px;
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  font-family: "Figtree", serif;
  font-optical-sizing: auto;
  padding: 16px 48px;
  border-radius: 36px;
  transition-duration: 0.3s;
  border:none;

}

button.contact-card-button:hover{
  cursor: pointer;
  background-color: var(--teal-300);
}

button.about-me-linkedin{
   background-color: var(--blue-100);


}

header a, header nav a, a.logo, header nav a:visited{
  font-size: 13px;
  font-weight:600;
  border-radius: 24px;
  text-decoration: none;
  letter-spacing: 2px;
  color: var(--gray-900);
  padding: 8px;
  transition-duration: 0.3s;
}


header nav a:hover, a.logo:hover, header nav a:visited:hover{
  text-decoration: none;
  background-color: var(--blue-100);
  color: var(--indigo-600);
}


header{
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  left: 0;    
  top: 0;  
  background-color: var(--white-100);
  padding: 12px 0 12px 0;
  height: 48px;
  transition:  0.4s ease-in-out;
  text-transform: uppercase;
  z-index: 2;
}




nav a{
    margin: 0 24px 0 24px;
}

section{
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-gap: 24px 24px;
}

section.hero-container{
  margin: 96px 0 100px 0;
  padding: 96px 0 96px 0;
  text-align: center;
}

section.hero-container h1, 
section.hero-container h2,
section.hero-container p {
  grid-column: 3 / span 8;
}

section.hero-container svg{
  grid-column: 3 / span 8;
  margin: 0;
  padding: 0;
}

section.hero-container h1{
  margin: 0;
  padding: 0;
     
}

section.hero-container h2.hero-content{
  margin: 0;
}

/* Theese 'content containers' have an image to the left side and copy to the right. They're used on the home and about pages.
provide more white space between image and text.*/

section.content-container-left, section.content-container-right {
 margin:0 0 200px 0;
}

section.content-container-left button, section.content-container-right button{
  margin: 12px 0 0 0;
}

section.content-container-left a, section.content-container-right a {
  display: contents;
}

section.content-container-left img, section.content-container-left video{
 grid-column: 1 / span 7;
 border-radius: 24px;

}

section.content-container-left video{
 border: 1px solid rgba(0,0,0,0.05);
}

section.content-container-left h2{
  font-weight: 600;
  margin-top: 0;
  margin-bottom: 30px;
}

section.content-container-left p{
  margin: 0 0 24px 0;
}

section.content-container-left div.content-right{
  grid-column: 8 / span 5;
  padding: 0 0 0 72px;
  align-content: center;
  margin: 0;
}

/* Theese 'content containers' have an image to the right side and copy to the left. uSed on the home and about page.*/

section.content-container-right h2{
  font-weight: 600;
  margin-bottom: 30px;
}

section.content-container-right p{
  margin: 0 0 24px 0;
}

section.content-container-right div.content-left{
  grid-column: 1 / span 6;
  padding: 0 72px 0 0;
  align-content: center;
  margin: 0;
  
}

section.content-container-right img{
 grid-column: 6 / span 7;
 border-radius: 24px;

}

section.content-container-right div.about-intro-card{
  background-color: var(--yellow-100);
  border-radius: 24px;
  padding: 48px 96px 48px 96px;

}

section.content-container-right div.center-avatar{
  display: grid;
  grid-column: 7 / span 6 ;
  align-items: center;
}

section.career-highlights-card-container{
  display: grid;
 
}



section.career-highlights-card-container div.career-highlights-card{

  background-color: var(--teal-50);
  border-radius: 24px;
  padding: 60px;
  margin: -200px 0 -96px 0;
  grid-column: 7 / span 6;
 
}

section.career-highlights-card-container h1{
 font-size: 40px;
 font-weight: 700;
 color: var(--teal-800);
 margin: 0 0 -24px 0;
}

section.career-highlights-card-container h2{

  font-weight: 700;
  color: var(--gray-900);
}

section.career-highlights-card-container div.career-highlight{
  margin: 72px 0 0 0;

}



section.good-at-container{
  margin: 48px 0 0 0;
}

section.good-at-container h1, section.good-at-container h2{
  grid-column: span 7;
}

section.good-at-container h1{
  margin: 0;
}

section.good-at-container h2{
  margin: 0;
}

section.good-at-container div.good-at-table{
  grid-column: 1 / -1;
  background-color: var(--deep-orange-100);
  border-radius: 24px;
  padding: 48px;
  display: grid;
  grid-template-columns: 1fr 1fr; 
  gap: 32px;
  margin: 24px 0 96px 0;


}

section.good-at-container div.good-at-tile{
  grid-column: span 1;
  padding: 72px 24px 0 24px;
  border-radius: 24px;
  margin: -48px 0 0 0;
  
}

section.good-at-container div.good-at-tile h2{
  font-weight: 700;
  color: var(--pink-900);
}

section.good-at-container div.good-at-tile h1{
  font-size: 40px;
  font-weight: 700;
  color: var(--gray-900);
}


section.good-at-container div.good-at-tile p, section.career-highlights-card-container p{
  font-weight: 400;
  font-size: 17px;
  line-height: 1.6;
 
}

section.career-highlights-card-container strong{
  font-weight: 700;
}

/* End of content boxes*/


/*This is the start of case study content containers*/
section.project-header{
  border-radius: 24px;
  padding: 48px 0 48px 0;
  display: grid;
  margin: 0 0 96px 0;
}

section.project-header#adt{
  background-image: url("./images/saved_media/adt_header_background.png");
  background-position: center; 
  
}

section.project-header#adt video{
  border: none;
}


section.case-study-info{
  margin: -100px 0 0 0;
  padding: 24px 8px 24px 8px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  width: 100%;
}

section.case-study-info div:nth-child(1){
  justify-self: end;
}

section.case-study-info div:nth-child(2){
  justify-self: center;
  padding: 0 48px 0 48px;
}

section.case-study-info div:nth-child(3){
  justify-self: start
}

section.case-study-info h2{
  font-weight: 600;
  text-align: center;
  margin: 0 0 8px 0;
}

section.case-study-info p{
  margin: 0 0 48px 0;
}


 section.project-header video{
  grid-column: span 12 ;
  border-radius: 24px;
  max-height: 1000px;
  padding: 0;
  border: 1px solid var(--blue-gray-50);
}

section.project-header img{
 grid-column: span 12;
 border-radius: 24px;
}


section.project-details{
  background-color: var(--gray-100);
  margin: 96px 0 96px 0;
  padding: 72px 24px 72px 24px;
  border-radius: 24px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: space-evenly;
  align-items: center;
}

section.project-details#saved_media_cards{
  background-color: var(--white-100);
  margin: -48px 0 -48px 0;

}

div.project-details-box{
  flex: 1 1 300px;          /* grow, shrink, base width */ 
  max-width: 300px;         /* optional limit for large screens */
  
  display: flex;
  flex-direction: column;
  height: 450px;
  padding: 12px 24px 36px 24px;
  background-color: var(--white-100);
  border: 1px solid #F1F3F4;
  border-radius: 24px; 
}

div.project-details-box#saved_media_card_1{
  height: auto;
  background-color: var(--teal-50);
 
}



div.project-details-box#saved_media_card_2{
  height: auto;
  background-color: var(--deep-orange-100);
}

div.project-details-box#saved_media_card_3{
  height: auto;
  background-color: var(--purple-50);

}


div.project-details-box h2{
  font-size: 24px;
  font-weight: 600;
  margin:0 0 24px 0;
  border-bottom: 0.25px solid var(--gray-900);
  line-height: 3;
  margin-bottom: 24px;
}

div.project-details-box p{
 margin: 0 0 24px 0;
}

div.project-details-box h2, div.project-details-box p{
  padding: 0 18px 0 18px;
}


section.project-full{
  border-radius: 24px;
  padding: 24px 0 24px 0;
  display: grid;
}

section.project-full img{
  grid-column: span 12;
   margin: 72px 0 72px 0;

}

section.project-full video{
  grid-column: span 12;
   margin: 72px 0 72px 0;
  border-radius: 24px;
  border: 1px solid var(--blue-gray-50);
}

section.project-full video.motion_ring{
  grid-column: 1 / span 12;
  max-height: 660px;
  background-color: var(--gray-100);
  padding: 48px 0 48px 0;

  
}

section.project-full div.project-full-content-title, section.project-full div.project-full-content-text{
  grid-column: 4 / span 6;
}

section.project-full div.project-full-content-title h2{
  margin: 0 0 -12px 0;
  padding: 0 12px 0 12px;
  font-weight: 600;
}

section.project-full div.project-full-content-text p{
  padding: 0 12px 0 12px;
}


section.project-full div.project-full-content-text{
margin: 0 0 24px 0;

}

section.contact-card{
  display: grid;
  margin: 48px 0 72px 0;

}

section.contact-card div{
  padding: 12px 48px 48px 48px;
  background-color: var(--teal-50);
 border-radius: 24px;
 grid-column: 4 / span 6;
 text-align: center;
}



section.contact-card h2{
  font-weight: 700;
  font-size: 32px;
  color: var(--teal-800);
  
}

section.contact-card p{
  margin: 0 0 36px 0;

}

section.contact-card .material-symbols-outlined{
  font-weight: 600;
  align-items: center;
  font-size: 32px;
  padding: 0 6px 0 0;
}


section.more_projects {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem; 
  padding: 2rem;
}


div.more_projects_title h1 {
  font-size: 28px;
  font-weight: 700;
  text-align: center;
  padding: 0 0 16px 0;
}

.tiles_row {
  display: flex;
  justify-content: center; 
  flex-wrap: wrap;        
  gap: 48px;               
  width: 100%;
  max-width: 1060px;        
}


.more_projects_box {
  flex: 0 0 220px;       
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 250px;
  background-color: var(--white-100);
  border-radius: 24px;
}


.more_projects_box img,
.more_projects_box video {
  width: 100%;
  height: auto;
  border-radius: 24px;
  transition-duration: 0.3s;
}

.more_projects video.banner_more{
  height: 154px;
}

.more_projects_box video{
  border: 1px solid var(--blue-gray-50);
}

.more_projects_box img:hover, 
.more_projects_box video:hover{
  transform: scale(1.05);
}



.more_projects_box h2 {
  font-weight: 600;
  font-size: 16px;
  margin-top: 0.5rem;
  text-align: center;
}



footer{
  padding: 0;
  margin: 0 0 48px 0;
}


video.gallery{
  max-height: 600px;
}








/* Begin media queries and small viewports*/






   @media (max-width: 480px){
   body {
    width: 100% !important;
    max-width: 100vw !important;
    margin: 0;
    padding: 0;
   
  }


 
 

  h1{
  font-size: 25px;
}


  h2{
  font-size: 18px;
}





p, ul, footer{
  font-size: 14px;

}


i{
  visibility: visible;
}

button{

  letter-spacing: 1px;
  padding: 6px 12px 6px 12px;
  border-radius: 20px;

}


a.logo{
  margin: 0 0 0 4px;
  

}

#nav_button{
  display: none;

}




nav{
  display: flex;      
  flex-direction: row; 
  gap: 12px;           
  align-items: center; 
}




nav a{
  
  margin: 0 -4px 0 -4px;


}

nav{
  margin: 0;
}



section.hero-container{
  margin: -50px 0 0 0;
}

section.hero-container h1, 
section.hero-container h2
{
  grid-column: 1 / span 12;
  padding: 0 24px 0 24px;
 


}


section.content-container-left, section.content-container-right {
margin: 0 0 72px 0;
align-items: center;
}

section.content-container-left button, section.content-container-right button{
  display: none;
}


section.content-container-left img, section.content-container-left video{
 grid-column: 2 / span 10;

}


section.content-container-left h2{
padding: 0 6px 12px 6px;
margin: 0;


}

section.content-container-left p{
 
  padding: 0 6px 0 6px;
  margin: 0;
}

section.content-container-left div.content-right{
  grid-column: 2 / span 10;
  padding: 0;
}

/* Theese 'content containers' have an image to the right side and copy to the left. uSed on the home and about page.*/

section.content-container-right h2{
  padding: 0 6px 12px 6px;
  margin: 0;
}

section.content-container-right p{
  padding: 0;
  margin: 0;
}

section.content-container-right div.content-left{
  grid-column: 1 / span 12;
  
}

section.content-container-right img{
 grid-column: 2 / span 10;


}




section.project-header#adt video{
  grid-column: 4 / span 6;

}


section.case-study-info{
  margin: -36px 0 24px 0;
  padding: 0;
  display: grid;
 
}



section.case-study-info h2{
  font-weight: 600;
  text-align: center;
  margin: 0 0 8px 0;
}

section.case-study-info p{
  margin: 0 0 48px 0;
}



section.case-study-info div:nth-child(1){
  justify-self: center;
  grid-column: 1 / span 12;
}

section.case-study-info div:nth-child(2){
  justify-self: center;
  grid-column: 1 / span 12;
}

section.case-study-info div:nth-child(3){
  justify-self: center;
  grid-column: 1 / span 12;
}

section.case-study-info p{
  text-align: center;
}






section.project-details-box{
  min-height: auto;
}






section.project-full{
  border-radius: 24px;
  margin: 0;
  display: grid;
}

section.project-full img{
  grid-column: 1 / span 12;
  margin: 24px 0 24px 0;
}

section.project-full div.project-full-content-title, section.project-full div.project-full-content-text{
  grid-column: 2 / span 10;

}

section.project-full div{
  margin: 0;
}

section.project-full div.project-full-content-title{
  margin: 24px 0 24px 0;
}

section.project-full div.project-full-content-title h2{
  margin: 0 0 -48px 0;

}

section.project-full div.project-full-content-text{
  margin: 0 0 24px 0;
  
}


section.project-details{
 
  margin: 48px 0 48px 0;
  padding: 24px;
}


div.project-details-box{
  flex: 1 1 300px;          /* grow, shrink, base width */ 
  width: 100%;         /* optional limit for large screens */
  
  display: flex;
  flex-direction: column;
  height: auto;
  padding: 12px;
  
}




div.project-details-box h2{
  font-size: 18px;
  font-weight: 600;
  margin:0 0 24px 0;
  border-bottom: 0.25px solid var(--copy);
  line-height: 3;
  margin-bottom: 24px;
}

div.project-details-box p{
 margin: 0 0 24px 0;
}

div.project-details-box h2, div.project-details-box p{
  padding: 0 18px 0 18px;
}


div.project-details-box#saved_media_card_1{
  height: auto;
  margin: 48px 0 6px 0;
  background-color: var(--teal-50); 
}



div.project-details-box#saved_media_card_2{
  height: auto;
  background-color: var(--peach);
  margin: 6px 0 6px 0;
}

div.project-details-box#saved_media_card_3{
  height: auto;
  background-color: var(--purple-50);
  margin: 6px 0 48px 0;
}



section.contact-card{
  display: grid;
  margin:0 0 48px 0;

}

section.contact-card div{
 
 grid-column: 2 / span 10;
 padding: 24px 6px 24px 6px;
 border-radius: 24px;

}

section.contact-card h2{
  font-size: 22px;
  margin: 0 0 12px 0;
}


section.contact-card p{
  margin: 0 0 36px 0;
  padding: 0 24px 0 24px;

}


section.more_projects {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem; 
  padding: 2rem;
}


div.more_projects_title h1 {
  font-size: 28px;
  font-weight: 700;
  text-align: center;
  padding: 0 0 16px 0;
}

.tiles_row {
  display: flex;
  justify-content: center; 
  flex-wrap: wrap;                     
  width: 100%;
  max-width: 1060px;        
}


.more_projects_box {
  flex: 0 0 300px;       
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 450px;
  background-color: var(--white-100);
  border-radius: 24px;
  margin: 0 0 -160px 0;
}


.more_projects_box img,
.more_projects_box video {
  width: 100%;
  height: auto;
  border-radius: 24px;
  transition-duration: 0.3s;
}

.more_projects_box video{
  border: 1px solid var(--neutral_1);
}

.more_projects_box img:hover, 
.more_projects_box video:hover{
  transform: scale(1.05);
}



footer{
  padding: 0 40px 0 40px;

}

footer p.footer_font{
  font-size: 12px;
}








 








  
}



}