/* 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=Rubik+80s+Fade&family=Rubik+Glitch&family=Rubik:ital,wght@0,300..900;1,300..900&display=swap');
body {
  background-color: #FFE0B8;
  /* custom cursor for everything except hovers */
 cursor: url('https://cur.cursors-4u.net/symbols/sym-5/sym441.cur'), auto;
}

/* custom cursor for hovers (on a and button elements) */
a:hover, 
button:hover {
 cursor: url('https://cur.cursors-4u.net/symbols/sym-5/sym445.cur'), auto;
  }
  

h1 {
   font-family: "Rubik Glitch", system-ui;
  color: #750000;
   font-weight: 400;
   font-style: normal;
    position: relative;
  left: 500px;
  top: 0px;
  width: 500px;
  margin-top: 0;
  padding: 0px;
}

h2 {
   font-family: "Rubik 80s Fade", system-ui;
  color: #750000;
   font-weight: 100;
   font-style: normal;
    position: relative;
  left: 450px;
  top: -20px;
  width: 500px;
  margin-top: 0;
  padding: 10px;
}

p {
   font-family:"Rubik", sans-serif;
  color: #750000;
   font-weight: 500;
   font-style: normal;
   position: relative;
  left: 10px;
  top: 0px;
  width: 500px;
  margin-top: 0;
  padding: 5px;
   
}

li {
  font-family: "Rubik Glitch", system-ui;
  font-weight: 400;
  font-style: normal;
  color: #750000;
    position: relative;
  left: 10px;
  top: 0px;
  width: 500px;
  margin-top: 0;
  padding: 5px;
}

a:link {
  font-family: "Rubik Glitch", system-ui;
  font-weight: 400;
  font-style: normal;
  color: #750000;
  text-decoration: underline dotted;
}

a:visited {
 font-family: "Rubik Glitch", system-ui;
  font-weight: 400;
  font-style: normal;
  color: #750000;
  text-decoration: underline dotted;
}

a:hover {
  font-family:"Rubik 80s Fade", system-ui;
  font-weight: 400;
  font-style: normal;
  color: #750000;
}

.pic {
  position: static;
  bottom: 900px;
}