* {
  margin: 0;
  padding: 0;
}

:root {
  --color-black: #1e1e1e;
  --color-white: #fff;
  --color-grey: #777;
  --color-light: #efefef;
  --color-text: var(--color-black);
  --color-text-green: var(--color-code-dark-green);
  --color-background: var(--color-white);
  --color-bg-light: #e6ebff;
  --color-code-accent:       #001157;
  --color-code-dark-green:  #0f1901;
  --font-family-sans: "IMBPlexSans",Arial, sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}



@font-face {
  font-family: "IBMPlexSans";
  font-style: normal;
  font-weight: 300;
  src: local("IBM Plex Sans Light"), local("IBMPlexSans-Light"), url("/assets/fonts/ttf/IBMPlexSans-Light.eot") format("embedded-opentype?#iefix");
  src: local("IBM Plex Sans Light"), local("IBMPlexSans-Light"), url("/assets/fonts/woff/IBMPlexSans-Light.woff") format("woff"),
  url("/assets/fonts/woff/IBMPlexSans-Light.woff2") format("woff2"),
  url("/assets/fonts/ttf/IBMPlexSans-Light.eot") format("embedded-opentype"),
  url("/assets/fonts/ttf/IBMPlexSans-Light.ttf") format("ttf");
  }  


@font-face {
	font-family: "IBMPlexSans";
	font-style: normal;
	font-weight: 400;
	src: local("IBM Plex Sans"), local("IBMPlexSans"), url("/assets/fonts/woff/IBMPlexSans-Regular.eot") format("embedded-opentype?#iefix");
  src: local("IBM Plex Sans"), local("IBMPlexSans"), url("/assets/fonts/woff/IBMPlexSans-Regular.woff") format("woff"),
      url("/assets/fonts/woff/IBMPlexSans-Regular.woff2") format("woff2"),
      url("/assets/fonts/woff/IBMPlexSans-Regular.eot") format("embedded-opentype"),
      url("/assets/fonts/ttf/IBMPlexSans-Regular.ttf") format("ttf");
}




@font-face {
	font-family: "IBMPlexSans";
	font-style: normal;
	font-weight: 500;
  src: local("IBM Plex Sans Medm"), local("IBMPlexSans-Medm"), url("/assets/fonts/woff/IBMPlexSans-Medium.eot") format("embedded-opentype?#iefix");
	src: local("IBM Plex Sans Medm"), local("IBMPlexSans-Medm"), url("/assets/fonts/woff/IBMPlexSans-Medium.woff") format("woff"),
      url("/assets/fonts/woff/IBMPlexSans-Medium.woff2") format("woff2"),
      url("/assets/fonts/woff/IBMPlexSans-Medium.eot") format("embedded-opentype"),
      url("/assets/fonts/ttf/IBMPlexSans-Medium.ttf") format("ttf");
}




@font-face {
	font-family: "IBMPlexSans";
	font-style: normal;
	font-weight: 600;
  src: local("IBM Plex Sans SmBld"), local("IBMPlexSans-SmBld"), url("/assets/fonts/woff/IBMPlexSans-SemiBold.eot") format("embedded-opentype?#iefix");
	src: local("IBM Plex Sans SmBld"), local("IBMPlexSans-SmBld"), url("/assets/fonts/woff/IBMPlexSans-SemiBold.woff") format("woff"),
      url("/assets/fonts/woff/IBMPlexSans-SemiBold.woff2") format("woff2"),
      url("/assets/fonts/woff/IBMPlexSans-SemiBold.eot") format("embedded-opentype"),
      url("/assets/fonts/ttf/IBMPlexSans-SemiBold.ttf") format("ttf");
}

