@import url('https://rawcdn.githack.com/betsyze/Roobert/ade264a03965d7d4cf3f21c63377455ee49b9489/Roobert.css');

:root {
  --font-size-l: 1.2rem;
  --font-size-m: 12px;
  --font-size-xl: 2rem;

  --sandstone: #999999;
  --sapphire: #172c6c;
  --twilight: #00318A;
  --duval: #131A1C;
  --witch: #585959;
  --rock: #83826b;

  /* neutral */
  --desert-wind: #faf9f5;
  --neutral-0: #F7F4EB;
  --neutral-2: #F1EDDD;
  --neutral-6: #D8D2BA;
  --neutral-8: #9B9064;
  --neutral-10: #766830;

  /* yellow */
  --yellow-2: #FFF1C2;
  --yellow-primary: #FFE79B;
  --yellow-6: #E3CA7B;
  --yellow-8: #9C812E;
  --yellow-10: #715600;

  /* blue */
  --sapphire: #5981FA;
  --blue-6: #4769D0;
  --blue-8: #1B2E68;
  --blue-10: #010B2A;

}

/* Importing Fonts */

@font-face {
  font-family: "Roobert-Medium", Helvetica;
  font-style: normal;
  font-weight: 500;
  src: url('https://github.com/betsyze/Portfolio-published/blob/main/Assets/Fonts/Roobert/Roobert-Medium.otf') format("opentype");
}

@font-face {
  font-family: "Roobert-Regular", Helvetica;
  font-style: normal;
  font-weight: 400;
  src: url('https://github.com/betsyze/Portfolio-published/blob/main/Assets/Fonts/Roobert/Roobert-Regular.otf');
}

@font-face {
  font-family: "Roobert-Semibold", Helvetica;
  font-style: normal;
  font-weight: 700;
  src: url('Assets/Fonts/Roobert/Roobert-SemiBold.otf') format("opentype");
}

@font-face {
  font-family: "Roobert-Bold", Helvetica;
  font-style: normal;
  font-weight: 800;
  src: url('/Assets/Fonts/Roobert/Roobert-Bold.otf') format("opentype");
}


@font-face {
  font-family: "Apfel Grotezk-Regular";
  font-style: normal;
  font-weight: 400;
  src: url('https://anima-uploads.s3.amazonaws.com/projects/61428154992a408f45ab95b1/fonts/apfelgrotezk-regular.otf') format("opentype");
}



body {
  background-image: linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5)), url(/Assets/dith_Bg3.png);
  background-color: var(--desert-storm);
  width: 100%;
  height: 200%;
}



/* popover */


/* popover */


/* Popover styling */
.popover {
  position: fixed;
  top: 10%;
  left: 33.33%;
  background-color: var(--desert-wind);
  border: 1px solid #ccc;
  padding: 10px;
  box-shadow: 0 2px 16px #999999;
  /* border-radius: 4px; */
  display: none;
  z-index: 1000;
  min-width: 460px;
  max-width: 500px;

}

button {
  padding: 0;
  margin: 0;
  border: none;
  outline: none;
  background: none;
  color: var(--sapphire);
  font-family: "Roobert-Regular", Helvetica;
  font-size: var(--font-size-m);
  font-style: normal;
  font-weight: 500;
  line-height: normal;
}

.popover.visible {
  display: block;
}

.pop-header {
  display: flex;
  padding: 4px 4px;
  justify-content: space-between;
  align-items: center;
  align-self: stretch;
  border-bottom: #999999 1px solid;
}

h3.pop-txt {
  font-family: "Roobert-Regular", Helvetica;
  font-weight: 500;
  font-size: 12px;
  margin: 0%;
  padding: 0%;
}

p.pop-txt {
  font-family: "Roobert-Regular", Helvetica;
  font-size: 16px;
  color: var(--neutral-10);
}

.pbox {
  padding: 4px 8px;
  background-color: var(--neutral-2);
  border: 0.5px solid var(--neutral-6);
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;

  & a {
    color: var(--neutral-10);
    font-family: "Roobert-Regular", Helvetica;
    text-decoration: none;
    cursor: pointer;
  }
}

.pbox-main {
  padding: 4px 8px;
  background-color: var(--neutral-2);
  border: 0.5px solid var(--neutral-6);
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
  min-width: 75%;
  max-width: 350px;

  & a {
    color: var(--neutral-10);
    font-family: "Roobert-Regular", Helvetica;
    text-decoration: none;
    cursor: pointer;
  }
}

.pbox2 {
  padding: 4px 8px;
  background-color: white;
  border: 0.5px solid var(--neutral-6);
  display: flex;
  flex-direction: row;
  gap: 12px;
  height: 36px;
}

