@import url("https://fonts.googleapis.com/css2?family=Inter+Tight:ital,wght@0,100..900;1,100..900&display=swap");

/* RESET RESET RESET RESET RESET RESET RESET RESET RESET RESET RESET  */

/* makes sizing simpler */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* remove default spacing */
/* force styling of type through styling, rather than elements */
* {
  margin: 0;
  padding: 0;
  font: inherit;
}

/* dark mode user-agent-styles */
/* improves punctuation in supported browsers */
html {
  color-scheme: dark light;
  hanging-punctuation: first last;
}

/* min body height */
body {
  min-height: 100svh;
}

/* responsive images/videos */
img,
picture,
svg,
video {
  display: block;
  max-width: 100%;
  /* additional maybe img specific */
  height: auto;
  vertical-align: middle;
  font-style: italic;
  background-repeat: no-repeat;
  background-size: cover;
  shape-margin: 0.75rem;
}

/* Improved heading in supported browsers */
h1,
h2,
h3,
h4,
h5,
h6 {
  text-wrap: balance;
}

/* improve readability with max-width on paragraphs and lists */
/* prevent orphans in supported browsers */
p,
li {
  max-width: var(--p-max-width, 65ch);
  text-wrap: pretty;
}

/* end RESET RESET RESET RESET RESET RESET RESET RESET RESET RESET RESET  */

:root {
  --purple: hsl(275, 66%, 35%);
  --blue: hsl(169, 70%, 50%);
  --white: hsl(0, 0%, 100%);
}

.inter-tight-h1 {
  font-family: "Inter Tight", serif;
  font-optical-sizing: auto;
  font-weight: 900;
  font-style: normal;
}

body {
  display: flex;
}

header {
  flex-grow: 1;
  display: grid;
  justify-items: center;
  align-content: center;
  padding: 2rem;
  background-color: var(--blue);
  color: white;
  height: 100vh;
  padding-block-end: 10vh;
}

h1 {
  font-size: clamp(50px, 20vw, 150px);
  font-weight: extra-bold;
  line-height: 0.8;
  position: relative;
  text-align: center;
}

.heroes {
  height: 100vh;
  min-width: 25%;
  background-color: var(--purple);
  /* !! move left 1px to avoid bleed */
  background-position: bottom left -1px;
  background-size: contain;
  background-repeat: no-repeat;
}