@font-face {
	font-family: 'IBMPlexSans';
	font-style: normal;
	font-weight: 700;
  src: local("IBMPlexSans-Bold"), local("IBMPlexSans-Bold"), url("/assets/fonts/woff/IBMPlexSans-Bold.eot") format("embedded-opentype?#iefix");
  src: local("IBMPlexSans-Bold"), local("IBMPlexSans-Bold"), url("/assets/fonts/woff/IBMPlexSans-Bold.woff") format("woff"),
      url("/assets/fonts/woff/IBMPlexSans-Bold.woff2") format("woff2"),
      url("/assets/fonts/woff/IBMPlexSans-Bold.eot") format("embedded-opentype"),
      url("/assets/fonts/ttf/IBMPlexSans-Bold.ttf") format("ttf");
} 


@font-face {
	font-family: 'IBMPlexSans';
	font-style: italic;
	font-weight: 400;
  src: local("IBM Plex Sans Italic"), local("IBMPlexSans-Italic"), url("/assets/fonts/woff/IBMPlexSans-Italic.eot") format("embedded-opentype?#iefix");
  src: local("IBM Plex Sans Italic"), local("IBMPlexSans-Italic"), url("/assets/fonts/woff/IBMPlexSans-Italic.woff") format("woff"),
       url("/assets/fonts/woff/IBMPlexSans-Italic.woff2") format("woff2"),
       url("/assets/fonts/woff/IBMPlexSans-Italic.eot") format("embedded-opentype"),
       url("/assets/fonts/ttf/IBMPlexSans-Italic.ttf") format("ttf");
} 

@font-face {
	font-family: 'IBMPlexSans';
	font-style: italic;
	font-weight: 300;
  src: local("IBM Plex Sans Light Italic"), local("IBMPlexSans-LightItalic"), url("/assets/fonts/woff/IBMPlexSans-LightItalic.eot") format("embedded-opentype?#iefix");
  src: local("IBM Plex Sans Light Italic"), local("IBMPlexSans-LightItalic"), url("/assets/fonts/woff/IBMPlexSans-LightItalic.woff") format("woff"),
     url("/assets/fonts/woff/IBMPlexSans-LightItalic.woff2") format("woff2"),
     url("/assets/fonts/woff/IBMPlexSans-LightItalic.eot") format("embedded-opentype"),
     url("/assets/fonts/ttf/IBMPlexSans-LightItalic.ttf") format("ttf");
} 

html {
  font-family: "IBMPlexSans";
  font-size: 100%;
  overflow-x: hidden;
  scroll-behavior: smooth;
}

body {
  padding: var(--padding);
  max-width: 100%;
  margin: 0 auto;
  font-size: 16px;
  overflow-x: hidden;
}

strong {
  font-family: "IBMPlexSans";
  font-weight: 700;
}

ul {
  padding: 2rem 3rem 2rem 2.25rem;
  line-height: 150%;
  gap: 1rem;
  list-style: circle;
}

ol {
  padding: 2rem 3rem 2rem 2.25rem;
  line-height: 150%;
  gap: 1rem;
}

li {
  font-family: "IBMPlexSans";
  font-weight: 300;
  font-size:  1rem;
  margin: 1rem;
}

a {
  color:#141414;
  text-underline-offset: 0.25rem;
  text-decoration: underline 1.5px var(--color-code-accent);
  -webkit-text-decoration-line: underline;
  text-decoration-line: underline;
  text-decoration-color: var(--color-code-accent);
  -webkit-text-decoration-color: var(--color-code-accent);
  text-decoration-thickness: 1.5px;
  -webkit-text-decoration-thickness: 1.5px;
}

.link a {
  color:#141414;
  text-underline-offset: 0.5rem;
  -webkit-text-underline-offset: 0.5rem;
  text-decoration-line: underline;
  -webkit-text-decoration-line: underline;
  text-decoration-color: var(--color-code-accent);
  -webkit-text-decoration-color: var(--color-code-accent);
  text-decoration-thickness: 1.5px;
  -webkit-text-decoration-thickness: 1.5px;

}

.link a:hover{
  text-decoration-style: dashed;
  color: var(--color-code-accent);
  cursor: pointer;
}

p {
  font-family: "IBMPlexSans";
  font-size: 16px;
  font-weight: 300;
  line-height: 150%;
  padding: 0 1rem 0 1rem;
  /*hyphens: auto; */
}


