/* 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." */

body {
  color: blue; /*text color*/
  font-family: Courier;
  margin: 0;
  cursor: url(https://sweezy-cursors.com/wp-content/uploads/cursor/auto-draft/green-onion-hatsune-miku-cursor-32x32.png), default!important /* pore cursor */
}

.christmasGarland{ /* CHRISTMAS GARLAND */
  pointer-events: none;   /* so it isnt in the way of click and scroll etc */
  position: fixed;
  top: 0;
  right: 0;
  filter: hue-rotate(0deg) drop-shadow(0 0 10px white); /* SHINYYYYY */
  }

/*  HEADER MENU BACKGROUND */
header {
  top: 0;
  height: 50px;
  width: 760px;
  margin: auto;
  background-color: rgba(116, 73, 254, 0.85);  /* purple, translucent */
}

li{
  list-style: none;
  }

/* LINKS IN HEADER */
header a{
  color: white; /* link text color */
  text-decoration: none;  /* no underline */
  }
header a:hover{ /* hover effects */
  color: yellow;
}

/* LINKS */
a{
  text-decoration: none;
  font-weight: bold;
  cursor: url(https://sweezy-cursors.com/wp-content/uploads/cursor/the-apothecary-diaries-maomao/the-apothecary-diaries-maomao-cursor-32x32.png), default!important /* leaf click hover cursor */
}
a:hover{ /* hover effects */
  color: yellow;
}
  
.navbar{
  width: 95%;
  margin: auto;
  min-height: 50px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
  
.nav-menu{
  display: flex;
  width: 60%;
}
.nav-menu li{
  text-align: center;
  width: 25%; /* because four things */
}

/* LEFT SIDE OF HEADER */
.bird-branding {
  display: flex;
}
.nav-branding{      /* "magpie.web" in header */
  font-size: 20px;
  align-content: center;
}
.hey-magpie{         /* MAGPIE GIF NEXT TO "magpie.web" in header */
  width: 45px;
}

/* RIGHT SIDE OF HEADER */
.hjem-link, .youtube-link, .gifs-link, .rick-link{
  top: 50px;
}
.hjem-link:hover, .youtube-link:hover, .gifs-link:hover, .rick-link:hover{
  top: 50px;
  letter-spacing: 4px;
}

/* BACKGROUND BEHIND CONTENT WINDOW */
#backgroundYo {
  background: url(https://media4.giphy.com/media/v1.Y2lkPTc5MGI3NjExazF1MHRkYjAxZXY3c2ppNWxxM25oMG80N2t2dm5tNDAzdjMzdGx0cCZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/3ohs4nsg2WyigiHYbu/giphy.gif);
  background-size: 110vw 120vh;       /* sets size to 110 ish % */
  background-position: center center;
  overflow: hidden;                   /* it hides the 10 ish % increase to crop the gif and hide the dark edge */
  background-repeat: no-repeat;
  top: 0;                             /* start from the top of the page */
  bottom: 0;                          /* and goes to the bottom of the page */
  z-index: -1;                        /* puts it 1 level behind other elements (which are 0) */
}

#contentYo{    /* pink background, translucent */
  width: 760px;
  height: 100vh;
  margin: auto;
  padding: 20px;
  background-color: rgba(255, 192, 203, 0.85); /* last bit is OPACITY */
  padding-bottom: 50px;
  overflow: scroll;
}

h1 {
    letter-spacing: 8px;    /* Header: welcome to magpie.web letter spacing */
}

* {
  box-sizing: border-box;
}