app.css

/*** LOCAL FONTS **/

@font-face {
  font-family: 'LuckiestGuy';
  src: url('./assets/fonts/LuckiestGuy.eot'); /* IE9 Compat Modes */
  src:
    url('./assets/fonts/LuckiestGuy.eot?#iefix') format('embedded-opentype'),
    /* IE6-IE8 */ url('./assets/fonts/LuckiestGuy.woff2') format('woff2'),
    /* Super Modern Browsers */ url('./assets/fonts/LuckiestGuy.woff') format('woff'),
    /* Pretty Modern Browsers */ url('./assets/fonts/LuckiestGuy.ttf') format('truetype'); /* Safari, Android, iOS */
}

@font-face {
  font-family: 'CourierPrime';
  font-weight: 400;
  src: url('./assets/fonts/CourierPrime-Regular.eot'); /* IE9 Compat Modes */
  src:
    url('./assets/fonts/CourierPrime-Regular.eot?#iefix') format('embedded-opentype'),
    /* IE6-IE8 */ url('./assets/fonts/CourierPrime-Regular.woff2') format('woff2'),
    /* Super Modern Browsers */ url('./assets/fonts/CourierPrime-Regular.woff') format('woff'),
    /* Pretty Modern Browsers */ url('./assets/fonts/CourierPrime-Regular.ttf') format('truetype'); /* Safari, Android, iOS */
}

@font-face {
  font-family: 'CourierPrime';
  font-weight: 800;
  src: url('./assets/fonts/CourierPrime-Bold.eot'); /* IE9 Compat Modes */
  src:
    url('./assets/fonts/CourierPrime-Bold.eot?#iefix') format('embedded-opentype'),
    /* IE6-IE8 */ url('./assets/fonts/CourierPrime-Bold.woff2') format('woff2'),
    /* Super Modern Browsers */ url('./assets/fonts/CourierPrime-Bold.woff') format('woff'),
    /* Pretty Modern Browsers */ url('./assets/fonts/CourierPrime-Bold.ttf') format('truetype'); /* Safari, Android, iOS */
}

:root {
  --primary-color: #ffcd4b;
  --secondary-color: #fb2752;
  --bg-color: #ff7676;
  --text-color: #0802a3;
  --font-default: 'CourierPrime';
  --font-decorative: 'LuckiestGuy';
}

/* Landing Page Styling */

html,
body,
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background-color: var(--bg-color);
}

header,
main {
  max-width: 800px;
  margin: 0 auto;
}

@media (max-width: 840px) {
  header,
  main {
    max-width: 100%;
    padding: 0 5%;
  }
}

h1 {
  display: flex;
  flex-direction: column;
  gap: 0;
  font-family: var(--font-decorative);
  font-size: 8rem;
  font-weight: 400;
  color: var(--primary-color);
  text-align: center;
}

h1 .svelte {
  font-family: var(--font-default);
  font-size: 6rem;
  color: var(--secondary-color);
  text-transform: lowercase;
  transform: translateX(-5rem);
}

h1 .translatePos {
  transform: translateX(2.5rem);
}

h1 .translateNeg {
  transform: translateX(-2.5rem);
}

@media (max-width: 600px) {
  h1 {
    font-size: 4rem;
  }

  h1 .svelte {
    font-size: 3rem;
    transform: translateX(-1rem);
  }

  h1 .translatePos {
    transform: translateX(0.5rem);
  }

  h1 .translateNeg {
    transform: translateX(-0.5rem);
  }
}

h2 {
  font-family: var(--font-default);
  color: var(--text-color);
  text-align: center;
  font-weight: 400;
  font-size: 2rem;
  margin-bottom: 1rem;
}

@media (max-width: 600px) {
  h2 {
    font-size: 1.75rem;
  }
}

p {
  font-family: var(--font-default);
  color: var(--text-color);
  text-align: center;
  font-size: 1.25rem;
  line-height: 1.75rem;
}

main p {
  max-width: 45ch;
}

