.h1proj {
  /*width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin: 50px -50vw 0px;*/
  margin: 0 0 3vw;
  padding: 0;
  font-size: calc(20px + 3vw);
  font-weight: 600;
  text-align: center;
  /*border:3px dashed blue;*/
}

.psub{
  margin: 5vw 0 0.5vw;
  text-align: center;
  -webkit-text-fill-color:  var(--base-textsubfill);
}

/*
Idea is to create left-right 'steps' of projects
*/

.h2proj{
  position: relative;
  margin: 1.1vw  2vw 0.1vw !important;
  padding: 0vw;
}

.p2sub{
  margin: 0 0 0 2vw !important;
  padding: 0vw;
  -webkit-text-fill-color: var(--base-textsubfill);
  font-size: calc(0.6em + 0.5vmax);
}

.p2text{
  margin: 0.7vw 0 0 2vw;
  max-width: 55vw;
}
/*
Wanted to try make these flexboxes but that did not work out 
*/
.content{
  max-width: 99vw;
  overflow: hidden;
}

.projbar{
  position: relative;
  overflow: hidden;
  margin: 4vw 1vw 0;
  display: flex;
  align-items: center;
  max-width: 100%;
  max-height: 30vw;
}

.spacebar{
  margin: auto 0 0 0;
  min-height: 0vw;
  max-height: 10vw;
}

.projdiv-L{
  position: relative;
  padding: 0 0.5vw 0 0;
  margin: 0 auto 0 0;
  width: 58vw;
  max-height: 30vw;
  background-color: var(--base-divbg);
  border-radius: 0.5vw 2vw 2vw 0.5vw;
}

.projdiv-L img{
  padding: 1vw;  
  margin: 0 0 0 1vw;
  position: relative;
  max-height: 20vw;
  border-radius: 1.3vw;
  float: right;
}

.skilldiv-R{
  padding: 1vw;   
  margin-left: auto;
  width: 30vw;
  height: 20vw;
  background-color: var(--base-divbg);
  border-radius: 2vw 0.5vw 0.5vw 2vw;
}


.projdiv-R{
  padding: 0 0 0 0.5vw;   
  margin: 0 0 0 auto;
  width: 58vw;
  background-color: var(--base-divbg);
  border-radius: 2vw 0 0 2vw;
}

.projdiv-R img{
  padding: 1vw;
  margin: 0 1vw 0 0;
  position: relative;
  height: 20vw;
  border-radius: 1.3vw;
  float: left;
}

.skilldiv-L{
  padding: 1vw;   
  margin-right: auto;
  width: 29vw;
  height: 20vw;
  background-color: var(--base-divbg);
  border-radius: 0 2vw 2vw 0;
}

.hrdiv{
  margin: 3vw 0 0 1.7vw;
  width:34vw;
}

.ptags{
  text-align: center;
  margin: 1vw 0 1vw 2vw;
  font-size: calc(0.5em + 0.5vmax);
  -webkit-text-fill-color:  var(--base-textsubfill);
  float: left;
}

.tagdiv-L{
  position: absolute;
  bottom: 1vw;
  left: 1vw;
}

.tagdiv-R{
  position: absolute;
  bottom: 1vw;
  right: 5vw;
}


/*
.ptr{
 -webkit-text-fill-color: #0000ff;
}
*/

/*
derived from
https://blog.hubspot.com/website/css-fade-in
*/
.tag{
  color: 0;
}

.tag-R{
  color: 0;
}



.tag{
  opacity: 0;
  transform: translate(10vh, 0);
  transition: all 1s;
}

.tag.visible{
  opacity: 1;
  transform: translate(0, 0);
}

.tag-R{
  opacity: 0;
  transform: translate(-10vh, 0);
  transition: all 1s;
}

.tag-R.visible{
  opacity: 1;
  transform: translate(0, 0);
}

/*
code to disable for saving to pdf
*/
/*
.tag{
  opacity: 1;
}

.tag.visible{
  opacity: 1;
  transform: translate(0, 0);
}

.tag-R{
  opacity: 1;
}

.tag-R.visible{
  opacity: 1;
  transform: translate(0, 0);
}
*/