@font-face {
  font-family: Header-Font;
  src: url(src/fonts/Sriracha-Regular.ttf);
}

@font-face {
  font-family: Paragraph-Font;
  src: url(src/fonts/Itim-Regular.ttf);
}

/*Width is greater than Height*/
@media screen and (min-aspect-ratio: 1/1) {
  .profileContainer
  {
    flex-direction: row;
  }
  .profileImage
  { 
    margin-right: 10px;
    width: 11vmin;
  }

  .aboutHeader
  {
  }

}

/*Width is less than Height*/
@media screen and (max-aspect-ratio: 1/1) {
  .profileContainer
  {
    flex-direction: column;
  }
  .profileImage
  {
    width: 19vmin;
  }

  .aboutHeader
  {
  }

}

.centerContentContainer {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
  text-align: center;
  margin: 0 auto;
  min-height: 80vh;
  background-image: url("src/Lumins_Flower_No_Text_60_Opacity.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.gradientContainer
{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;    
  margin: 0 auto;
  width: 100%;
  min-height: 80vh;
  background-image: linear-gradient(rgba(222, 251, 255, .0), rgba(222, 251, 255, 0.7), rgba(222, 251, 255, 0.8), rgba(222, 251, 255, 0.7), rgba(222, 251, 255, 0.0));
}

.storyContainer
{
  display: flex;
  text-align: center;
  font-family: Paragraph-Font, cursive;
  font-size: calc(2vmin + .4em);
  flex-direction:column;
  align-items: center;
  justify-content: center;
}

.storyContainer p
{
  width: 90%;
}

.storyContainer img
{
  margin: 5%;
  width: 50%;
  height: auto;
}

.aboutHeader
{
  text-align: center;
  font-family: Paragraph-Font, cursive;
  font-size: calc(3.5vmin + .4em);
  border: none;
  padding-left: 20px;
  margin-bottom: 20px;
  width: 90%;
}

.profileContainer
{
  display: flex;
  width: 90%;
  min-height: 100px;
  font-family: Paragraph-Font, cursive;
  margin-top: 10px;
  margin-bottom: 10px;
  align-items: center;    
  justify-content: center;
}

.profileContainer p
{
  width: 90%;
  text-align: left;
  font-size: calc(1.0vmin + .5em);
}

.profileImage
{
  display: inline-block;
  border-style: solid;
  border-radius: 3px;
  border-width: 2px;
}

.profileImage img
{
  width: 100%;
}

.profileImage p {
  margin-top: 0px;
  margin-left: 0px;
  margin-right: 0px;
  font-size: 11px;
  font-family: Paragraph-Font, cursive;
  width: 100%;
}