body {
  font-family: Arial, Helvetica, sans-serif;
  margin: 0;
  background-color:#311910;
  overflow-x: hidden;
}

.container {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    position: relative;
}


.header {
  padding: 1px;

}

.footer {
  margin: -1vw;
  padding-bottom: 5vw;
  transition: margin 0.2s;
}

.joe {
  width: 22vw;
  border-radius: 5vw;
  display: block;
  margin: 2vw;
  box-shadow: #FCD3CA 1vw 1vw;
}

a {
  text-decoration: none;
}

.header h1 {
  font-size: 5vw;
  font-family: "Poppins";
  color:#FCD3CA;  
  font-weight: 700;
  font-style: italic;
  margin: 0% 0%;
  text-align: center;

}

.header img {
  width: 30vw;
  height: 11.5vw;
  text-align: center;
  display: block;
  position: relative;
  margin: 0 auto;
  margin-bottom: -2vw;
  transition: width 0.2s, height 0.2s;
}

.header object {
  width: 30vw;
  text-align: center;
  display: block;
  position: relative;
  margin: 0 auto;
  margin-bottom: -2vw;
  transition: width 0.2s, 
  height 0.2s;
}

.header img:hover {
  width: 35vw;
  height: 13.5vw;
}

.header object:hover {
  width: 35vw;
}


.header h2 {
  font-size: 4vw;
  font-family: "Poppins";
  color:#FCD3CA;  
  font-weight: 700;
  font-style: italic;
  margin: 0% 0%;
  text-align: center;
}

.header h3 {
  font-size: 4vw;
  font-family: "Poppins";
  color:#FCD3CA;  
  font-weight: 700;
  font-style: italic;
  margin: 2vw 0% 0% 0%;
  text-align: center;
}

.graphic_anim_blob {
  display: block;
  height: 15vw;
  width: 30vw;
  margin: auto;
  padding: 2% 1% 2% 1%;
  background-image: url(images/Blob_TL.svg);
  background-size: auto;
  background-repeat: no-repeat;
  background-position: center;
  transition: height 0.2s, width 0.2s, font-size 0.2s;
}

.graphic_anim_blob:hover {
  height: 16.15vw;
  width: 33vw;
  font-size: 4.5vw;
}

.footer h1 {
  font-size: min(6vh, 3.5vw);
  font-family: "Poppins";
  color:#FCD3CA;  
  font-weight: 700;
  margin: 0% 0%;
  text-align: center;

}

.vid_edit_blob {
  display: block;
  height: 15vw;
  width: 30vw;
  margin: auto;
  padding: 2% 1% 2% 1%;
  background-image: url(images/Blob_TR.svg);
  background-size: auto;
  background-repeat: no-repeat;
  background-position: center;
  transition: height 0.2s, width 0.2s, font-size 0.2s;
}

.vid_edit_blob:hover {
  height: 16.15vw;
  width: 33vw;
  font-size: 4.5vw;
}
.graphics_des_blob {
  display: block;
  height: 15vw;
  width: 30vw;
  margin: auto;
  padding: 2% 1% 2% 1%;
  background-image: url(images/Blob_BL.svg);
  background-size: auto;
  background-repeat: no-repeat;
  background-position: center;
  transition: height 0.2s, width 0.2s, font-size 0.2s;
}

.graphics_des_blob:hover {
  height: 16.15vw;
  width: 33vw;
  font-size: 4.5vw;
}
.ux_des_blob {
  display: block;
  height: 15vw;
  width: 30vw;
  margin: auto;
  padding: 2% 1% 2% 1%;
  background-image: url(images/Blob_BR.svg);
  background-size: auto;
  background-repeat: no-repeat;
  background-position: center;
  transition: height 0.2s, width 0.2s, font-size 0.2s;
}

.ux_des_blob:hover {
  height: 16.15vw;
  width: 33vw;
  font-size: 4.5vw;
}

.container h2 {
  font-family: "Poppins";
  color:#311910;
  font-weight: 700;
  font-style: italic;
  text-align: center;
  font-size: 4vw;
  margin: 4%;
  line-height: 1.1;
}