.bears {
  background-image: url("data:image/svg+xml,%3Csvg width='100%25' height='100%25' viewBox='0 0 336 426' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' xml:space='preserve' xmlns:serif='http://www.serif.com/' style='fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;'%3E%3Cg id='LeftBear' transform='matrix(1,0,0,1,-181.184,-65.4925)'%3E%3Cg id='FaceColour' transform='matrix(1.02975,0,0,0.996953,-15.4339,-25.7739)'%3E%3Ccircle cx='268.319' cy='219.134' r='77.381' style='fill:white;'/%3E%3C/g%3E%3Cpath d='M181.184,491.036l-0,-425.494c0.645,-0.033 1.294,-0.05 1.946,-0.05c1.802,0 3.626,0.128 5.461,0.389c20.323,2.897 34.668,21.24 32.847,41.455c36.116,-1.696 70.444,2.968 102.988,13.974c4.195,-19.543 22.892,-32.803 42.981,-29.94c20.993,2.993 35.607,22.466 32.615,43.458c-1.888,13.243 -10.334,23.947 -21.583,29.295c24.562,94.661 31.056,200.39 28.304,290.552c-0.387,12.688 -0.507,25.293 -0.498,36.361l-225.061,0Zm85.153,-330.594c-28.353,-4.042 -54.654,15.696 -58.696,44.049c-4.041,28.353 15.697,54.654 44.05,58.695c28.353,4.042 54.654,-15.696 58.695,-44.049c4.042,-28.353 -15.696,-54.654 -44.049,-58.695Zm-11.031,55.606c-11.01,-3.514 -18,-16.882 -16.667,-26.236c1.451,-10.18 12.214,-11.777 24.931,-9.964c12.718,1.813 22.606,6.353 21.155,16.533c-1.334,9.355 -11.78,20.237 -23.333,20.534l-2.428,17.028c-0.239,1.679 -1.797,2.849 -3.476,2.609c-1.68,-0.239 -2.849,-1.797 -2.61,-3.477l2.428,-17.027Zm66.157,-53.733c-5.614,0.678 -9.511,6.698 -8.697,13.435c0.813,6.737 6.032,11.656 11.646,10.977c5.614,-0.678 9.511,-6.698 8.697,-13.435c-0.813,-6.736 -6.032,-11.655 -11.646,-10.977Zm-108.58,-15.478c-5.201,-2.22 -11.587,1.045 -14.25,7.287c-2.664,6.241 -0.604,13.11 4.597,15.33c5.201,2.219 11.586,-1.045 14.25,-7.287c2.664,-6.241 0.604,-13.11 -4.597,-15.33Z' style='fill:rgb(38,217,185);'/%3E%3C/g%3E%3Cg id='RightBear' transform='matrix(1,0,0,1,-181.184,-65.4925)'%3E%3Cg id='FaceColour1' serif:id='FaceColour' transform='matrix(1,0,0,1,1.45561,9.03685)'%3E%3Ccircle cx='426.254' cy='260.801' r='64.683' style='fill:rgb(38,217,185);'/%3E%3C/g%3E%3Cpath id='Right' d='M388.369,207.712c18.108,-7.332 36.629,-11.924 55.564,-13.784c-3.084,-14.284 5.386,-28.744 19.634,-32.879c14.888,-4.32 30.483,4.259 34.804,19.148c2.725,9.392 0.317,19.065 -5.57,26.012c8.101,10.06 16.176,21.787 24.119,34.609l-0,250.218l-165.262,0c-9.669,-65.842 -21.476,-171.815 -15.103,-239.29c-8.836,-2.645 -16.195,-9.58 -18.955,-19.09c-4.32,-14.888 4.259,-30.483 19.148,-34.804c14.413,-4.182 29.489,3.725 34.356,17.743c5.713,-2.909 11.467,-5.536 17.265,-7.883Zm7.317,42.391c-7.406,9.782 -10.262,22.818 -6.583,35.496c2.367,8.156 7.098,14.99 13.232,19.971c9.891,8.032 23.427,11.249 36.579,7.432c21.308,-6.183 33.587,-28.503 27.403,-49.811c-6.183,-21.308 -28.503,-33.587 -49.811,-27.403c-8.63,2.504 -15.779,7.656 -20.82,14.315Zm61.785,-25.588c-3.748,2.268 -4.581,7.761 -1.859,12.258c2.722,4.498 7.974,6.308 11.722,4.039c3.748,-2.268 4.581,-7.761 1.859,-12.258c-2.722,-4.498 -7.974,-6.307 -11.722,-4.039Zm-81.6,23.68c-4.38,0.091 -7.848,4.431 -7.739,9.687c0.108,5.256 3.752,9.449 8.132,9.359c4.38,-0.091 7.848,-4.431 7.739,-9.687c-0.108,-5.256 -3.752,-9.449 -8.132,-9.359Zm51.241,32.685c-4.715,0.656 -9.532,-0.713 -13.573,-3.224c-4.676,-2.905 -8.263,-7.324 -9.515,-11.639c-1.398,-4.816 0.097,-8.671 3.483,-11.746c2.913,-2.645 7.393,-4.684 12.568,-6.186c5.175,-1.502 10.05,-2.177 13.926,-1.503c4.507,0.785 7.833,3.241 9.231,8.057c1.252,4.315 0.588,9.968 -1.807,14.925c-2.069,4.284 -5.405,8.018 -9.739,9.989l2.635,9.079c0.366,1.262 -0.361,2.584 -1.623,2.95c-1.262,0.367 -2.585,-0.361 -2.951,-1.623l-2.635,-9.079Z' style='fill:white;'/%3E%3C/g%3E%3C/svg%3E");
  aspect-ratio: 336 / 426;
}