p.link {
  font-weight: 400;
}

h1 {
 font-size: 1.5rem;
 line-height: 125%;
 font-family: "IBMPlexSans";
 font-weight: 600;
}

h2 {
  font-size: 1.25rem;
  line-height: 125%;
  font-family: "IBMPlexSans";
  font-weight: 600;
 }

h3 {
  font-size: 1rem;
  line-height: 125%;
  font-family: "IBMPlexSans";
  font-weight: 500;
 }

 .logo img {
  height: 32px;
 }


/* Tablets (portrait) and larger */
@media (min-width: 768px) {
  p {
    font-size: 1.125rem;
  }


  h1 {
    font-size: 2.625rem;
    font-weight: 600;
    line-height: 125%;
    
  }
   
  h2 {
     font-size: 1.5rem;
     font-weight: 600;
    
  }

  h3 {
      font-size: 1.125rem;
      font-weight: 500;
  }

  .nav-menu li a{
    font-size: 1.25rem;
    font-family: "IBMPlexSans";
    font-weight: 500;
    letter-spacing: 0.5;
  }


}

/* Tablets (landscape) and small laptops */
@media (min-width: 992px) {
  p {
    font-size: 1.25rem;
  }

  h1 {
    font-size: 2rem;
    font-weight: 600;
    line-height: 125%;
    
  }
   
  h2 {
     font-size: 1.5rem;
     font-weight: 600;
  }
    
  h3 {
    font-size: 1.25rem;
  }


}

/* Large desktops */
@media (min-width: 1200px) {
  p {
    font-size: 1.25rem;
  }

  h1 {
    font-size: 2.255rem;
    font-family: "IBMPlexSans";
    font-weight: 600;
    line-height: 125%;
   }
   
  h2 {
     font-size: 2rem;
     font-weight: 600;
    }


  h3 {
      font-size: 1.5rem;
    }
  
   
  h2 {
     font-size: 2rem;
     font-weight: 600;
    }

  h3 {
      font-size: 1.5rem;
  }
  
  .navbar {
    width: 1600px !important;
  }

}


/*--- Menu ------------------------------*/
menu {
  display: flex;
  justify-content: center;
  width: 100%;
  background-color: var(--color-code-accent);
  height: 5rem;
}

.navbar {
  display: flex;
  justify-content: space-between; 
  align-items: center; 
  width: 100%;
  padding: 1.5rem 1.5rem 1.5rem 1rem;
}

.logo a {
  color: #f1f4ff;
  font-size: 1.5rem;
  letter-spacing: 0.75;
  text-decoration: none;
  font-family: "IBMPlexSans";
  font-weight: 500;
}

.navbar ul {
  padding: 0rem;
  padding-bottom: 0.5rem;
}
.nav-menu {
  list-style: none;
  display: flex;
}

.nav-menu li {
  margin-left: 20px;
}

.nav-menu a {
  color: #f1f4ff;
  text-decoration: none;
  font-size: 1rem;
  font-family: 'IBMPlexSans';
  font-weight: 500;
  transition: color 0.3s ease;
}

.nav-menu a:hover {
  color: #e6ebff;
}



/*--- Footer ------------------------------*/
.footer {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 64 0 64 0;
  background-color: #e6ebff;
  margin-top: 4rem;
}

.footer a {
  color: var(--color-code-accent);
  text-decoration: none;
  text-underline-offset: 0.25rem;
  font-size: 1rem;
  letter-spacing: 0.75;
}

.footer a:hover{
  color: #241e41;
  text-decoration: underline;
  text-decoration-style: dashed;
  text-underline-offset: 0.25rem;
  cursor: pointer;
}

.footer-row{
  width: 700px;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
} 

.footer-content {
  width: 120px;
}
.footer h2 {
  font-weight: 600;
  margin-bottom: .75rem;
}

.footer p {
  max-width: 15rem;
}

/*---Home---*/

.lightbox-overlay {
  display: none;
}