.container h2 mark {
  color: #311910;
  background-color: #FCD3CA;  
}

.container h3 {
  font-family: "Poppins";
  color:#311910;  
  font-weight: 700;
  font-style: italic;
  text-align: center;
  font-size: 4vw;
  margin: 15%;
  line-height: 1.1;
}

.container h3 mark {
  color: #311910;
  background-color: #FCD3CA;  
}

.about {
  margin: -5vw;
  height: 15vw;
  width: 15vw;
  transition: height 0.2s, width 0.2s;
}


.about img {
  position: absolute;
  left: 41vw;
  width: 15vw;
  transition: width 0.2s;
}

.about img:hover {
  width: 17vw;
}

.about svg {
  position: absolute;
  top: -10vw;
  left: 36.5vw;
  width: 25vw;
  height: 25vw;
  transition: top 0.2s, left 0.2s, height 0.2s, width 0.2s;
  background-image: url(images/Hero_GIF.avif)/*, url(images/Hero_Gif.gif)*/;
  background-size: 62%;
  background-repeat: no-repeat;
  background-position: center;
  position: relative;
  left: 0%;
  top: 0%;
  width: 180%;
  height: auto;
  margin: -40%;
  z-index: 150;

}

/*.about svg:hover {
  top: -10.5vw;
  left: 35vw;
  height: 27.5vw;
  width: 27.5vw;
}*/

.about:hover {
  height: 17vw;
  width: 17vw;
}

.about svg text {
  font-size: 100%;
  font-family: "Poppins";
  fill:#FCD3CA;  
  font-weight: 600;  
  letter-spacing: 3px;
  word-spacing: 70px;
  transition: font-size 0.2s; 
}


.normal-link {
    cursor: pointer;
    margin: -100%;
    text-decoration: none;
    background-color: #00000000;
    color: white;
    font-size: 2.75vw;
    letter-spacing: 0.25vw;
    line-height: 4vw;
    padding: 100% 100%;
    text-shadow: black 2px 2px 5px;
}

#MainRegion {
  transition: transform 0.8s, translate 0.8s;
  /*transform-origin: 15% 15% ;*/
  transform-origin: center top ;
  width: 100vw;
  margin: auto;
  margin-top: 2vw;
}


#MainRegion:hovery {
  transform: scale(1.5);
}

@media (min-aspect-ratio: 1) {
  .header img {
    width: auto;
    height: min(11.5vw, 20vh);
    margin-bottom: 0vh;
  }
  .header img:hover {
    height: min(13vw, 23vh);
    width: auto;
  }
  #MainRegion {
    font-size: min(4vw, 7vh);
    /*width: clamp(20vw, 80vw, 100vw);*/
    margin: auto;
    margin-top: 1vh;
    padding-bottom: 2vh;
  }
  .container {
    max-height: 50vh;
    /*width: clamp(20vw, 160vh, 100vw);*/
    width: min(150vh, 80vw);
    justify-content: center;
    margin: auto;
  }
  .graphic_anim_blob {
    aspect-ratio: 2;
    height: min(15vw, 25vmin);
    width: auto;
    font-size: auto;
  }
  .graphic_anim_blob:hover {
    height: min(16.15vw, 27.5vmin);
    font-size: 1.11em;
    width: auto;
  }
  .graphic_anim_blob h2 {
    font-size: 1em;
  }
  .vid_edit_blob {
    aspect-ratio: 2;
    height: min(15vw, 25vmin);
    width: auto;
    font-size: auto;
  }
  .vid_edit_blob:hover {
    height: min(16.15vw, 27.5vmin);
    font-size: 1.11em;
    width: auto;
  }
  .vid_edit_blob h2 {
    font-size: 1em;
  }
  .about {
    margin: max(-10.6vw, -20vmin);
    aspect-ratio: 1;
    width: min(25vw, 45vmin);
    height: auto;
  }
  .about:hover {
      width: min(28vw, 50vmin);
      height: auto;
  }
  .about svg {
    position: relative;
    width: 100%;
    height: auto;
    margin: 0vmin;
  }

  .about svg text {
    font-size: 12px;
    text-align: center;
  }
  .ux_des_blob {
    aspect-ratio: 2;
    height: min(15vw, 25vmin);
    width: auto;
    font-size: auto;
  }
  .ux_des_blob:hover {
    height: min(16.15vw, 27.5vmin);
    font-size: 1.11em;
    width: auto;
  }
  .ux_des_blob h3 {
    font-size: 1em;
  }
  .graphics_des_blob {
    aspect-ratio: 2;
    height: min(15vw, 25vmin);
    width: auto;
    font-size: auto;
  }
  .graphics_des_blob:hover {
    height: min(16.15vw, 27.5vmin);
    font-size: 1.11em;
    width: auto;
  }
  .graphics_des_blob h3 {
    font-size: 1em;
  }
  .footer {
    margin: -2vh;
    padding-bottom: 5vh;
  }
}