.pop-txxt {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  font-family: "Roobert-Regular", Helvetica;
  font-size: 12px;
  cursor: default;
  padding: 4px 4px;


  & a {
    color: var(--neutral-10);
  }

  & a:hover {
    cursor: pointer;
  }
}

.pop-txxt:hover {

  border: 0.5px solid var(--neutral-10);
  border-radius: 2px;
  padding: 12px 4px;

}

.dog {
  width: 100%;
  display: flex;
  justify-content: space-between;

  & p:hover {
    border: 0;
    padding: 4px;
  }
}

.spacer {
  height: 8px;
}

.spacer-mini {
  height: 4px;
}

.popover-close {
  font-family: "Roobert-Regular", Helvetica;
  font-size: 12px;
  background: none;
  border: none;
  font-size: 12px;
  cursor: pointer;
  color: var(--witch);
}

.popover-close:hover {
  color: var(--duval);
}


/* Page Architecture */

p {
  margin: 0;
  padding: 0;
  font-family: 'roobert-regular', Helvetica, sans-serif;
  font-size: var(--font-size-m);
}

p.meet {
  margin: 8px 0px;
}

a {
  color: var(--sapphire);

  & p {
    font-family: 'Roobert-Medium', Helvetica, sans-serif;
    color: var(--neutral-10);
    font-size: var(--font-size-m);
  }
}

h1 {
  font-family: "Roobert-Semibold", Helvetica, sans-serif;
  font-size: var(--font-size-xl);


  margin: 0;
  padding: 0;

}

a:hover {
  margin: 0;
  padding: 0;
  cursor: url(/Assets/hover.png), pointer;
}

/* Page bg  */
.homepage-new {
  align-items: flex-start;
  /* background-color: #f6f4ec; */
  display: flex;
  flex-direction: column;
  gap: 40px;
  height: 100%;
  left: 0px;
  overflow: hidden;
  padding: 20px 20px 20px;
  position: relative;
  top: 0px;
  width: 100%;

}

/* White outer box */
.homepage-new .hero-box {
  background-color: #ffffff;
  height: 50%;
  padding: 10px;
  width: 100%;
  /* min-width: 1100px; */


  align-items: flex-start;
  align-self: stretch;
  border: 0.5px solid;
  border-color: var(--duval);
  display: flex;
  gap: 10px;
  position: relative;
}

/* first card */
.homepage-new .biocard {
  align-items: flex-start;
  align-self: stretch;
  background-color: var(--desert-storm);
  border: 0.5px dashed;
  border-color: var(--duval);
  display: flex;
  flex-direction: column;
  gap: 10px;
  /* overflow: hidden; */
  padding: 28px 32px 28px 32px;
  position: relative;
  width: 100%;
  min-width: 430px;
  height: auto;
}

/* inner bio card stack */
.homepage-new .innerbiostack {
  align-items: flex-start;
  align-self: stretch;
  background-color: transparent;
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  gap: 12px;
  position: relative;
  width: 100%;

}

/* bio img */
.homepage-new .bio-img-ZlUoao {
  background-color: transparent;
  height: 100%;
  position: relative;
  width: 84px;
}

/* bio text fit */
.homepage-new .frame-47-ZlUoao {
  align-items: flex-start;
  align-self: stretch;
  background-color: transparent;
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  gap: 12px;
  position: relative;
  max-width: 300px;
}

/* ??? */
.homepage-new .frame-60-7VwDpr {
  align-items: flex-start;
  align-self: stretch;
  background-color: transparent;
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  gap: 8px;
  justify-content: center;
  position: relative;
  width: 100%;
}

/* name text styling */
.homepage-new .title-mygWwm {
  background-color: transparent;
  color: var(--black);
  font-family: "Roobert-Medium", Helvetica;
  font-size: var(--font-size-xl);
  font-style: normal;
  font-weight: 500;
  letter-spacing: 0.00px;
  line-height: 1.3;
  margin-top: -1.00px;
  position: relative;
  text-align: left;
  white-space: nowrap;
  width: fit-content;
}

/* bio text styling */
.homepage-new .intro-headline {
  align-self: stretch;
  background-color: transparent;
  letter-spacing: 0em;
  line-height: 1.3rem;
  font-size: var(--font-size-m);
  position: relative;
  text-align: left;
  font-family: "Roobert-Regular", Helvetica, sans-serif;
}

/* divider styling */
.homepage-new .divider {
  display: block;
  align-self: stretch;
  background-color: transparent;
  flex: 0 0 auto;
  margin-bottom: -0.50px;
  object-fit: cover;
  position: relative;
  width: 100%;
  border-bottom: 0.5px dashed var(--neutral-10);
  height: 1px;
}

