@charset "UTF-8";

@font-face {
    font-family: 'BBBReadMe';
    src: url('../fonts/BBBReadMe/BBBReadMe-Regular.woff2');
    font-weight: normal;
    font-style: normal;
    font-display: block;
}

@font-face {
    font-family: 'BBBReadMeBold';
    src: url('../fonts/BBBReadMe/BBBReadMe-Bold.woff2');
    font-weight: bold;
    font-style: normal;
    font-display: block;
}


:root {
  --color-background: rgb(255, 243, 229);
  --color-text: #494342;
  --color-text-link: rgba(255, 81, 0, 0.8);
  --color-text-link-hover: rgba(255, 81, 0, 0.4);
  /* Font values */
  --font-text: 'BBBReadMe', 'BBBReadMeBold', 'Helvetica', 'Arial', sans-serif;
  --font-size: 24px;

  --margin: 1rem;


  --font-size-heading: calc(var(--font-size) * 2);
  --font-size-subheading: calc(var(--font-size) * 1.25);
  --font-size-caption: calc(var(--font-size) * 0.875);

  --margin-xs: calc(var(--margin) * 0.5);
  --margin-s: calc(var(--margin) * 1);
  --margin-m: calc(var(--margin) * 2);
  --margin-l: calc(var(--margin) * 3);
  --margin-xl: calc(var(--margin) * 5);

}




html {
  font: var(--font-size) var(--font-family);
  color: var(--color-text);
  background-color: var(--color-background);
}

body {
  position:relative;
  background-color: var(--color-background);
  font: var(--font-size) var(--font-family);
  color: var(--color-text);
  width:100%;
  height:auto;
  overflow-y:auto;
}

a {
  color: var(--color-text-link);
  text-decoration: underline;
}

a:hover {
  color: var(--color-text-link-hover);
  text-decoration: underline;
}




header {
  display: flex;
  flex-direction: column;
}

main{
  display: flex;
  flex-direction: column;
}

.clarity{
  color: #8f807d;
}


.opening{
 width: 83.33vw;
 align-self: flex-end;
}
.trying{
  width: 50vw;
  align-self: center;
}
.theory{
  width: 66.67vw;
  align-self: flex-end;
}







h1{
  font-size: clamp(
    var(--font-size-heading),
    10vw,
    calc(var(--font-size-heading) * 10)
  );
  font-family: 'BBBReadMeBold';
}

h2{
position: sticky;
top: 0;
margin-left: 0;
padding: 10px 0px 10px;
background: #fff3e5;
font-family: 'BBBReadMeBold';

}


p{
  margin: 0;
}

.orange{
  color: #cb582c
}
.green{
color: #007a48
}
.pink{
  color: #b10069
}
.purr{
  color: #5c2d91
}

.indent{
text-indent: 5vw;
}

img{
  max-width: 100%;
  height: auto;
  margin-top: 0.5rem;
}

div.page-wrapper {
  padding: var(--margin);
}


.desktop-only {
  display: block;
}

.mobile-only {
  display: none;
}


@media (max-width: 299px) { :root{--font-size: 14px;} html, body {font: var(--font-size) var(--font-text); } }
@media (min-width: 299px) and (max-width: 340px) { :root{--font-size: 15px;} html, body {font: var(--font-size) var(--font-text); } }
@media (min-width: 340px) and (max-width: 440px) { :root{--font-size: 16px;} html, body {font: var(--font-size) var(--font-text); } }
@media (min-width: 441px) and (max-width: 779px) { :root{--font-size: 17px;} html, body {font: var(--font-size) var(--font-text); } }
@media (min-width: 780px) and (max-width: 992px) { :root{--font-size: 18px;} html, body {font: var(--font-size) var(--font-text); } }
@media (min-width: 993px) and (max-width: 1200px) { :root{--font-size: 20px;} html, body {font: var(--font-size) var(--font-text); } }
@media (min-width: 1201px) and (max-width: 1320px) { :root{--font-size: 22px;} html, body {font: var(--font-size) var(--font-text); } }
@media (min-width: 1321px) { :root{--font-size: 24px;} html, body {font: var(--font-size) var(--font-text); } }


@media (max-width: 779px) {

  .opening{
  width: 75vw;
  align-self: flex-start;
  }
  .trying{
    width: 75vw;
    align-self: center;
  }
  .theory{
    width: 75vw;
    align-self: flex-end;
  }

  h1{
  font-size: clamp(
    var(--font-size-heading),
    15vw,
    calc(var(--font-size-heading) * 10)
  );

}


  .desktop-only{
    display:none;
  }

  .mobile-only{
    display:block;
  }

}




@media (max-width: 339px) {

  .opening{
  width: 100vw;
  align-self: flex-start;
  }
  .trying{
    width: 100vw;
    align-self: flex-start;
  }
  .theory{
    width: 100vw;
    align-self: flex-start;
  }
}