/* === Font Imports === */
/* ===== System Level ===== */
@font-face { font-family: 'undertale'; src: url("/assets/fonts/undertale/determination.ttf") format("truetype"); }
@font-face { font-family: 'deltarune'; src: url("/assets/fonts/deltarune/deltarune.ttf") format("truetype"); }
@font-face { font-family: 'newsletter'; src: url("/assets/fonts/deltarune/newsletter-font.ttf") format("truetype"); }
@font-face { font-family: 'mercybuttons'; src: url("/assets/fonts/undertale/mercy.ttf") format("truetype"); }

/* ===== Character Fonts ===== */
@font-face { font-family: 'sans'; src: url("/assets/fonts/undertale/pixel-sans.ttf") format("truetype"); }
@font-face { font-family: 'papyrus'; src: url("/assets/fonts/undertale/pixel-papyrus.ttf") format("truetype"); }
@font-face { font-family: 'wingding'; src: url("/assets/fonts/undertale/pixel-wingdings.ttf") format("truetype"); }

/* ===== Variables ===== */
:root {
  --bfriend: #D635D9; /* Bfriend's SOUL color. */
  --gfriend: red; /* Gfriend's SOUL color. */
  --pico: #FF952E; /* Pico's SOUL color. */
}

/* ===== The Universal Selector ===== */
* {
  cursor: url(/assets/images/cursors/bfriend-cursor.png), auto;
}

a {
  cursor: url(/assets/images/cursors/bfriend-cursor-hover.png), auto;
  text-decoration: none; color: yellow; /* HARLEY: This just makes the links look like the Undertale selection menus */
}


/* ===== Selectors ===== */
body {
  background-color: black;
  overflow-x: hidden;
}

h1 {
  /* 
      == HARLEY ==
    The following are the default values for text-based selectors.
    These will be changed later using things such as:
      * Classes,
      * IDs,
      * And, very, very rarely, inline styles.
  */
  color: white;
  font-family: 'undertale', Helvetica, Arial, sans-serif;
  font-size: 2rem;
  font-weight: normal;                    /* HARLEY: Exclusive to headers. Keeps it from bolding. */
  margin-left: auto; margin-right: auto;  /* HARLEY: Centers the text on the page. */
  text-align: center;
}

h2 {
  color: white;
  font-family: 'undertale', Helvetica, Arial, sans-serif;
  font-size: 1.5rem;
  font-weight: normal;
  margin-left: auto; margin-right: auto;
  text-align: center;
}

h3 {
  color: white;
  font-family: 'deltarune', Helvetica, Arial, sans-serif;
  font-size: 1.967rem; /* HARLEY: haha 67 67 */
  font-weight: normal;
  margin-left: auto; margin-right: auto;
  text-align: center;
}

p {
  color: white;
  font-family: 'newsletter', Helvetica, Arial, sans-serif;
  font-size: 1.67rem;
  font-weight: normal;
  margin-left: auto; margin-right: auto;
  
  /*
    == HARLEY ==
  Changes unique to the p selector for the sake
  of the newsletter and general readability.
  */
  text-align: left;
  max-width: 50ch;
}

/* ===== CLASSES ===== */
                          /*
                            == HARLEY ==
                          These are the most reliable for
                          changing default styles on the fly
                          while writing the HTML file.
                          */
.bfriend {
  color: var(--bfriend);
}

.gfriend {
  color: var(--gfriend);
}

.section-headers {
  padding-top: 0.4rem;
  margin-bottom: -1.8rem;
}

.pico-img {
  image-rendering: pixelated;
  
  width: 20%;
  height: auto;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
  
/* ===== IDs ===== */
                        /*
                          == HARLEY ==
                        This is a secondary option for
                        changing default styles on the fly
                        primarily for single-instance elements
                          (ex. an animated GIF of characters walking
                            that you want to move across the screen)
                        */
#alert {
  color: var(--gfriend);
}

#sitebottom {
  padding-bottom: 8rem;
}

#logo {
  display: block;
  max-width: 100%;
  height: auto;
  margin-left: auto; margin-right: auto;
}

/* ===== RESPONSIVENESS 'N SHIT ===== */
@media screen and (max-width: 480px) { /* Use this for mobile responsiveness, particularly phone screens. */
  p {
    font-size: 1.2rem;
  }

  .section-headers {
    padding-bottom: 0.6rem;
  }
  
  #logo {
    width: 80%;
  }
}