@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono: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');

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


body {
  background-color: black;
}

/* Nav Bar */

div.nav {
 border: rgb(86, 86, 86) solid 2px;
 font-size: 1em;
 padding: 1em;
 padding-left: 3em;
 border-radius: 1.5em;
 margin-top: 1.5em;
 margin-left: 1em;
 margin-right: 1em;
 box-shadow: 0 0px 10px rgba(255, 255, 255, 0.4)
}

a.nav {
  color: white;
  text-decoration: none;
  font-family: "IBM Plex Mono", monospace;
}

/* Video */

div.gazevid {
  width: 100%;
  position: relative;
  display: block;
  content: "";
  padding-top: 56.25%;
  margin-top: 2%;
}

div.gazevid iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

h1 {
  color: white;
  text-align: center;
  margin-top: 2.5%;
  font-size: 1.5em;
}

/* Statement */
div.statement {
  width: 100%;
  text-align: center;
  margin-top: 15%;
  margin-bottom: 1em;
}

p.statement {
  color: rgb(206, 19, 249);
  padding-left: 30%;
  padding-right: 30%;

  font-size: 1.3em;
  line-height: 1.7em;
  margin: 0em;
  text-align: justify;
  font-family: "Quicksand", sans-serif;
}

/* Images */

div.show {
  width:70%;
  margin: auto;
  margin-top: 10%;
  margin-bottom: 0%;
  padding: 2em;

  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
}

div.left {
  flex: 10%;
  margin-right: 2em;
}

img.center {
  display: block;
  margin: auto;
}

div.right {
  flex: 40%;
}

img.rtop {
  margin-bottom: 2em;
}

p.imgtext {
  color: rgb(230, 230, 230);
  padding-left: 15%;
  padding-right: 15%;

  font-size: 0.9em;
  line-height: 1.7em;
  margin: 0em;
  text-align: justify;
  font-family: "Quicksand", sans-serif;
}

/* Project Context*/
div.ptext {
  width: 100%;
  text-align: center;
  margin-top: 8%;
  margin-bottom: 1em;
}

p.ptext {
  color: rgb(206, 19, 249);
  padding-left: 30%;
  padding-right: 30%;

  font-size: 1.3em;
  line-height: 1.7em;
  margin: 0em;
  text-align: justify;
  font-family: "Quicksand", sans-serif;
}

a.con {
  color: rgb(0, 186, 207);
}

/* footer */

img.logo {
  width: 7%;
  height: auto;
  padding-bottom: 3em;
  padding-top: 10%;
  display: block;
  margin: auto;
}