html,body{
    height: 100%;
    padding: 0;
    margin: 0;
    background-color: /* #c4d8ff */#3f72af;
}
@media (min-width: 992px) {
    .progress-bar{
      border: none;
      background-color: transparent;
      transition: padding-top 0.3s ease-in-out, padding-bottom 0.3s ease-in-out;

    }
}
a{
  cursor: pointer;
  color: rgb(255, 224, 144);
  font-weight: 400;
}
p{
    text-indent: 1em;
    padding: 0 10px;
    line-height: 30px;
}

    #home{
        height:calc(100%);
        -webkit-perspective: 1500px;
        perspective: 1500px;
        perspective-origin: center bottom;
        background-color: #eeeeee;
    }

    .hero{   
        position: absolute;
        left: 0;
        right:0;
        bottom:auto;
        background: url(https://static.igem.wiki/teams/4205/wiki/background.png) no-repeat center center;
        background-size: cover;
        transform-origin: 50% 100%;
        transform-style: preserve-3d;
        box-shadow: rgba(0, 0, 0, 0.651)8px 3px 10px,rgba(0, 0, 0, 0.651)-8px 3px 10px;
    }

    .hero .overlay{
        z-index: 0;
        content:"";
        display:block;
        position:absolute;
        top:0;
        bottom:0;
        left:0;
        right:0;
        opacity:0;
        background-color: linear-gradient(to bottom,rgba(0,0,0,1) 0% ,rgba(0,0,0,0) 100% );
    }
/* ---------book--------- */
#book{
  border-bottom-left-radius: 50% 20%;
  border-bottom-right-radius: 50% 20%;
}

/* -------intro------- */
.card-pic {
  width: 100%;
  margin: 30px;
  margin-bottom: 30px;
  border-bottom: 1px solid #cccccc;
  border-radius: 8px;
  overflow: hidden;
  background: #ffffff;
  box-shadow: 1px 1px 5px 1px #cccccc;
  transition: 0.3s;
}
/* .intro:hover .card-pic{
  animation-name: fadeInLeft;
} */
.card-pic img{
  width: 100%;
}
.home-intro{
  display: flex;
  flex-wrap: wrap;
  align-items: center; 
}
.intro{
  display: flex;
  align-items: center;
  width: 100%;
  flex-direction: row;
  justify-content: center;
}

.intro#right{
  flex-direction: row-reverse;
  justify-content: flex-start;
  text-align: right;
}
.intro#left{
  justify-content: flex-start;
}
.intro .content{
  margin: 30px;
  width: 100%;
  color: var(--white);
  font-size: 2.5vh
}
.intro .content p{
  font-size: 4.3vh;
  line-height: 40px;
  font-family: Comic Sans MS;
}
.intro .text{
  transition: .4s;
  animation-delay: .4s;
  opacity: 0;
}

.showy{
  width: 100%;
  margin: 80px;
  font-family: 'cartagena';
  font-size: 70px;
  color: var(--orange);
}

/* .scroll-snap{
  scroll-snap-type: y mandatory;
}
.scroll-snap section{
  scroll-snap-align: start;
}
 */