/* 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=Doto&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Geo&display=swap');

* {
  box-sizing: border-box;
  }

h1, h2, h3 {
  font-family: 'Doto'
}

p, li {
  font-family: 'Geo';
  }

body {
  background-image: url('/images/lightbluebg.jpg');
  background-size: cover;
  padding: 4% 0%;
  margin-left: auto;
  margin-right: auto;
  width: 1000px;
  height: 850px;
  }


/* applying a border to all boxes */

.to-do-list, .songofthemonth {
  border: 13px solid transparent;
  border-image: url('/images/regularbrdr.png') 7 round;
  }

/*  LEFT SIDE BLOCK */

.nav {
  width: 250px;
  display: block;
  position: absolute;
}

/* miss miku herself */

.nav-top img {
  margin-left: auto;
  margin-right: auto;
  width: 250px;
  position: relative;
  transform: scale(1.5);
  translate: 0% 10%;
  z-index: -1;
}

/*  buttons to get around */

.nav-buttons {
  padding: 0px 10px;
  }

.nav-options {
  margin: auto;
  }

.nav-options a {
  font-family: 'Doto';
  font-weight: 900;
  color: black;
  text-decoration-line: none;
}

.nav-options li {
  list-style-image: none;
  list-style-type: none;
  padding-left: 8px;
}

.resourcebutton, .guestbookbutton, .creditsbutton, .faqbutton {
  margin: 10px;
  padding: 5px;
  background: linear-gradient(to bottom,  #e3f7f9 0%,#8aeffc 26%,#48dbf2 31%,#ccf8f9 100%);
  border: 1px solid darkcyan;
  border-bottom-width: 3px;
  border-radius: 5px;
}

/* Makes the sparkles appear on hover next to nav options*/

.sparkle {
  display: none;
}

.nav-options li:hover {
  .sparkle {
    display: inline-block;
  }
}

/*  bottom of the nav */

.to-do-list {
  background-image: url('/images/bubblesnstars.png');
  margin: auto;
  width: 200px;
  height: 265px;
  }

/*  header section */
.header {
  display: grid;
  grid-template-columns: 750px;
  grid-template-rows: 100px 10px;
  position: relative;
  left: 250px;
}

.logo img {
  display: block;
  margin-left: auto; 
  height: 120px;
}

.headertext p {
  text-align: right;
  font-family: 'Doto';
  font-size: 16px;
  font-weight: 900;
  background-color: white;
  border-top: 3px solid #009ab2;
  border-bottom: 3px solid #009ab2;
  padding-right: 10px;
  letter-spacing: 3px;
}

/* blog section */
.blog {
  width: 500px;
  height: 300px;
  display: block;
  position: relative;
  left: 250px;
  top: 50px;
  padding-right: 15px;
  overflow-y: scroll;
  
  background-color: white;
  background-image: url('/images/glitter2.png');
  background-size: 25%;
  
  border: 35px solid transparent;
  border-image: url('/images/browserwindowbrdr.png') 27 round;
}

.blog-content h3{
  font-size: 16px;
  }

/* song of the month section */

.songofthemonth {
  width: 205px;
  height: 220px;
  display: block;
  position: relative;
  left: 250px;
  top: 60px;
  overflow: hidden;
  background: white;
  }
  
.songofthemonth h2{
  margin: 5px 0px 10px;
  font-size: 16px;
  }

.songofthemonth p{
  margin: 0px;
  padding-bottom: 10px;
  }

/*  digicam piclog */
.piclogbox {
  background-image: url('images/bg1.jpg'); 
  background-size: 100%;
  height: 145px;
}

.piclogframe {
  width: 205px;
  display: block;
  position: relative;
  left: 475px;
  top: -90px;
  }

.piclogframe::before{
  content: url('/images/digicam.png');
  z-index: 2;
  position: absolute;
  transform: scale(0.4);
  transform-origin: -3% -5%;
  }

.piclogbox h2{
  display: none;
  }
  
.piclogbox img{
  display: block;
  margin: auto;
  width: 150px;
  }
  
  
/*  scrolling marquee underneath digicam */
.actual-unit {
  width: 280px;
  height: 48px;
  overflow: hidden;
  display: block;
  position: relative;
  left: 470px;
  top: -305px;
  background-color: #0099b1;
  border-top: 4px solid #0099b1;
  border-bottom: 4px solid #0099b1;
}

.scroll-parent {
  position: relative;
  width: inherit;
  height: 40px;
  overflow: hidden;
  border-top: 4px solid white;
  border-bottom: 4px solid white;
}

.scroll-element {
  width: inherit;
  height: inherit;
  position: absolute;
  left: 0%;
  top: 0%;
  animation: primary 5s linear infinite;
  white-space: nowrap;
}

.scroll-element p{
  font-family: 'Doto';
  font-size: 20px;
  font-weight: 900;
  margin: 5px 0px;
  color: white;
  }

@keyframes primary {
  from {
    left: 0%;
  }
  to {
    left: -100%;
  }
}

@keyframes secondary {
  from {
    left: 100%;
  }
  to {
    left: 0%;
  }
}

.primary {
  animation: primary 5s linear infinite;
}

.secondary {
  animation: secondary 5s linear infinite;
}

/*  status.cafe box */

.statusframe {
  width: 100px;
  display: block;
  position: relative;
  left: 790px;
  top: -645px;
  }

.statusframe::before{
  content: url('/images/phone.png');
  z-index: 2;
  position: absolute;
  transform: scale(0.4);
  transform-origin: -6% -9%;
  }

.statusbox {
  height: 130px;
  background-color: white;
  }
  
.statusbox h2{
  background-color: #009ab2;
  font-size: 18px;
  text-align: center;
  padding: 2px 0px;
  color: white;
  font-weight: 900;
  margin-bottom: 0px;
  }  
  
.statusbox p{
  margin: 0px;
  padding: 5px;
  }
  
  
/*  song box */

.stamp-book-cover {
  width: 200px;
  display: block;
  position: relative;
  left: 775px;
  top: -545px;
  background-image: url('/images/notebookpaper.jpg');
  border: 2px outset lightgray;
  }
  
.stamp-book-content {
  height: 275px;
  width: 200px;
  padding: 18px 0px 18px 50px;
  }

.stamp-book-cover::before {
  content: url('/images/notebookrings.png');
  z-index: 2;
  position: absolute;
  transform: scale(1.2);
  transform-origin: 250% -40%;
  }

.stamp-book-content h2{
  display:none;
  }