/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */
@import url('https://fonts.googleapis.com/css2?family=Lobster&display=swap');

body /* self explanatory i think */
{
  background-color: #292842; /* self explanatory */
  color: #bf5a00; /* text color */
  font-family: 'Lobster', cursive; /* self explanatory + cursive/serif/monospace are fallbacks if lobster fails */
  margin: 0; /* space outside the element, pushing other things away. specific sides can be targeted too eg. margin-top */
}

h1 /* heading */
{
  font-size: 10rem; /* self explanatory + rem is relative to the browser's base font size, which is usually 16px by default 1rem = 16px */
}

#gate /* this is what we called the inital screen with the entry buttons */
{
  display: flex; /* telling gate that it is now a flex container, which in my mind is kind of similar to making text a TMP in unity */
  flex-direction: column; /* stacks everything in a certain way column/column-reverse/row/row-reverse */
  align-items: center; /* changes how it behaves horizontally baseline/center/stretch/start/end */
  justify-content: center; /* changes how it behaves vertically center/space-between/start/end/space-around/space-evenly */
  height: 100vh; /* honestly idk keep it at 100 for screen size */
}

button /* all of this affects the look of the button */
{
  background-color: #bf5a00; /* self explanatory */
  color: black; /* text color */
  font-family: 'Lobster', cursive; /* self explanatory + cursive/serif/monospace are fallbacks if lobster fails */
  font-size: 1rem; /* self explanatory + rem is relative to the browser's base font size, which is usually 16px by default 1rem = 16px */
  font-style: normal; /* self explanatory + other values like italic/normal/oblique #deg */
  font-weight: normal; /* other values like bold/normal/numbers that go from thin to black 40 is regular 700 is bold. some fonts only have 1 weight */
  text-decoration: none; /* can be used for line-through/overline/underline */
  padding: 5px 10px; /* space between the edge and the content in it. specific sides can be targeted too eg. padding-left */
  border: none; /* can change the thickness (px), style and color (easy). style is solid/dashed/dotted. can target specific sides eg.border-top */
  border-radius: 100px; /* rounds the corners, higher the number more bevel */
  cursor: pointer; /* none/crosshair/help/wait/progress/text/default/pointer/grab/grabbing/not-allowed/zoom-in out/ */
  letter-spacing: 0.15em; /* higher value changes how far apart the letter are */
}
button:hover /* all of this affects the look of the button when hovering it */
{ 
  background-color: #e06d00; /* self explanatory */
}
button:active /* all of this affects the look of the button when clicking it */
{
  transform: scale(0.97); /* changes how large or small it is */
}