@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300..700&display=swap');

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&display=swap');

/* SECRET TYPEWRITER */

/*  */

body {
    margin: 0;
    padding: 0;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}
  #container {
      position: relative;
      width: 100vw;
      height: 100vh;
  }
  #overlay {
      position: absolute;
      top: 60%;
      left: 50%;
      transform: translate(-50%, 50%);
      text-align: center;
      color: blue;
      z-index: 1; /* Higher z-index to be on top of the canvas */
  }
  canvas {
      display: block;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      z-index: -1; /* Lower z-index to be behind HTML elements */
  }
  .nav-container {
      position: absolute;
      top: 2.1%;
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
  }
  .nav-links {
      display: flex;
      justify-content: space-between;
      margin-bottom: -10px; /* Adjust this value to control the spacing */
  }
  .nav-links a {
      flex-grow: 1;
      font-size: 1em;
      font-weight: 300;
      text-decoration: none;
  }
  .separator {
      display: inline-block;
      width: 15px;
  }
  hr {
      width: 100%;
      height: 1px;
      background-color: blue;
      border: none;
  }
  .bottom-right {
      position: absolute;
      bottom: 0px;
      left: 5px;
      font-size: 1em;
      font-weight: 300;
      text-decoration: none;
      color: blue;
      font-family: "Space Grotesk", sans-serif;
  }
  a .last-name {
  font-weight: 600;
}

/*  */

body .nav-links {
  display: flex;
  justify-content: flex-end;
  width: 100%;
}


body .nav-links .separator {
  margin: 0 50px;
}

.responsive-iframe {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  /* height: 70%; */
  height: "";
}

 *{

     /* font-family: Space Grotesk; */
     font-family: "IBM Plex Sans", sans-serif;
     font-weight: 300;
     font-style: normal;

     margin:1em 0;
     margin-top: 0em;
     /* padding-right: 2em; */
     /* text-decoration:none */
}
a{
/* font-family: "IBM Plex Sans", sans-serif; */
font-family: "Space Grotesk", sans-serif;
font-weight: 300;
font-style: normal;
}

/* unvisited link */
a:link {
 /* color: magenta; */
 color: blue;
}

/* visited link */
a:visited {
 color: blue;
}

/* mouse over link */
a:hover {
 color: magenta;
}

/* selected link */
a:active {
 color: #551A8B;
}

/*
title{
  color:magenta;
} */
 body {
   background-color: rgb(238, 238, 238);
 }

 html {
     margin-left: 1em;
     margin-right: 1em;
     color:black;
     font-size:1.2em;
}


html {
	scroll-behavior: smooth;
}

@media screen and (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
}

/* image styling */
.responsive {
  width: 100%;
  height: auto;
}


/* IOS UX */

/* ----------- iPhone 4 and 4S ----------- */

/* Portrait and Landscape */
@media only screen
  and (min-device-width: 320px)
  and (max-device-width: 480px)
  and (-webkit-min-device-pixel-ratio: 2) {
    html{
      margin-left: 1em;
      margin-right: 1em;
      max-width: 100%;
      padding-right: 0px !important;
    }
}

/* Portrait */
@media only screen
  and (min-device-width: 320px)
  and (max-device-width: 480px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: portrait) {
    html{
      margin-left: 1em;
      margin-right: 1em;
    }
}

/* Landscape */
@media only screen
  and (min-device-width: 320px)
  and (max-device-width: 480px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: landscape) {
    html{
      margin-left: 1em;
      margin-right: 1em;
    }
}

/* ----------- iPhone 5, 5S, 5C and 5SE ----------- */

/* Portrait and Landscape */
@media only screen
  and (min-device-width: 320px)
  and (max-device-width: 568px)
  and (-webkit-min-device-pixel-ratio: 2) {
    html{
      margin-left: 1em;
      margin-right: 1em;
    }
}

/* Portrait */
@media only screen
  and (min-device-width: 320px)
  and (max-device-width: 568px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: portrait) {
    html {
      margin-left: 1em;
      margin-right: 1em;
    }
}

/* Landscape */
@media only screen
  and (min-device-width: 320px)
  and (max-device-width: 568px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: landscape) {
    html{
      margin-left: 1em;
      margin-right: 1em;
    }
}

/* ----------- iPhone 6, 6S, 7 and 8 ----------- */

/* Portrait and Landscape */
@media only screen
  and (min-device-width: 375px)
  and (max-device-width: 667px)
  and (-webkit-min-device-pixel-ratio: 2) {
    html{
      margin-left: 1em;
      margin-right: 1em;
    }
}

/* Portrait */
@media only screen
  and (min-device-width: 375px)
  and (max-device-width: 667px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: portrait) {
    html{
      margin-left: 1em;
      margin-right: 1em;
    }
}

/* Landscape */
@media only screen
  and (min-device-width: 375px)
  and (max-device-width: 667px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: landscape) {
    html{
      margin-left: 1em;
      margin-right: 1em;
    }
}

/* ----------- iPhone 6+, 7+ and 8+ ----------- */

/* Portrait and Landscape */
@media only screen
  and (min-device-width: 414px)
  and (max-device-width: 736px)
  and (-webkit-min-device-pixel-ratio: 3) {
    html{
      margin-left: 1em;
      margin-right: 1em;
    }
}

/* Portrait */
@media only screen
  and (min-device-width: 414px)
  and (max-device-width: 736px)
  and (-webkit-min-device-pixel-ratio: 3)
  and (orientation: portrait) {
    html{
      margin-left: 1em;
      margin-right: 1em;
    }
}

/* Landscape */
@media only screen
  and (min-device-width: 414px)
  and (max-device-width: 736px)
  and (-webkit-min-device-pixel-ratio: 3)
  and (orientation: landscape) {
    html{
      margin-left: 1em;
      margin-right: 1em;
    }
}

/* ----------- iPhone X ----------- */

/* Portrait and Landscape */
@media only screen
  and (min-device-width: 375px)
  and (max-device-width: 812px)
  and (-webkit-min-device-pixel-ratio: 3) {
    html{
      margin-left: 1em;
      margin-right: 1em;
    }
}

/* Portrait */
@media only screen
  and (min-device-width: 375px)
  and (max-device-width: 812px)
  and (-webkit-min-device-pixel-ratio: 3)
  and (orientation: portrait) {
    html{
      margin-left: 1em;
      margin-right: 1em;
    }
}

/* Landscape */
@media only screen
  and (min-device-width: 375px)
  and (max-device-width: 812px)
  and (-webkit-min-device-pixel-ratio: 3)
  and (orientation: landscape) {
    html{
      margin-left: 1em;
      margin-right: 1em;
    }
}