.fab {
  background-image: url("data:image/svg+xml,%3Csvg width='100%25' height='100%25' viewBox='0 0 1360 2000' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' xml:space='preserve' xmlns:serif='http://www.serif.com/' style='fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;'%3E%3Cg%3E%3Cpath d='M1022.88,2000l-1022.88,-0l0,-2000c6.35,0.074 12.76,0.499 19.208,1.291c91.597,11.246 157.671,92.438 151.25,183.453c162.178,-10.778 316.872,7.188 464.102,53.818c17.146,-88.206 100.024,-149.434 190.565,-138.317c94.613,11.617 161.995,97.862 150.378,192.474c-7.329,59.685 -44.355,108.533 -94.445,133.549c102.98,367.392 137.45,1117.02 141.82,1573.73Z' style='fill:%2326d9b9;'/%3E%3Cpath id='Snouter' d='M376.891,419.508c127.786,15.69 218.794,132.175 203.104,259.961c-15.69,127.786 -132.175,218.794 -259.961,203.104c-127.786,-15.691 -218.794,-132.175 -203.104,-259.961c15.69,-127.786 132.175,-218.794 259.961,-203.104Z' style='fill:%23fff;'/%3E%3Cpath id='Nose' d='M367.836,493.256c31.034,3.81 58.586,11.344 77.72,23.798c22.249,14.481 34.378,35.177 30.831,64.063c-3.177,25.873 -19.633,54.512 -43.729,75.484c-24.279,21.13 -56.037,34.346 -88.604,30.347c-32.568,-3.999 -60.185,-24.505 -78.631,-50.881c-18.307,-26.179 -27.346,-57.947 -24.169,-83.821c3.547,-28.885 20.322,-46.033 45.413,-54.701c21.579,-7.455 50.135,-8.1 81.169,-4.289Z' style='fill:%2326d9b9;'/%3E%3Cpath id='Philtrum' d='M358.03,686.501l-7.858,64.002c-0.93,7.569 -7.83,12.96 -15.399,12.031c-7.569,-0.93 -12.96,-7.83 -12.031,-15.399l7.859,-64.002c0.929,-7.569 7.829,-12.96 15.398,-12.031c7.57,0.93 12.96,7.83 12.031,15.399Z' style='fill:%2326d9b9;'/%3E%3Cg id='Eyes'%3E%3Cpath d='M135.454,363.028c23.57,9.523 33.428,40.217 22,68.5c-11.427,28.284 -39.84,43.515 -63.409,33.992c-23.57,-9.522 -33.428,-40.216 -22.001,-68.5c11.428,-28.283 39.841,-43.515 63.41,-33.992Z' style='fill:%23fff;'/%3E%3Cpath d='M624.82,423.115c-25.173,3.538 -42.164,30.935 -37.918,61.143c4.245,30.208 28.129,51.86 53.303,48.322c25.173,-3.538 42.164,-30.935 37.918,-61.143c-4.245,-30.207 -28.13,-51.86 -53.303,-48.322Z' style='fill:%23fff;'/%3E%3C/g%3E%3Cpath d='M665.095,2000c29.295,-169.301 62.374,-309.151 92.128,-455.397c40.179,7.009 84.48,8.95 132.828,4.933c48.359,-3.881 91.758,-12.985 130.268,-26.42c57.646,151.452 117.936,294.826 179.339,476.884l-534.563,-0Zm207.523,-663.918c-86.623,7.074 -149.378,100.387 -344.772,65.412c32.005,48.487 77.494,88.416 136.056,114.87c-92.572,-23.864 -200.398,-76.961 -241.933,-125.775c41.412,-4.983 243.422,-98.077 157.205,-171.715c-120.343,-102.784 -69.96,-344.172 -69.96,-344.172c0,0 172.896,111.344 262.579,239.94c16.914,-7.29 56.959,-16.236 81.251,-18.22c24.292,-1.984 65.259,0.345 83.132,4.795c67.628,-141.444 220.166,-279.367 220.166,-279.367c-0,0 88.883,230.014 -13.187,350.963c-73.126,86.652 141.312,145.734 182.984,143.931c-33.064,54.907 -130.845,124.796 -218.319,163.365c53.493,-35.607 91.901,-82.387 115.615,-135.425c-187.13,66.217 -264.195,-15.677 -350.817,-8.602Z' style='fill:%23fff;'/%3E%3Cpath id='Snouter1' serif:id='Snouter' d='M890.051,1549.54c-174.818,14.526 -296.729,-48.847 -362.205,-148.042c195.394,34.975 258.149,-58.338 344.772,-65.412c86.622,-7.075 163.687,74.819 350.817,8.602c-48.513,108.505 -158.526,190.819 -333.384,204.852Z' style='fill:%2326d9b9;'/%3E%3Cpath id='Nose1' serif:id='Nose' d='M875.811,1375.18c25.808,-2.108 47.148,0.919 48.431,16.639c1.284,15.721 -17.97,38.219 -43.778,40.327c-25.808,2.108 -48.458,-16.968 -49.742,-32.689c-1.284,-15.72 19.282,-22.17 45.089,-24.277Z' style='fill:%23fff;'/%3E%3Cpath id='Philtrum1' serif:id='Philtrum' d='M888.507,1429.1l3.045,37.291c0.372,4.546 -3.018,8.538 -7.564,8.91c-4.547,0.371 -8.539,-3.018 -8.911,-7.565l-3.045,-37.29c-0.371,-4.547 3.018,-8.539 7.565,-8.91c4.546,-0.372 8.538,3.018 8.91,7.564Z' style='fill:%23fff;'/%3E%3Cpath d='M716.386,1234.6c14.959,2.726 24.446,19.514 21.174,37.464c-3.272,17.95 -18.073,30.309 -33.031,27.583c-14.959,-2.727 -24.447,-19.514 -21.174,-37.464c3.272,-17.951 18.073,-30.31 33.031,-27.583Z' style='fill:%2326d9b9;'/%3E%3Cpath d='M1010.31,1210.6c-14.318,5.118 -20.956,23.222 -14.815,40.404c6.142,17.181 22.752,26.975 37.07,21.857c14.317,-5.118 20.956,-23.222 14.814,-40.403c-6.141,-17.181 -22.751,-26.976 -37.069,-21.858Z' style='fill:%2326d9b9;'/%3E%3C/g%3E%3C/svg%3E");
  aspect-ratio: 1360 / 2000;
}

@media (max-width: 600px) {
  body {
    flex-direction: column;
  }
  header {
    padding: 1rem;
    height: 20vh;
    background-color: var(--purple);
  }

  h1 {
    font-size: clamp(50px, 10vw, 150px);
  }

  .heroes {
    min-width: 200px;
    height: 80vh;
  }
}