@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@200;500;700&family=Barlow:wght@200;500;700&display=swap');


:root {
  --bioimage: url("ben.png");
}

:root.blacktheme {
  --bioimage: url("ben_BW.png");
}

body {
  position: absolute;
  top: 0px;
  width: 100vw;
  height: 100vh;
}

/* bio page styling */

.bio .i-container {
  height: 100%;
  position: relative;
}

/* Blockquote main style */
.bio .i-copy {
  position: sticky;
  top:23vh;
  text-align: center;
  max-width: 70%;
  min-height:10vh;
  margin: 0px auto 5vh auto;
  align-self: center;
  margin: 5vh auto 20vh auto;
}

/* Blockquote header */
.bio .i-copy p {
  position: relative;
  font-weight: 200;
  /* for pseudos */
  color: var(--backcolor);
  font-size: 3vh;
  line-height: 1.5em;
  margin: 0;
  padding: 0;
  margin: 0;
}

.bio .i-copy p::before{
  content: "joe creates design";
  font-family: 'Barlow';
  font-size: 7vh;
  white-space: pre-line;
  font-weight: 500;
  line-height: .8em;
  position: absolute;
  width: 100%;
  text-align: center;
  top:-10vh;
  left: 0;
  padding:0 1vh;
}

/*
.bio .i-copy p::after{
  content: "";
  width:130vw;
  height:130vw;
  position: absolute;
  bottom:-125vh;
  left:50%;
  transform: translate(-50%, -50%);
  background-color: var(--backcolor);
  z-index: -100;
  border-radius: 50%;
}
*/

.benpic {
  background-image: var(--bioimage);
  /* replace with your image path */
  background-position: center bottom;
  background-repeat: no-repeat;
  background-size: auto 100%;
  /* 20% of the div's height */
  width: 100%;
  height: 35%;
  position: fixed;
  bottom: 0px;
  margin: 0 auto 0 auto;
  pointer-events: none;
  z-index: 1000;
}

.bencir {
  width: 100%;
  height: 35%;
  position: fixed;
  bottom: 0px;
  margin: 0 auto 0 auto;
  pointer-events: none;
  z-index: -2000;
}

.bencir::before {
  position: absolute;
  margin-left: 40.25vw;
  margin-right: auto;
  top:0;
  content: "";
  width: 14.25vw;
  aspect-ratio: 1/1;
  background-color: var(--highlight);
  border-radius: 50%;
}

.blacktheme .bencir::before {
  background-color: #202020;
}

.container {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100vw;
  margin-top: 60vh;
  padding-bottom: 10vh !important;
}



.container div {
  font-family: 'Barlow Condensed', sans-serif;
  color: rgba(var(--backcolor-rgb), 0.1);
  text-transform: uppercase;
  position: relative;
  pointer-events: none !important;
}



.container div span {
  color: rgba(var(--backcolor-rgb), 0.5);
  transition: color .25s ease-in-out;
  position: relative;
  pointer-events: none;
}



.container div:hover span {
  color: rgba(var(--backcolor-rgb), 0.1);
}

.resize-text-line {
  font-weight: 700;
  line-height: .8em;
  font-size: 5vw;
  white-space: nowrap;
  text-overflow: ellipsis;
  max-width: 100%;
  margin-top: -.1em;
  margin-bottom: 2vh;
}

@media (min-width: 768px) {
  .resize-text-line {
    font-size: 3vw;
    /* Adjust font size for larger viewports */
  }
}

@media (min-width: 1024px) {
  .resize-text-line {
    font-size: 2vw;
    /* Further adjust font size for larger viewports */
  }
}

.container div span {
  position: relative;
}


.container div span::before {
  content: "";
  width: 0px;
  aspect-ratio: 1/1;
  display: block;
  position: absolute;
  top: 54%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: var(--highlight);
  border-radius: 50%;
  visibility: hidden;
  transition: .5s;
  pointer-events: none !important;
  z-index: -1000;
}

.blacktheme .container div span::before {
  background-color: #202020;
}

.container div span.s01::after {
  content: "TYPOGRAPHY\Ais the glue that binds a design together";
}

.container div span.s02::after {
  content: "INTERFACE\Ais elements on a screen also how people interact with each other";
}

.container div span.s03::after {
  content: "COMMUNICATION\Aseems to be hard for some people, but it keeps a project on track and clients happy";
}

.container div span.s04::after {
  content: "DESIGN\Ais a broad term these days";
}

.container div span.s05::after {
  content: "CONCEPTS\A are always fun to come up with";
}

.container div span.s06::after {
  content: "MOBILE\A design for those on the go";
}

.container div span.s07::after {
  content: "OPTIMIZATION\Aisn't just about keeping your images small, it's about learning from data";
}

.container div span.s08::after {
  content: "DIGITAL\Agoes beyond web. I can help with apps and visual aids";
}

.container div span.s09::after {
  content: "MEDIA\Aranges from traditional, like print, to interacive panels at trade shows";
}

.container div span.s10::after {
  content: "LOGO\A development and brand identity is a proceess I will support you though";
}

.container div span.s11::after {
  content: "INTERACTION\A and how the user expereinces your product gets your message across.";
}

.container div span.s12::after {
  content: "BRAND\Ais your voice and we will work together to find it";
}

.container div span::after {
  white-space: pre-line;
  box-sizing: border-box;
  padding: 2% 3vw 0 3vw !important;
  width: 100%;
  max-height: 100%;
  opacity: 0;
  visibility: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  color: white;
  font-size: 3vh;
  line-height: 1em;
  font-weight: 200;
  text-transform: none;
  overflow: hidden;
  pointer-events: none !important;
}

.container a {
  position: absolute;
  top:.1em;
  width: 100%;
  height: .7em;
  pointer-events: auto;
  opacity: 1;
}

.container a:hover+span::after {
  display: flex;
  visibility: visible;
  margin-top: auto;
  margin-bottom: auto;
  width: 100%;
  max-height: 100%;
  opacity: 1;
  pointer-events: none !important;
  transition: .5s;
}

.container a:hover+span::before {
  display: block;
  width: 110%;
  visibility: visible;
  opacity: 1;
  pointer-events: none !important;
  transition: .25s;
}

.container a:hover+span {
  z-index: -10;
}


.vpsize .is-visible {
  top: 100vh !important;
  opacity: 0;
}

#scroll-indicator {
  display: block;
  opacity: 0;
  text-align: left;
  padding-bottom: 18vh;
  bottom: 10vh;
  width:43vw;
  margin-left:auto;
  right: 0px;
  transition: opacity .1s ease-in;
  z-index: 2000;
}

#scroll-indicator p {
  color: var(--backcolor);
  line-height: 1.25em;
}