:root {
  --clr-accent-800: hsl(226, 48%, 27%);
  --clr-accent-600: hsl(111, 29%, 25%);
  --clr-accent-300: hsl(193, 98%, 42%);
  --clr-accent-801: hsl(0, 12%, 76%);

  --clr-neutral-100: hsl(0, 0%, 98%);
  --clr-neutral-500: hsl(0, 0%, 83%);
  --clr-neutral-900: hsl(0, 0%, 11%);

  --clr-button-primary: linear-gradient(to top, #4d4d4d, #1b1b1b, #1b1b1b, #4d4d4d);
  --clr-button-300: linear-gradient(to top, #03c2f7, #02A8D6, #02A8D6, #03c2f7);
  --clr-button-600: linear-gradient(to top, #487440, #34542E, #34542E, #487440);
  --clr-button-800: linear-gradient(to top, #29408d, #243467, #243467, #243467, #29408d);

  --clr-buttonhover-primary: linear-gradient(to top, #e0dfdf , white, white, white, #e0dfdf);
  --clr-buttonhover-300: linear-gradient(to top, #91CAEA, white, white, white, #91CAEA);
  --clr-buttonhover-600: linear-gradient(to top, #578d4e70 , white, white, white, #578d4e70);
  --clr-buttonhover-800: linear-gradient(to top, #BBCEE5 , white, white, white, #BBCEE5);

  --ff-primary: 'Be Vietnam Pro', sans-serif;
  --ff-secondary: 'Lora', serif;
  
  --ff-body: var(--ff-primary);
  --ff-accent: var(--ff-secondary);

  
  --fw-regular: 400;
  --fw-bold: 700;

  --fs-200: 0.875rem;
  --fs-300: 1rem;
  --fs-400: 1.125rem;
  --fs-500: 1.25rem;
  --fs-600: 1.5625rem;
  --fs-700: 1.875rem;
  --fs-800: 2.5rem;
  --fs-900: 3.75rem;

  --fs-body: var(--fs-200);
  --fs-body-heading: var(--fs-400);
  --fs-body-subheading: var(--fs-200);
  --fs-body-title: var(--fs-500);
  --fs-button: var(--fs-200);
  --fs-hero-points: var(--fs-200);
  --fs-hero-para: var(--fs-200);
  --fs-hero-subheading: var(--fs-600);
  --fs-hero-title: var(--fs-700);
  --fs-brand: var(--fs-500);
  --fs-nav: var(--fs-200);
  --fs-footer-nav: var(--fs-200);

  --size-100: .25rem;
  --size-200: .5rem;
  --size-300: .75rem;
  --size-400: 1rem;
  --size-500: 1.5rem;
  --size-600: 2rem;
  --size-700: 3rem;
  --size-800: 4rem;
  --size-900: 5rem;
}

@media (min-width: 60em) {
  :root{
  --fs-body: var(--fs-300);
  --fs-body-heading: var(--fs-600);
 
  --fs-body-title: var(--fs-600);
  --fs-button: var(--fs-300);
  --fs-hero-points: var(--fs-300);
  --fs-hero-para: var(--fs-300);
  --fs-hero-subheading: var(--fs-700);
  --fs-hero-title: var(--fs-800);
  --fs-brand: var(--fs-600);
  --fs-nav: var(--fs-200);
  --fs-footer-nav: var(--fs-400);
    
  }
}

/* Box sizing rules */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Remove default margin */
*{
  margin: 0;
  padding: 0;
  font: inherit;
  transition: 800ms;
}

/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
ul[role='list'],
ol[role='list'] {
  list-style: none;
}

/* Set core root defaults */
html:focus-within {
  scroll-behavior: smooth;
}

html,
body {
  height: 100%;
}

/* Set core body defaults */
body {
  text-rendering: optimizeSpeed;
  line-height: 1.5;
}

/* A elements that don't have a class get default styles */
a:not([class]) {
  text-decoration-skip-ink: auto;
}
a {
  text-decoration: none;
}

/* Make images easier to work with */
img,
picture,
svg {
  max-width: 100%;
  
  display: block;
  margin-left: auto;
    margin-right: auto
 
}




/* Remove all animations, transitions and smooth scroll for people that prefer not to see them */
@media (prefers-reduced-motion: reduce) {
  html:focus-within {
   scroll-behavior: auto;
  }
  
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

 /* general styling*/

 .project-overview{
  display: inline-flex;
  min-height: fit-content;
    max-width: 100%;
    border-radius: .2vmax;
    background-color: white;
    flex-direction: row;
    columns: 2;
 }
 .body > .left {
  min-height: 100%;
  width: 50%;
  margin: 1.5rem;

  border-radius: 1rem;
  
}

 .body > .right{
  max-width: 50%;
  align-self: center;
}

.body-gradient{
  background: url(./images/bodybackground.png);
  background-size: cover;
  
}

.overview-list{
  display: inline-flex;
}

.content-margin{
  margin-left: var(--size-900);
  margin-right: var(--size-900);
}

.positives{
  justify-content: center;
}
.colour-ratio{
  justify-self: center;
}

@media (max-width:55em){
  .positives{
    padding-left: .1rem;
  }

 
}

.How-Might-We{
text-align: center;
}


 /*button */

 .button-primary{
  cursor: pointer;
  text-decoration: none;
  border-radius: 100vmax;
  padding: .9em 2.24em;
  font-weight: var(--fw-bold);
  font-size: var(--fs-button);
  line-height: 1;
  border: 0;
  box-shadow: 0 1.25em 1em -1em var(--clr-neutral-900);
  margin-left: 1rem;
}

 .button-300{
  cursor: pointer;
  text-decoration: none;
  border-radius: 100vmax;
  padding: .9em 2.24em;
  font-weight: var(--fw-bold);
  font-size: var(--fs-button);
  line-height: 1;
  border: 0;
  box-shadow: 0 1.125em 1em -1em #285571;
  position: relative;
  bottom: -auto;
  margin-top: 2rem;

}


 .button-600{
  cursor: pointer;
  text-decoration: none;
  border-radius: 100vmax;
  padding: .9em 2.24em;
  font-weight: var(--fw-bold);
  font-size: var(--fs-button);
  line-height: 1;
  border: 0;
  
  box-shadow: 0 1.125em 1em -1em var(--clr-accent-600);
  bottom: -auto;

}

.button-600-inverted{
  cursor: pointer;
  text-decoration: none;
  border-radius: 100vmax;
  padding: .9em 2.24em;
  font-weight: var(--fw-bold);
  font-size: var(--fs-button);
  line-height: 1;
  border: 2;

  background-color: var(--clr-accent-600);
  bottom: -auto;
  margin-top: .5rem;
}

.button-600-inverted:hover,
.button-600-inverted:focus-visible{
background-color: var(--clr-neutral-100);

color: var(--clr-accent-600);
}

#button-right a, .para{
  display: flex;
  align-content: center;
  align-items: center;
  justify-content: space-between;
}

#button-right p .para{
  align-content: flex-start;
}

#button-right a{
  justify-content: flex-end;
  align-items: center;
}



.button-800{
  cursor: pointer;
  text-decoration: none !important;
  border-radius: 100vmax;
  padding: .9em 2.24em;
  font-weight: var(--fw-bold);
  font-size: var(--fs-button);
  line-height: 1;
  border: 0;
  box-shadow: 0 1.125em 1em -1em var(--clr-accent-800);
  bottom: -auto;
  margin-top: .5rem;
}

.button-800-inverted{
  cursor: pointer;
  text-decoration: none;
  border-radius: 100vmax;
  padding: .9em 2.24em;
  font-weight: var(--fw-bold);
  font-size: var(--fs-button);
  line-height: 1;
  border: 0;
  
  bottom: -auto;
  margin-top: .5rem;
}


.tag-801{
  text-decoration: none;
  border-radius: .5vmax;
  padding: .9em 2.24em;
  font-weight: var(--fw-bold);
  font-size: var(--fs-button);
  line-height: 1;
  border: 0;
  bottom: -auto;
  margin-top: .5rem;
  box-shadow: none;
  background-color: var(--clr-accent-801);
  color: var(--clr-accent-800) !important;
}

#tag{
  display: flex;
  justify-content: center;
  justify-content: space-between;
}

@media (max-width:55em){
  #tag{
    display: inline-block;
    align-items: center;
  }
}

#newnav{
  display: flex;
  justify-content: center;
}

.button-primary:hover,
.button-primary:focus-visible{
background-image: var(--clr-buttonhover-primary);
color: var(--clr-neutral-900);

}

.button-300:hover,
.button-300:focus-visible{
background-image: var(--clr-buttonhover-300);
color: var(--clr-neutral-900);

}


.button-600:hover,
.button-600:focus-visible{
  background-image: var(--clr-buttonhover-600);
text-decoration: none;
color: var(--clr-neutral-900);

}

.button-800:hover,
.button-800:focus-visible{
background-image: var(--clr-buttonhover-800);

color: var(--clr-neutral-900);
}

.button-800-inverted:hover,
.button-800-inverted:focus-visible{
background-color: #CABCBC;

color: var(--clr-neutral-900);
}

/* navigation */

.nav-wrapper{
display: flex;
justify-content: space-between;
align-items: center;

}

.mobile-nav-toggle{
display: none;
}

.nav-list-primary{
font-size:  var(--fs-200);
font-weight: var(--fw-bold);
padding-top: var(--size-500);
padding-bottom: var(--size-500);
display: flex;

}


.nav-list-primary a {
text-decoration: none;

padding: 1.7rem;
}

.nav-list-primary a:hover,
.nav-list-primary a:focus{
  padding: 1.7rem;
  background-color: var(--clr-neutral-100);
  color: var(--clr-neutral-900);
 
}


@media (max-width:50em) {
.primary-navigation{
  display: none;
  
  position: fixed;
  padding: var(--size-700);
  inset: 7rem var(--size-400) auto;
  background: var(--clr-neutral-900);
  border-radius: var(--size-100);
  box-shadow: 0 0 0.75em rgb(0, 0, 0,0.05);
  
}

.primary-header{
  padding: var(--size-500);
}
.primary-header[data-overlay] {
content: "";
position: fixed;
inset: 0;
z-index: 1;
}

.nav-list-primary{
  display: grid;
  gap: var(--size-600);
  text-align: center;
  padding: var(--size-500);
  line-height: 2.52rem;
  
}

.primary-navigation[data-visible] {
display: block;

}
.nav-list-primary li{
  border-bottom: 1px solid var(--clr-neutral-100);
 
}

.nav-list-primary a:hover,
.nav-list-primary a:focus{
  padding: var(--size-300);
  background: transparent;
  color: var(--clr-neutral-100);
  border-bottom: transparent;
}

.mobile-nav-toggle{
  display: block;
  position: sticky;
  top: var(--size-500);
  right: var(--size-400);
  cursor: pointer;
  background: transparent;
  border: 0;
  padding: 0.5em;
}

.mobile-nav-toggle .icon-close{
  display: none;
}


}


/* footer navigation*/

.primary-footer-wrapper{
  display: flex;
  flex-direction: column;
  gap: var(--size-300);
 
}

.footer-logo{
  margin: 0 auto;
}

  .resume-social{ order: 2}
  .footer-logo{ order: 1}
  .footer-nav{ order: 3}
  
  .social-list li > *{
    display: flex;
    justify-items: center;
  }

  .fill{
    color: var(--clr-neutral-100) !important;
  }
  

@media (min-width: 50em) {
  
  .primary-footer-wrapper{
    display: flex;
    flex-direction: row;
    align-items: center;
    
    
  }
  .resume-social{ order: -1
    }
  .footer-logo{ order: 2}
  .footer-nav{ order: 3}
  .resume-social{
    margin-top: var(--clr-accent-300);
  }

  .primary-footer-wrapper > *{
    
  
    text-align: left !important;
    
  }
 
    
  }


.primary-footer-wrapper{
 display: flex;
 justify-content: space-between;
  text-align: center;
  
  line-height: var(--size-600);
  
}


a .footer-nav{
  color: var(--clr-accent-600);
  text-decoration: none;
  
}

.resume-social a:is(:hover, :focus), .footer-nav a:is(:hover, :focus){
  
  text-decoration: underline;
}

/* social list */

.social-list{                             
  display: flex;
  justify-content: center;
  gap: var(--size-400);
}

.social-icon{
  
width: var(--size-600);
aspect-ratio: 1;

}

.social-list a:is(:hover, :focus) .social-icon{
  fill: #03c2f7 ;
}

.linkedin{
  transform: scale(.8) translate(0rem, -0.13rem);
}
.footer-logo{
  transform: scale(.5) translate(0rem, 0rem);
  
}


@media (min-width:50em) {
  .social-icon{
    display: inline-flex;
  
    width: var(--size-500);
   
  }
  .social-list{
    justify-content: left;
    align-self: center;
  }



}

/*Utility classes*/

.visually-hidden{
  position:absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border:0;
}
.bg-colour-200{  
background-image: url(./images/herobackground.png);
max-width: 100%;
    min-height: 560px;
}



.container{
  --max-width: 1110px;
  --padding: 1rem;
  
  width: min(var(--max-width), 100% - (var(--padding) * 2));
  margin-inline: auto;
  
}

li {
  list-style-type: none;
}
.sub-title-body{
  padding-top: var(--size-500);
}

.my-contrabution{
  display: flex;
  line-height: 2rem;
}
.my-contrabution li{
  padding-left: .5rem;
}
.right .list-point{
padding-left: 10.2rem;
}

.right .list-point2{
  padding-left: 6.8rem;
  }

.scale{
  transform: scale(1.1);
  padding-top: 5rem;
}

:where(.flow :not(:first-child, li)) {
  margin-top: var(--flow-spacer, 1em);

}
@media only screen and (max-width: 50em){
  .heroimg{
   display: none;
  }
 }




@media (min-width: 50em){
  .container{
    --padding: 1rem;
  }
 
 
  }
 

.even-columns{
  display: grid;
  gap: none;
}

.the-solution{
  padding-top: 2rem;
}


@media (min-width: 50em){
 .even-columns{
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 6rem;
 }

 .the-solution{
  padding-top: 0.0001rem;
}

}


.text-secondary-100{
  color: var(--clr-neutral-100);
  text-decoration: none !important;
}

.text-primary-900{
  color: var(--clr-neutral-900);
  text-decoration: none;
}

.bg-secondary-900{
  background-color: var(--clr-neutral-900)
}

.bg-secondary-500{
  background-image: linear-gradient( white, white, white);
}

.bg-primary-100{
  background-color: var(--clr-neutral-100);
}

.bg-accent-300{
  background-color: var(--clr-accent-300);
}

.bg-accent-600{
  background-color: var(--clr-accent-600);
}

.bg-accent-800{
  background-color: var(--clr-accent-800);
  
}

.bg-accent-801{
  background-color: var(--clr-accent-801);

}

.bg-button-primary{
  background-image: var(--clr-button-primary);
}

.bg-button-secondary{
  background-image: var(--clr-button-secondary);
  color: var(--clr-neutral-900);
}

.bg-button-300{
  background-image: var(--clr-button-300);
}

.button-600{
  background-image: var(--clr-button-600);
}

.button-800{
  background-image: var(--clr-button-800);
 
}

.bg-button-inverted{
  border-color: var(--clr-neutral-500);
}



.fw-bold{ font-weight: var(--fw-bold);}
.fw-regular{ font-weight: var(--fw-regular);}

.fs-body{
  font-size: var(--fs-body);
}
  .fs-body-heading{
    font-size: var(--fs-body-heading);
    line-height: 1.1;
  }
  
  .fs-body-subheading{
    font-size: var(--fs-body-subheading);
  }
  .fs-body-title{
    font-size: var(--fs-body-title);
  }

  .fs-button{
    font-size: var(--fs-button);
  }

  
  .fs-hero-points{
    font-size: var(--fs-hero-points);
    padding-bottom: 1rem;
  }
  .fs-hero-para{
    font-size: var(--fs-hero-para);
    padding-bottom: 1rem;
  }

  .fs-hero-subheading{
    font-size: var(--fs-hero-subheading);
  
  }
  .fs-hero-title{
    font-size: var(--fs-hero-title);
    
  }
  .fs-brand{
    font-size: var(--fs-brand);
    font-family: var(--ff-secondary);
  }
  .fs-nav{
    font-size: var(--fs-nav); 
  }


  .ff-footer-nav{
    font-family: var(--ff-primary);
  }

  .ff-primary{
    font-family: var(--ff-primary);
    text-decoration: none !important;
  }

  .ff-secondary{
    font-family: var(--ff-secondary);
  }

  .fs-200{ 
    font-size: var(--fs-200) 
  }
  .fs-300
  { font-size: var(--fs-300) 
  }
  .fs-400{
     font-size: var(--fs-400) 
    }
  .fs-500{ 
    font-size: var(--fs-500) 
  }
  .fs-600{ 
    font-size: var(--fs-600) 
  }
  .fs-700{ 
    font-size: var(--fs-700) 
  }
  .fs-800{ 
    font-size: var(--fs-800) 
  }
  .fs-900{ 
    font-size: var(--fs-900) 
  }

  .padding-top-300{
    padding-top: var(--size-00);
  }
  .padding-block-400{
    padding-block: var(--size-400);
  
  }

  .padding-block-para{
    padding-top: var(--size-500);

  }

  .padding-block-600{
    padding-block: var(--size-600);
   
  }
  .padding-block-bf-blue{
    padding-block: var(--size-700);
    
  }

  .padding-block-blue{
    padding-block: var(--size-700);
    
  }


  .padding-block-900{
    
    padding-bottom: var(--size-900);
  }

  .padding-bottom-700{
    padding-bottom: var(--size-700);
  }

  .padding-hero{
    padding-block: var(--size-900);
  }