weddingsite/styles/globals.css

html,
body {
  padding: 0;
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
    Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
}

a {
  color: inherit;
  text-decoration: none;
}

* {
  box-sizing: border-box;
}

:root {
  /* Define Colors as colors */
  --red: #990000;
  --coral: #e64c44;
  --blue: #336699;
  --seaFoamBlue: #466b72;
  --purpleBlue: #2E2B5E;
  --white: #fffffe;
  --greyWhite: #E6E3E0;
  --grey: #efefef;
  --yellow: #ffc600;
  --light: #ffffff;
  --black: #1B2D45;
  --dark: #000000;
  --seaGreen: #83C6A4;
  --lighterDark: #131415;
  --shellYellow: #ffc850;
  --lightGrey: #C5C5C5;
  --lightGray: var(--lightGrey);
  --lightShade: #f8f7f5;
  --darkGrey: #272727;
  --coralTan: #ffddb7;
  --blueGreen: #1d384e;
  --lightViolet: #C298F7;
  --darkerViolet: #7551a9;

  /* Define Colors intentions */
  --primary: var(--coralTan);
  --secondary: var(--coralTan);
  --danger: var(--grey);
  --background: var(--seaFoamBlue);
  --textColor: var(--black);
  --buttonTextColor: var(--black);
  --textAccent: var(--purpleBlue);
  --lineColor: var(--grey);
  --cardBg: var(--darkGrey);
  --headerBackground: var(--darkGrey);
  --footerBackground: var(--darkGrey);
  --linkHover: var(--lightViolet);
  --lightHairLine: var(--lightGrey);

  /* Modal */
  --modalBackground: var(--background);

  /* Styles */
  --line: solid 1px var(--lineColor);

  /* Type */
  --headingFont: 'Istok Web';
  --bodyFont: 'Kanit';
  --baseFontSize: 100%;
  --h1: 4.209rem;
  --h2: 3.157rem;
  --h3: 2.369rem;
  --h4: 1.777rem;
  --h5: 1.333em;
  --h6: 1rem;
  --bodyTextSize: 1.777rem;
  --smallText: 1.333rem;
  --lineHeight: 1.75;

  /* Elevation */
  --level-0: none;
  --level-1: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
  --level-2: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
    0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --level-3: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
    0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --level-4: 0 20px 25px -5px rgba(0, 0, 0, 0.1),
    0 10px 10px -5px rgba(0, 0, 0, 0.04);
  --level-1-primary: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0  rgba(0, 0, 0, 0.06);
  --level-2-primary: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
    0 2px 4px -1px #C298F7;
  --level-3-primary: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
    0 4px 6px -2px #C298F7;
  --level-4-primary: 0 20px 25px -5px rgba(0, 0, 0, 0.1),
    0 10px 10px -5px #C298F7;

  /* Positioning */
  --containerPadding: 2.5%;
  --headerHeight: 8rem;
  --borderRadius: 10px;
  --maxWidth: 850px;
}

html {
  width: 100%;
  background-color: var(--seaFoamBlue);
  font-size: 62.5%;
  box-sizing: border-box;
}

*, *::before, *::after {
  box-sizing: inherit;
}

body {
  line-height: var(--lineHeight);
  color: var(--primary);
  padding: 0;
  margin: 0;
  font-size: var(--bodyTextSize);
}

body::-webkit-scrollbar {
  width: 12px;
}
html {
  scrollbar-width: thin;
  scrollbar-color: var(--primary) var(--background);
}
body::-webkit-scrollbar-track {
  background: var(--background);
}
body::-webkit-scrollbar-thumb {
  background-color: var(--primary) ;
  border-radius: 6px;
  border: 3px solid var(--background);
}

::selection {
  background: var(--primary);
  color: var(--background);
}

a.button,
button {
  background: var(--lightViolet);
  color: var(--black);
  border: 0;
  padding: 1rem 1.5rem;
  border-radius: 4px;
  cursor: pointer;
  --cast: 2px;
  box-shadow: var(--level-1-primary);
  text-shadow: 0.5px 0.5px 0 rgba(0,0,0,0.2);
  transition: all 0.2s;
  text-decoration: none;

  &:hover {
    /* --cast: 4px; */
    box-shadow: var(--level-2-primary)
  }
  &:active {
    /* --cast: 2px; */
    box-shadow: var(--level-0)
  }
}

a.button.ghost,
button.ghost {
  background: none;
  color: var(--lightViolet);
  border: 1px solid var(--lightViolet);

  &:disabled {
    color: hsla(266, 86%, 78%, 0.53);
    border: 1px solid hsla(266, 86%, 78%, 0.53);
  }
}

a {
  text-decoration: none;
  color: var(--primary);
}

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

input,textarea {
  font-size: 2rem;
  padding: 0.4rem;
  border-radius: 4px;
  border: 1px solid var(--primary);
  background: inherit;
  color: var(--primary);
}

textarea {
  resize: vertical;
}

hr {
  border: 0;
  height: 1px;
}

nav {
  a::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 0.3rem;
    bottom: -0.4rem;
    left: 0px;
    background: var(--secondary);
    transition: transform 0.3s ease 0s;
    transition-timing-function: cubic-bezier(1, -0.65, 0, 2.31);
    transform: scale(0);
  }

  @media (max-width: 650px) {
    a {
      margin-bottom: 2rem;
    }
  }

  a {
    position: relative;
    font-size: 2rem;
    text-decoration: none;
    margin: 0.4rem 0;

    &[aria-current='page'],
    &.current-parent {
      &:after {
        transform: scale(1);
      }
    }

    &:hover {
      color: var(--secondary);
      &:after {
        transform: scale(1);
      }
    }
  }
}

img {
  max-width: 100%;
}

img,
figure {
  border-radius: 4px;
  box-shadow: var(--level-2);
}

.emoji:hover {
  cursor: pointer;
}

.card {
  padding: 1.5rem;
  background: var(--cardBg);
  box-shadow: var(--level-3);
  border-radius: var(--borderRadius);
}

/* First item will never have margin top */
.card > *:first-child {
  margin-top: 0;
}

/* Last item will never have margin bottom */
.card > *:last-child {
  margin-bottom: 0;
}

.modal {
  position: fixed;
  display: flex;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  align-items: center;
  justify-content: center;
}

.toast {
  color: white;
  background: var(--black);
  border-radius: var(--borderRadius);
  padding: 20px;
  box-shadow: var(--level-2);
  position: fixed;
  bottom: 10px;
  left: 10px;
  right: 10px;
}

.toast p {
  text-align: center;
  margin: 0;
  max-width: 100%;
}

.sr-only {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

main {
  max-width: var(--maxWidth);
  margin: 0 auto;
  padding: 2rem;

  p {
    margin: 0 auto;
  }
}