/* colophon fit  */
.homepage-new .colo-ZlUoao {
  align-items: flex-start;
  align-self: stretch;
  background-color: transparent;
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  gap: 12px;
  position: relative;
  width: 100%;
  height: 100%;
}

/* colophon header fit */
.homepage-new .colophon-header-TxuAYa {
  align-items: center;
  align-self: stretch;
  background-color: transparent;
  display: flex;
  flex: 0 0 auto;
  gap: 10px;
  justify-content: center;
  overflow: hidden;
  position: relative;
  width: 100%;

}

/* colophon header text styling */
.homepage-new .colophon-JgoTnY {
  background-color: transparent;
  color: var(--black);
  flex: 1;
  font-family: "Roobert-Medium", Helvetica;
  font-size: var(--font-size-m);
  font-style: normal;
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: normal;
  margin-top: -1.00px;
  position: relative;
  text-align: left;
}

/* colophon text fit  */
/* .homepage-new .colo-text-TxuAYa {
    display: block;
    align-items: center;
    align-self: stretch;
    background-color: transparent;
    display: flex;
    flex: 0 0 auto;
    gap: 10px;
    justify-content: center;
    overflow: hidden;
    position: relative;
    min-width: 300px;
    max-width: 350px;
  } */

/* colophon text styling */
.homepage-new .colo-container {
  position: relative;
  min-width: 75%;
  max-width: 350px;

  background-color: transparent;
  flex: 1;
  font-size: var(--font-size-m);
  letter-spacing: 0em;
  line-height: 1.6;
  margin-top: -1.00px;
  position: relative;
  text-align: left;
  font-family: "Roobert-Regular", Helvetica;
}

.homepage-new .span1-RxFDl0 {
  color: var(--black);
  font-family: "Roobert-Regular", Helvetica;
  font-size: var(--font-size-m);
  font-style: normal;
  letter-spacing: 0em;
  text-decoration: underline;
}

.homepage-new .span2-RxFDl0 {
  letter-spacing: 0em;
}

/* /// */

/* UX card */

.homepage-new .ux-card {

  /* flex-direction: column;
      overflow: hidden;
      padding: 40px;
      width: 100%;
      min-width: 305px; */
  display: flex;
  padding: 40px;
  flex-direction: column;
  position: relative;

  overflow: hidden;

  width: 100%;
  min-width: 305px;
  overflow: hidden;

  align-items: flex-start;
  align-self: stretch;
  gap: 10px;

  /* flex: 1 0 0 1; */

  background-color: var(--desert-storm);
  border: 0.5px solid;
  border-color: var(--duval);

}

/* Header images and animations */
.homepage-new .anim6-UZvTVx {
  height: 72px;
  position: relative;
  width: 72px;
}

.UX-gif {
  display: none;
}

.UX-static {
  position: absolute;
  background: white;
}

.art-static {
  position: absolute;
  background: white;
}

.homepage-new .art-card:hover .art-static {
  opacity: 0;
}

.homepage-new .ux-card:hover .UX-static {
  opacity: 0;
}

/* UX Card Header Text */
.homepage-new .experience-design-8AEMPk {
  background-color: transparent;
  color: var(--black);
  font-family: "Roobert-Medium", Helvetica;
  font-size: var(--font-size-l);
  font-style: normal;
  font-weight: 500;
  letter-spacing: 0em;
  line-height: normal;
  margin-top: -1.00px;
  position: relative;
  text-align: left;
  width: fit-content;
}

.homepage-new .ux-card:hover {
  background-color: rgb(255, 255, 255);
}

/* Art Card div */
.homepage-new .art-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  align-self: stretch;

  background-color: var(--desert-storm);
  border: 0.5px solid;
  border-color: var(--duval);

  /* flex: 1 0 0 1; */

  gap: 10px;
  overflow: hidden;
  padding: 40px;
  position: relative;
  width: 100%;
  min-width: 305px;
}

.homepage-new .art-card:hover {
  background-color: rgb(255, 255, 255);
}

/* Art Illo */
.homepage-new .frame-74-pvt6x4 {
  background-color: transparent;
  height: 72px;
  position: relative;
  width: 72px;
}

/* Art header text styling */
.homepage-new .visual-art-1p5TjO {
  background-color: transparent;
  color: var(--black);
  font-family: "Roobert-Medium", Helvetica;
  font-size: var(--font-size-l);
  font-style: normal;
  font-weight: 500;
  letter-spacing: 0em;
  line-height: normal;
  margin-top: -1.00px;
  position: relative;
  text-align: left;
  width: fit-content;
}




/* //// */