.top-links:link, .top-links:visited {
    font-size: 2vw;
    text-decoration: none;
    font-family: "Poppins";
    color: #311910;  
    font-weight: 700;
    font-style: italic;
    position: fixed;
    padding: 2vw 4vw;
    margin: 3vw 1vw;
    border-radius: 100px;
    transition: font-size 0.2s;
    background-image: url(images/About.svg);
    background-size: auto;
    background-repeat: no-repeat;
    background-position: center;
    z-index: 300;
}

.top-links:hover {
  font-size: 3vw;
}

.entries {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    position: relative;
}

.entry-text{
  width: 40vw;
  padding: 2vw 2vw;
}

.entry-photo {
  width:40vw;
  padding: 2vw 2vw;
}

.entry-photo img {
  width:40vw;
  border-radius:  2vw;
}

.entry-joephoto {
  width:25vw;
  padding: 0vw 2vw;
}

.entry-joephoto img {
  width:25vw;
  border-radius:  5vw;
}

.entry-poster {
  width:40vw;
  padding: 1vw 2vw;
}

.entry-poster img {
  width:20vw;
  border-radius:  2vw;
  margin-left:20vw ;
}

.entry-text h1 {
  font-size: 3vw;
  font-family: "Poppins";
  color:#FCD3CA;  
  font-weight: 700;
  font-style: italic;
  padding: 2vw 2vw;
  padding-bottom: 0.5vw;
  margin: 0% 0%;
  text-align: left;
  line-height: 1.1;
}

.entry-text h2 {
  font-size: 1.5vw;
  font-family:"Poppins";
  color:#FCD3CA;  
  padding: 0vw 2vw;
  font-weight: 600;
  font-style: italic;
  margin: 0% 0%;
  text-align: left;
}

.entry-text p1 {
  display: block;
  font-size: 1.5vw;
  font-family: "Open Sans";
  color:#FCD3CA;  
  padding: 1vw 2vw;
  font-weight: 700;
  font-style: normal;
  margin: 0% 0%;
  text-align: left;
}

.entry-text p1 a {
  color:#F8A08C;
  text-decoration:wavy underline;
  font-style: italic;
}

.entry-text img {
  height: 18;
  width: 32vw;
  align-self: center;
}


.video {
  display: block;
  padding: 2vw 2vw;
}

.video iframe {
  top: 0;
  left: 0;
  width: 40vw;
  height: 22.5vw;
  border-radius: 2vw;
}

.video img {
  top: 0;
  left: 0;
  width: 40vw;
  height: 22.5vw;
  border-radius: 2vw;
}

.video-square {
  display: block;
  padding: 2vw 9.5vw;
}

.video-square iframe {
  width:25vw;
  height: 25vw;
  border-radius: 2vw;

}

.video-vert {
  display: block;
  width: 14.5vw;
  padding: 1vw 15.25vw;
}

.video-vert img {
  width:14.5vw;
  height: 26vw;
  border-radius: 2vw;
}

.app-vert {
  display: block;
  padding: 1vw 15.25vw;
}

.app-vert iframe {
  width:14.5vw;
  height: 32vw;
  border-radius: 2vw;

}

.video-wide {
  display: block;
  overflow:hidden;
  width: 84vw;
  border-radius:2vw ;

}

.video-wide iframe {
  aspect-ratio: 48/9;
  width: 84vw;
  scale: 1.4;
}