/*CSS for Semester project presentation "Lesen".
Sayoon Yang */



body{
  font-family: 'Comfortaa', sans-serif;
}

span {
  border-right: .05em solid;
  animation: caret 1s steps(1) infinite;
}

@keyframes caret {
  50% {
    border-color: transparent;
  }
}


a, a:hover, a:visited, a:active{
  color : #000;
  text-decoration : none;
}


.svg-box-big {
  margin-left:auto;
  margin-right:auto;
  display:block;
  padding : 9rem 3rem 3rem 8rem ;
  stroke-dasharray: 2000;
  stroke-dashoffset: 2000;
  animation: dash 10s linear infinite;
  /* animation: spin 5s infinite; */
}

.svg-box {
  display : none;
}


@keyframes dash {
  to {
    stroke-dashoffset: 0;
  }
}



.container-nav{
  padding-top : 1rem;
}



.nav-link.title {
	background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
	background-size: 400% 400%;
	animation: gradient 15s ease infinite;
}

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



@keyframes gradient {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}



.nav{
  padding-top : 1rem;
}

.nav-link{
  padding-top : 1rem;
  border-top : 0.3rem solid #000;
  border-bottom : 0.3rem solid #000;
  border-right : 0.3rem solid #000;

}

#left-first{
  border-left : 0.3rem solid #000;
  background-color : black;
  color : white;
}

.navbar-toggler{
  border : none;
}


.main-content{
  padding : 0rem 2rem 2rem 2rem;
  width : 100%;
}

.project-title{
  border-top : 0.3rem solid #000;
  padding-top : 2rem;
  padding-bottom : 0.5rem;

}

.project-title.middle{
  border-top : 0;
  border-bottom : 0;
  padding-top : 2rem;
  padding-bottom : 0.5rem;
}

.project-title.follow{
  border-top : 0.3rem solid #000;
  border-bottom : 0.3rem solid #000;
  padding-top : 2rem;
  padding-bottom : 0.5rem;

}



.svg-img{
  margin:auto;
  padding : 1rem;
  display:block;
  stroke-dasharray: 500;
  stroke-dashoffset: 500;
  animation: dash 5s linear infinite;
}

#vimeoWrap{
     position: relative;
    padding-bottom: 56.25%; /* 16/9 ratio */
    padding-top: 30px; /* IE6 workaround*/
    height: 0;
    overflow: hidden;
    margin: 0;
  }
#vimeoWrap iframe,
#vimeoWrap object,
#vimeoWrap embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}


footer{
  background-color : #000;
  color : #fff;
  padding-bottom : 1rem;

}


@media only screen and (max-width: 600px) {
  body {
  }

  .nav{
  padding-top:0rem;
  width : 100%;
  }

  .nav-link {
  width : 100%;
  height : 1.8rem;
  padding : 0 0 0 1rem;
  border-top : none;
  border-left : none;
  border-right: none;
  border-bottom : 0.1rem solid #000;
  }


  .nav-link.web{
    display : none;
  }

  .nav-link.mobile{
    display : block;
  }

  #left-first{
    border-left : none;
    border-top : 0.3rem solid #000;
  }

  .container{
    padding-left : 0.3rem;
    padding-right : 0.3rem;
  }



  .main-content{
    padding : 0;
  }

  .display-3-lg{
    font-size : 1.8em;
  }

  h3{
    font-size : 1.5em;
  }

html,body{
  width: 100%;
  height : 100%;
}

  .svg-box{
    padding-top : 5rem;
    padding-bottom : 1rem;
    margin-left:auto;
    margin-right:auto;
    display:block;
    stroke-dasharray: 2000;
    stroke-dashoffset: 2000;
    animation: dash 10s linear infinite;
    width: 100%;
  }

  .svg-box-big{
    display : none;
  }


  .project-title{
    border-top : 0.2rem solid #000;
    padding-top : 1rem;

  }

  .project-title.middle{
    padding-top : 1rem;
  }

  .project-title.follow{
    border-top : 0.2rem solid #000;
    border-bottom : 0.2rem solid #000;
    padding-top : 1rem;

  }

}