html {
    scroll-behavior: smooth;
}

body {
    position: relative;
    overflow: auto;
    font-family: monospace;
    line-height: 1.6;
    margin: 0;
    color: #222;
    background-color: #f8f8f8;
}


.topnav {
    background-color: #f8f8f8;
    overflow: hidden;
    text-align: center;
    padding: 2.6vw 3.4vw;
    font-size: 0.9vw;
}

.nav01 {
    float: left;
    color: #000;
    text-decoration: none;
    padding-left: 1vw;
}

.nav02 {
    float: right;
    color: #000;
    text-decoration: none;
    padding-left: 9vw;

}

.nav03 {
    float: right;
    color: #000;
    text-decoration: none;
    padding-left: 9vw;

}

.nav04 {
    float: right;
    color: rgb(121, 220, 64);
    text-decoration: none;
    padding-left: 9vw;

}

.nav05 {
    float: right;
    color: rgb(220, 64, 163);
    text-decoration: none;
    padding-left: 9vw;

}

.nav02:hover {
    color: rgb(121, 220, 64);
}

.nav03:hover {
    color: rgb(220, 64, 163);
}

.nav04:hover {
    color: rgb(121, 220, 64);
}


.row {
  display: flex;
  flex-wrap: wrap;
}

.column {
  flex: 48.5vw;
  max-width: 48.5vw;
  padding-right: 1.5vw;
}

.column2 {
  flex: 48.5vw;
  max-width: 48.5vw;
  padding-left: 1.5vw;
}

.column img {
  vertical-align: middle;
  width: 48.5vw;
  height: 18vw;
  opacity: 95%;
}

.column2 img {
  vertical-align: middle;
  width: 48.5vw;
  height: 18vw;
}

.container {
  position: relative;
  margin-bottom: 3vw;
}

.overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: auto;
  opacity: 0;
  transition: .2s ease;
  background-color: #30302f;
  line-height: 1.6;
}

.title {
  font-family: monospace;
  color: #f8f8f8;
  font-size: 2.2vw;
  position: absolute;
  bottom: 2.6vw;
  left: 4.4vw;
  right: 4.4vw;
  text-align: left;
  line-height: 1.6;
  background-color: #30302f9f;
  /*background-color: rgba(220, 64, 134, 0.538);*/
}

.container:hover .overlay {
  opacity: 0.8;
  z-index: 3;
}

.container:hover .title{
  opacity: 0;
  transition: .2s ease;
}

.text {
  color: #f8f8f8;
  font-size: 0.9vw;
  font-family: monospace;
  position: absolute;
  top: 3.6vw;
  left: 4.4vw;
  right: 4.4vw;
  text-align: left;
}

.project {
    padding: 0vw 20vw;
}

.project h1 {
    font-family: monospace;
    font-size: 1.8vw;
    width: 100%;
}

.project h2 {
    font-family: monospace;
    font-size: 1.2vw;
    width: 100%;
}

.project img {
    width: 100%;
    margin: 2vh 0vh;
}

.project p {
    font-size: 0.9vw;
    width: 100%;
}

.navout {
    float: left;
    color: rgb(220, 64, 163);
    text-decoration: none;
    border: 1px solid #555555;
    padding: 1vw;

}

.navout2 {
    color: rgb(220, 64, 163);
    text-decoration: none;
}

.quote {
  color: #555555;
  margin-left: 3vw;
}

video {
    width: 100%;
}

.imgdescrip {
    text-align: right;
}

.big {
    width: 100%;
}


.container img {
    width: 100%;
}

.img_about {

}

.project .img_small {
    display: block;
    width: 30vw;
    margin: auto;
}

.aboutbox1 {
  background-color: #f8f8f8;
  opacity: 95%;
  margin: 2vw 54vw;
  width: 43vw;
  height: 29vw;
  z-index: 4;
  position: absolute;
  border-style: dashed;
  overflow: scroll;
}

.aboutbox1 p{
  padding: 1vw 2vw;
}


.aboutbox2 {
  background-color: #f8f8f8;
  opacity: 95%;
  margin: 4vw 2vw;
  width: 41vw;
  height: 28vw;
  z-index: 4;
  position: absolute;
  border-style: dashed;
  border-color:#000;
  padding: 2vw 2vw;
  line-height: 1.6vw;
}

.aboutbox2 img {
  position: absolute;
  height: 28vw;
  width: auto;
}

.aboutbox2 a{
  text-decoration: none;
  color: #000;
}

.aboutbox2 p{
  position: absolute;
  padding-top: 5vw;
  padding-left: 22vw;
  line-height: 1.6vw;
}

.aboutbox3 {
  background-color: #f8f8f8;
  opacity: 95%;
  margin: 34vw 60vw;
  width: 36vw;
  height: 4vw;
  z-index: 4;
  position: absolute;
  border-style: dashed;
  overflow: scroll;
}

.aboutbox3 p {
  padding: 0.6vw 2vw;
}