svg {
  display: inline-block;
  position: absolute;
  top: 0;
  left: 0;
}
.wavy {
  display: inline-block;
  position: relative;
  width: 100%;
  padding-bottom: 100%;
  vertical-align: middle;
  overflow: hidden;
}

html{
	background-color: #F4ACB6;
}

header{
  margin-top:1em;
	background-color: #FFCAD8;
}
header.container{
  padding-top: 0.4em;
    padding-bottom: 0.4em;
}
main{
  background-color: #FFFFFF;
}

footer{
	background-color: #FFCAD8;
  margin-bottom:1em;
}

#credits{
  text-align:right;
  padding-left:1em;
  padding-right:1em;
  font-size: 0.6em;

}

.title-bar{
  padding-left: 1em;
  padding-right: 1em;
  padding-top:0;
  justify-content: center;
}

#nav-logo{
 max-width: 150px;
}

#hero-grid{
  margin-left: auto;
  margin-right: auto;
  max-width: 80%;
  align-items: center;
}
#hero-img{
  max-width: 380px;
  margin-left:auto;
  margin-right:auto;

}


.ilse-img{
  max-width: 100%;

}

.rounded-img{
  border-radius: 5px;
    border:1px solid #ffd4da;
}


.center{
  text-align: center;
}

.bubble{
  border-radius: 10px;
  text-align: center;
  color:white;
  max-width: 200px;
  font-size: 1.5em;
}
.purple-1{
  background-color: #3A2F73;
}
.purple-2{
  background-color: #6858AB;
}
.purple-3{
  background-color: #8D98CD;
}
.purple-4{
  background-color: #C4A9DB;
}


@media only screen and (max-width: 1000px) {

  .title-bar{
   justify-content: center;
}
  #nav-logo{
  max-width: 100px;
 
  }
}