/* P reset   (resets) */
/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/
@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
  display: block;
}
body {
  line-height: 1;
}
ol, ul {
  list-style: none;
}
blockquote, q {
  quotes: none;
}
blockquote:before, blockquote:after, q:before, q:after {
  content: "";
  content: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
/* remove meddlesome user-agent-styles */
/*and stuff like this*/
/*https://gist.github.com/murtaugh/5247154*/
/* S etup */
/* set global box-model so that padding and borders stay inside */
html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}
/* https://www.paulirish.com/2012/box-sizing-border-box-ftw */
a {
  /* we use links as parent elements so often, that we can default to this */
  display: block;
  /* remove defaults */
  text-decoration: unset;
  color: inherit;
}
a:hover:not(.title-link) {
  text-decoration: 3px underline dotted var(--color-accent);
}
/* put the classic link styles back */
p a {
  display: inline;
  color: var(--color-accent);
  text-decoration: none;
}
/* picture is inline by default, but we need it to accept block-level images in it */
picture {
  display: block;
  overflow: hidden;
}
/* globally set images to fill their parent and keep their ratio as the default */
img {
  display: block;
  width: 100%;
  height: auto;
}
/* we generally need SVGs to act the same way as images */
svg {
  display: block;
  width: 100%;
  height: auto;
}
/* selects for autonomous customelements which are inline by default */
:where(:not(:defined)) {
  display: block;
}
/* S setings */
/*@import 'developer-styles.css';*/
html {
  --white: hsla(var(--hue), 0%, 97%, 1);
  --hue: 0;
  --dark: 244;
  --purple: 269;
  --pink: 334;
  --yellow: 39;
  --blue: 234;
  --paper: hsla(var(--dark), 15%, 18%, 1);
  --paper-light: hsla(var(--dark), 15%, 25%, 1);
  --ink: white;
  --shadow: rgba(0, 0, 0, 0.8);
  --color-accent: hsla(var(--pink), 80%, 60%, 1);
  --color-one: hsla(var(--yellow), 82%, 74%, 1);
  --color-two: hsla(var(--blue), 74%, 51%, 1);
  --color-three: hsla(var(--purple), 99%, 38%, 1);
  --neutral-stuffs: gray;
  --highlight: var(--color-accent);
  --corners: 10px;
  /* spacing */
  --mobile-margin: 1em;
  --logo-grid-gap: 1em;
  --large-column: 1200px;
  --tight-column: 900px;
  --h2-p: 32px;
}
@media (min-width: 800px) {
  html {
    --mobile-margin: 2em;
    --logo-grid-gap: 2em;
  }
}
/* S tructure */
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  /* be at least a full viewport height */
  /* consider 100svh and 100dvh too */
}
main {
  flex-grow: 1;
  /* fill up available space which happens push the footer down to the bottom */
}
inner-column {
  display: block;
  /*	width: 98%; maybe? */
  max-width: var(--large-column);
  margin-inline: auto;
  /* horizontally center this by default */
  padding-block: 60px 30px;
  padding-inline: 15px;
  container-type: inline-size;
}
/*.site-header {
	position: sticky;
	top: 0;
	z-index: 5;
}*/
.stack {
  display: grid;
}
.stack > * {
  grid-area: 1;
}
@media (min-width: 490px) {
  inner-column {
    padding-block: 60px;
  }
}
/* T ypography */
/* Should we pull in @fonts here? */
/* 
	don't think you can... might have to be higher up (the top of) the food chain! 
	but ideally... they'd be here...  $todo - look into this
*/
body {
  -webkit-font-smoothing: antialiased;
  /* because Brian said to -- $todo confirm */
}
.calm-voice, p, li {
  font-family: "Poppins", sans-serif;
  font-size: 1rem;
  line-height: 1.6;
  font-weight: 400;
  max-width: 65ch;
}
.contact-voice {
  font-size: 1.5rem;
}
.attention-voice {
  font-family: "Massenet", serif;
  font-size: 2.188rem;
}
.loud-voice {
  font-family: "Massenet", serif;
  font-size: clamp(35px, 6vw, 80px);
}
.caps {
  text-transform: uppercase;
}
@media (min-width: 600px) {
  .loud-voice {
    font-weight: 700;
    /* or variable font */
  }
}
:is(.calm-voice, p) em {
  font-style: italic;
}
:is(.calm-voice, p) strong {
  font-weight: 700;
}
/* these would be scoped to section or to an article element */
/* this is just a loose setting for now */
/* or smaller group of article-like styles such as a <text-content> custom element */
p + p {
  margin-top: 1em;
}
h2 + p {
  margin-top: var(--h2-p);
}
code {
  font-family: monospace;
  font-size: 1.1em;
  color: green;
}
/* FONTS */
@font-face {
  font-family: Massenet;
  src: url("../assets/fonts/MassenetSemiBold-Bold.woff2");
}
@media (min-width: 1200px) {
  .attention-voice {
    font-size: 2.813rem;
  }
}
/* C omponents */
/* buttons and icons and smaller reusable bits here */
form {
  border: 10px solid red;
}
.button {
  /* to button - or not to button... */
}
.circle {
  position: absolute;
  z-index: -1;
}
.circle.pink {
  fill: var(--color-accent);
}
.circle.pink.in-header {
  top: -130px;
  left: -155px;
}
.circle.purple {
  fill: var(--color-three);
  max-width: 300px;
}
.circle.purple.in-hero {
  top: -50px;
  right: -20px;
}
.circle.yellow {
  fill: var(--color-one);
  max-width: 180px;
}
.circle.yellow.in-contact {
  z-index: 1;
  top: -75px;
  left: -20px;
}
.circle.blue {
  fill: var(--color-two);
  max-width: 200px;
}
.circle.blue.in-about-me {
  display: none;
}
.arrow {
  transform: scaleX(-1) rotate(-50deg) translateY(50px);
  max-width: 150px;
  margin-inline: auto;
  margin-top: 8px;
}
.arrow-double {
  display: none;
}
@media (min-width: 490px) {
  .circle.pink.in-header {
    max-width: 300px;
  }
  .circle.blue.in-about-me {
    display: block;
    max-width: 200px;
    left: -100px;
    bottom: -50px;
    z-index: 1;
  }
}
@media (min-width: 900px) {
  .arrow {
    transform: scaleX(1) rotate(210deg);
    max-width: 150px;
    margin-bottom: auto;
  }
}
@media (min-width: 1200px) {
  .circle.yellow {
    fill: var(--color-one);
    max-width: 250px;
  }
  .circle.yellow.in-contact {
    top: -100px;
    left: -35px;
  }
}
/* S tuff (modules) */
.mast-head {
  background-color: var(--paper);
  z-index: 2;
}
.mast-head inner-column {
  position: relative;
  padding-top: 20px;
  padding-bottom: 0;
}
.mast-head inner-column h1 {
  display: flex;
  gap: 8px;
  cursor: pointer;
}
.mast-head inner-column h1 span {
  display: inline-block;
}
.mast-head inner-column .user-menu {
  display: flex;
  transform: translateX(-15px);
}
.mast-head inner-column .user-menu a {
  padding: 15px 15px;
}
.mast-head inner-column .user-menu li:nth-of-type(1) a:hover {
  text-decoration-color: var(--white);
}
@media (min-width: 768px) {
  .mast-head inner-column {
    display: flex;
    justify-content: space-between;
  }
  .mast-head inner-column .headline {
    margin-top: 15vh;
  }
  .mast-head inner-column .user-menu li:nth-of-type(1) a:hover {
    text-decoration-color: var(--color-accent);
  }
}
.demo-text {
  margin-top: var(--mobile-margin);
}
.audio {
  max-width: 100%;
}
.hero inner-column {
  padding-bottom: 0;
}
.hero inner-column picture {
  max-width: 400px;
  margin-left: auto;
}
.jelene-wrapper {
  position: relative;
}
@media (min-width: 900px) {
  .hero-content {
    display: flex;
    justify-content: space-between;
  }
  .audio {
    margin-top: var(--h2-p);
  }
  .hero inner-column {
    padding-bottom: 0;
  }
  .hero inner-column .hero-content {
    gap: 5vh;
  }
  .hero inner-column .demo-text {
    margin-top: 1em;
  }
  .hero inner-column picture {
    max-width: 600px;
    margin-left: auto;
  }
}
.about-me-content {
  position: relative;
}
.about-me-content .model-shot {
  margin-top: var(--h2-p);
  max-width: 350px;
}
@media (min-width: 768px) {
  .about-me-content {
    display: flex;
    flex-direction: row-reverse;
    align-items: flex-start;
    gap: var(--logo-grid-gap);
  }
  .about-me-content .about-me-text {
    width: 70%;
  }
  .about-me-content .model-shot {
    margin-top: unset;
  }
}
.client-grid {
  margin-top: var(--h2-p);
  display: grid;
  grid-template-columns: 1fr;
  place-items: center;
  gap: var(--logo-grid-gap);
}
.logo-item {
  max-width: 140px;
  padding: 1em;
}
@media (min-width: 500px) {
  .logo-grid inner-column {
    max-width: var(--tight-column);
  }
  .client-grid {
    grid-template-columns: 1fr 1fr;
  }
  .logo-item {
    max-width: 150px;
  }
}
@media (min-width: 800px) {
  .client-grid {
    grid-template-columns: 1fr 1fr 1fr;
  }
}
.contact inner-column {
  padding-bottom: 0;
}
.contact-text {
  position: relative;
  margin-top: 30px;
}
.contact-text h2 + p {
  margin-top: 10vh;
}
.contact-title.attention-voice {
  z-index: 2;
  position: relative;
}
.microphone {
  max-width: 150px;
  margin-top: var(--mobile-margin);
  margin-left: auto;
}
@media (min-width: 768px) {
  .contact-jelene {
    display: flex;
  }
  .microphone {
    max-width: 200px;
    margin-left: auto;
  }
}
@media (min-width: 1000px) {
  .microphone {
    max-width: 300px;
  }
}
/* S ections and more stuff */
section:nth-of-type(even) {
  background-color: var(--paper-light);
}
/* then other contextual styles */
body {
  background-color: var(--paper);
  color: var(--ink);
}
.my-fantastic-image {
  max-width: 300px;
  border-bottom-right-radius: 30px;
}