.footer {

  /* layout */
  display: flex;
  width: 100%;
  height: 43px;
  padding: 12px 8px 0px 20px;
  align-items: flex-start;
  gap: 10px;


  /* position */
  position: fixed;
  bottom: 0px;

  /* style */
  background: #FAF9F5;
  color: var(--duval);
  font-family: "Roobert-Regular", Helvetica, sans-serif;
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}


.homepage-new .you-can-also-find-me-YdUwlW {
  background-color: transparent;
  height: 28px;
  /* margin-top: -1.00px; */
  text-align: left;
  width: 636px;

  letter-spacing: 0.00px;
  line-height: normal;

  position: relative;


}

.homepage-new .span1-uOQtAz {
  text-decoration: underline;
  color: black;
}


.homepage-new .span3-uOQtAz {
  text-decoration: underline;
  color: black;
}

.homepage-new .span5-uOQtAz {
  text-decoration: underline;
  color: black;
}

/* over complicated? can maybe remove */
.homepage-new .frame-56 {
  align-items: flex-start;
  align-self: stretch;
  background-color: transparent;
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  gap: 10px;
  justify-content: center;
  overflow: hidden;
  padding: 8px 0px;
  position: relative;
  width: 100%;
}

.smlColo {
  display: none;
}

.ds {
  width: 100%;
  height: 100px;
}

.ds2 {
  width: 100%;
  height: 100px;
}





/* media queries! */

@media screen and (min-width: 1200px) {
  .hero-box {
    height: 600px;
    /* min-width: 1100px; */

  }

  :root {
    --font-size-l: 1.4rem;
    --font-size-m: 12px;
    --font-size-xl: 2rem;
  }

  .homepage-new {
    & .biocard {
      max-width: 150%;
    }

    & .frame-47-ZlUoao {
      max-width: 80%;
    }

    & .colo-text-TxuAYa {
      min-width: 100%;

    }

    & .intro-headline {
      font-size: var(--font-size-m);
      line-height: 1.6em;
    }

    & .colo-container {
      min-width: 80%;
    }
  }

}

@media (min-width: 800px) {
  .hero-box {
    height: 600px;
    min-width: 100%;

  }
}

@media (max-width:768px) {
  .homepage-new {
    padding: 10px;
  }

  & homepage-new .frame-47-ZlUoao {
    max-width: 800px;
  }

  .hero-box {
    flex-direction: column;
    align-items: flex-start;
    position: relative;
    /* align-self: stretch; */
    /* height: fit-content; */
    max-width: 100%;
  }


  .biocard {
    height: 100%;
    align-items: stretch;
    height: fit-content;
    min-width: auto;
    position: relative;

    & .frame-47-ZlUoao {
      min-width: 200px;
      max-width: 75%;
    }

    & .colo-container {
      min-width: 350px;
      max-width: 75%;

      font-size: 0.75rem;
      line-height: 1.3em;
    }

    & .intro-headline {
      font-size: 1rem;
      line-height: 1.3em;
    }


  }

  .ux-card {
    /* height: 100%; */
    /* align-items: stretch; */
    height: fit-content;

  }

  .art-card {
    /* height: 100%; */
    align-items: stretch;
    height: fit-content;

  }

  .homepage-new .footer {
    left: 0px;
    padding: 12px 0px 12px 24px;
  }

  .popover {
    left: 15%;
    min-width: 75%;
  }


}

@media (max-width:488px) {

  :root {
    --font-size-m: 12px;
  }

  body {
    background-image: none;
    background-color: var(--desert-storm);
  }

  .homepage-new {
    gap: 12px;
    padding: 12px 12px 48px 12px;
  }

  .homepage-new .divider {
    display: none;
  }

  .homepage-new .colophon-JgoTnY {
    display: none;
  }

  .hero-box {
    flex-direction: column;
  }

  .homepage-new .biocard {
    min-width: 100%;

    & .intro-headline {
      font-size: var(--font-size-m);
      line-height: 1.3em;
    }
  }

  .homepage-new .colo-text-TxuAYa {
    display: none;

  }

  .homepage-new .intro-headline {
    min-width: 200px;
  }

  .homepage-new .ux-card {
    min-width: auto;
  }

  .homepage-new .art-card {
    min-width: auto;
  }

  .ds2 {
    display: none;
  }

  .smlColo {
    display: block;
    padding: 12px;
    width: 90%;

    & p {
      font-family: "Roobert-Regular", Helvetica;
      color: var(--witch);

      letter-spacing: 0em;
      line-height: 1.3;
      font-size: var(--font-size-m);
    }
  }

  p.bold {
    font-weight: 600;
  }

  .homepage-new .footer {
    left: 0px;
    padding: 12px 0px 12px 24px;
  }

  .popover {
    left: 8%;
    right: 8%;
    min-width: 75%;
  }

}