:root {
    --color-primary: black;
    --color-secondary: white;
    --color-accent: #F4F1ED;
    --color-pink: #EF5C99;
    --color-yellow: #F7DB6A;
    --color-yellow2: #c79e12; 
    --color-grey: #B2B2B2;

    --background-color: var(--color-accent);

    --font-family-normal: 'Roboto Mono', sans-serif;
    --font-size-normal: 0.75em;
    --font-size-small: 10px;
    --font-weight-normal: 500;
    --letter-spacing-normal: 1px;

    --border-radius-normal: 10px;
    --border-normal: 2px solid var(--color-primary);

    --padding-normal: 5px 12px 5px 12px;

    --form-field-gap: 10px;

    --cell-width-normal: 200px;
    --cell-height-normal: 27px;
  }

  body {
    background-color: var(--background-color);
    font-family: var(--font-family-normal);
    padding-top: 100px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-transform: uppercase;

  }

  a:link, a:visited, a:active{
    color: var(--color-yellow2);
    text-decoration:none;
  }

  a:hover {
    text-decoration:underline;
  }


span.omgwriteme b {
	display: none !important;
}

.footer {
    text-align: center;
    font-weight: var(--font-weight-normal);
    letter-spacing: var(--letter-spacing-normal);
    font-size: var(--font-size-normal);
    margin-top:60px;
}

#notes {
    margin-top:50px;
}

.policy-header {
    padding-bottom:40px;
    padding-top:40px;
    font-size:20px;

}
.privacy-wrapper {
    max-width:900px;
    padding: 0px 40px;
}

  input:focus {
    background-color: var(--color-yellow);
    outline: none;
  }

  #wask-logo {
    width: 130px;
    margin-bottom: 50px;
  }

  #pencil-pals-logo {
    width: 320px;
    margin-bottom: 50px;
  }

  #instructions, #notes {
    margin-bottom: 30px;
    text-align: center;
    font-weight: var(--font-weight-normal);
    letter-spacing: var(--letter-spacing-normal);
    font-size: var(--font-size-normal);
  }

  #notes {
    width: 100%;
    max-height:1000px;

  }

  #input-fields {
    display: flex;
    gap: var(--form-field-gap);
    justify-content: center;
    align-items: center;
    margin-bottom: 80px;
  }

  #input-fields input,
  .cell-input {
    font-family: var(--font-family-normal);
    padding: var(--padding-normal);
    border-radius: var(--border-radius-normal);
    border: var(--border-normal);
    letter-spacing: var(--letter-spacing-normal);
    font-weight: var(--font-weight-normal);
    font-size: var(--font-size-small);
  }

  #input-fields input::placeholder,
  .cell-input::placeholder {
    font-family: var(--font-family-normal);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-normal);
    font-weight: var(--font-weight-normal);
    font-size: var(--font-size-small);
  }

  #pencil-code {
    width: 200px;
  }

  #order-number {
    width: 100px;
  }

  #find-pal {
    cursor: pointer;
    background-color: var(--color-primary);
    border-radius: var(--border-radius-normal);
    padding: var(--padding-normal);
    color: var(--color-secondary);
    transition: 300ms ease-in-out all;
    letter-spacing: var(--letter-spacing-normal);
    font-weight: var(--font-weight-normal);
    font-size: var(--font-size-small);
    border: var(--border-normal);
  }

  #find-pal:hover {
    opacity: 0.75;
  }

  #find-pal:active {
    opacity: 0.5;
  }

  .row {
    display: flex;
    gap: 10px;
    margin-bottom: 10px;
  }

  .row-you {

  }

  .row-your-pal {
    margin-bottom: 30px;
  }

  .cell {
    width: var(--cell-width-normal);
    text-align: center;
    letter-spacing: var(--letter-spacing-normal);
    font-weight: var(--font-weight-normal);
    font-size: var(--font-size-small);
    border: var(--border-normal);
    border-radius: var(--border-radius-normal);
    padding: var(--padding-normal);
    box-sizing: border-box;
    overflow: hidden;
    text-overflow: ellipsis;
    height: var(--cell-height-normal);
    white-space: nowrap;
  }

  .cell-input {
    height: var(--cell-height-normal);
    text-transform: uppercase;
    text-align: center;
    box-sizing: border-box;
    width: var(--cell-width-normal);
    padding: 0px;
    padding-inline: 25px;
  }

  .cell-input-container {
    position: relative;
  }

  .edit-icon, .checkmark-icon {
    position: absolute;
  }

  .edit-icon {
    width: 18px;
    height: 18px;
    right: 5px;
    top: 2px;
  }

  .checkmark-icon {
    width: 18px;
    height: 18px;
    right: 5px;
    top: 3px;
    cursor: pointer;
  }

  .checkmark-icon:hover {
    opacity: 0.75;
  }

  .checkmark-icon:active {
    opacity: 0.5;
  }

  .header {
    border: none;
  }

  .cell input {
    width: 100%;
  }

  .identity-spacer,
  .identity-you,
  .identity-your-pal {
    width: 100px;
  }

  .row-you .cell {

  }

  .cell:not(.header) {
    background-color: var(--color-secondary);
  }

  .row-your-pal .cell:not(.identity-your-pal) {
    border-color: var(--color-grey);
  }

  .identity-you {
    border-color: var(--color-pink);
  }

  .identity-your-pal {
    border-color: var(--color-yellow);
  }

  /* Tooltip Styles */
  .tippy-box[data-theme~='pencilpals'] {
    background-color: var(--color-primary);
    color: var(--color-secondary);
    border-radius: var(--border-radius-normal);
    font-size: var(--font-size-small);
    font-family: var(--font-family-normal);
    font-weight: var(--font-weight-normal);
  }

  .tippy-arrow {
    background-color: var(--color-primary);
  }

  .text-small {
    font-size: var(--font-size-normal);
    font-weight: var(--font-weight-normal);
  }

  #copy-email {
    cursor: pointer;
  }