a {
  font-family: var(--font-default);
  color: var(--primary-color);
  font-weight: 800;
}

a:hover {
  color: var(--secondary-color);
}

a:has(h1) {
  text-decoration: none;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: auto;
}

img[role='presentation'] {
  pointer-events: none;
}

[type='button'] {
  font-family: var(--font-default);
  background-color: var(--primary-color);
  color: var(--secondary-color);
  outline: 2px solid transparent;
  font-size: 1rem;
  outline: 0;
  border: none;
  padding: 1.25rem 3rem;
  margin: 1.5rem auto;
  border-radius: 2.5rem;
  text-align: center;
  cursor: pointer;
}

.mt-0 {
  margin: 0 auto 1.5rem;
}

[type='button']:hover {
  outline: var(--secondary-color) 2px solid;
}

[type='button']:focus {
  outline: var(--secondary-color) 2px solid;
}

[type='button']:active {
  outline: var(--secondary-color) 2px solid;
  background-color: var(--secondary-color);
  color: var(--primary-color);
}

.preview,
.note {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 6rem;
}

.note p {
  margin-bottom: 2rem;
}

.whitespace-nowrap {
  white-space: nowrap;
}

#crossedfingers,
#redheart {
  max-width: 400px;
  height: auto;
}

@media (max-width: 600px) {
  #crossedfingers,
  #redheart {
    max-width: 240px;
    height: auto;
  }
}

#crossedfingers {
  transform: rotate(-5deg);
  margin-top: 6rem;
}

#mainmatter {
  margin-top: 0.5rem;
}

.floating {
  position: absolute;
}

#heartface {
  top: 900px;
  left: 3%;
}

@media (max-width: 860px) {
  #heartface {
    display: none;
  }
}

#yellowheart {
  top: 540px;
  right: 4%;
}

@media (max-width: 980px) {
  #yellowheart {
    display: none;
  }
}

.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* === Basic styling for the demo modal */

.spm-modal {
  /*
    Inset so modals look like modals on mobile.
  */
  padding: 0.5rem;
}

/* === Variation 1: Custom animation which animates the modal in from the bottom and back */

/* this className will be added to the modal when the modal should be animated in */
.from-bottom {
  opacity: 1;
  transform: translate(0, 0);
  animation: var(--spm-animation-modal-in-duration) ease-out var(--spm-animation-modal-in-delay)
    forwards from-bottom-in;
}

/* this className will be added to the modal when the modal should be animated out */
.from-bottom.spm-out {
  opacity: 0;
  transform: translate(0, calc(50vh + 50%));
  animation: var(--spm-animation-modal-out-duration) ease-in var(--spm-animation-modal-out-delay)
    forwards from-bottom-out;
}

/* these keyframes describe the animation  */

@keyframes from-bottom-in {
  0% {
    opacity: 0;
    transform: translate(0, calc(50vh + 50%));
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}

@keyframes from-bottom-out {
  0% {
    opacity: 1;
    transform: translate(0, 0);
  }
  100% {
    opacity: 0;
    transform: translate(0, calc(50vh + 50%));
  }
}

/* === Variation 2: Custom animation which animates the modal in from the top and back */

/* this className will be added to the modal when the modal should be animated in */
.from-top {
  opacity: 1;
  transform: translate(0, 0);
  animation: var(--spm-animation-modal-in-duration) ease-out var(--spm-animation-modal-in-delay)
    forwards from-top-in;
}

/* this className will be added to the modal when the modal should be animated out */
.from-top.spm-out {
  opacity: 0;
  transform: translate(0, calc(-50vh - 50%));
  animation: var(--spm-animation-modal-out-duration) ease-in var(--spm-animation-modal-out-delay)
    forwards from-top-out;
}

@keyframes from-top-in {
  0% {
    opacity: 0;
    transform: translate(0, calc(-50vh - 50%));
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}

@keyframes from-top-out {
  0% {
    opacity: 1;
    transform: translate(0, 0);
  }
  100% {
    opacity: 0;
    transform: translate(0, calc(-50vh - 50%));
  }
}