@font-face {
  font-family: "Kalam";
  src: url(https://math-matics.neocities.org/font/Kalam-Bold.ttf);
    }
    
  @font-face {
  font-family: "Itim";
  src: url(https://math-matics.neocities.org/font/Itim.ttf);
    }
    
  @font-face {
  font-family: "Kode Mono";
  src: url(https://math-matics.neocities.org/font/KodeMono.ttf);
    }
  
  @keyframes music-scroll {
    from {
      transform: translateX(0%);
      }
    to {
      transform: translateX(-50%);
      }
  }

body {
  background-repeat: repeat;
  background-position: center;
  background-attachment: scroll;
  background-size: cover;
  }
  
h1 {
  font-family: "Kalam";
  font-size: 80px;
  }
  
h2 {
  font-family: "Itim";
  font-size: 30px;
  color:navy;
  text-align:center;
  margin-bottom:-10px;
  }
  
h3 {
  font-family: "Itim";
  font-size: 25px;
  color: paleturquoise;
  margin-bottom: -10px;
  }
  
h4 {
  font-family: "Itim";
  font-size: 25px;
  color: navy;
  margin-bottom: -10px;
  }
  
p {
  font-family: "Itim";
  font-size: 20px;
  margin-left: 5px;
  margin-right: 5px;
  padding-bottom: 5px;
  }

.header {
  background-position:center;
  background-size: 1100px;
  background-repeat:no-repeat;
  outline: 5px solid navy;
  border-radius:5px;
  text-align: center;
  color: royalblue;
  margin-top: 20px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 20px;
  height: 130px;
  width: 1100px;
  }
  
.footer {
  text-align:center;
  }
  
.footer>p {
  font-size:17px;
  }
  
.dvcsprite {
    width:10%;
    position:fixed;
    bottom:50px;
    right:0px;
  }
  
.musicplaying {
  position:fixed;
  bottom:-10px;
  right:0px;
  background-color:#28422a;
  border-top:5px double palegreen;
  border-left:5px double palegreen;
  overflow:hidden;
  width:390px;
  }
  
.musicscroll {
  display: flex;
  flex-wrap: nowrap;
  animation: 10s music-scroll linear infinite;
  width:max-content;
  }
  
.musicscroll>p {
  margin-top:10px;
  margin-bottom:10px;
  margin-left:0px;
  color:palegreen;
  }
  
.body {
  margin-left: auto;
  margin-right: auto;
  width: 1200px;
  display: flex;
  position:relative;
  }
  
.sidebarleftcontainer {
  float:left;
  margin-right: auto;
  width: 250px;
  }
  
.sidebarleft {
  background-color: green;
  float: left;
  margin-right: auto;
  width: 250px;
  outline: 5px solid navy;
  border-radius:5px;
  padding-bottom: 5px;
  margin-bottom: 20px;
  }
  
/*.sidebarleft>img:hover {*/
   /*transform: scale(1.05);*/
  /*}*/
  
.main {
  background-color: lightblue;
  margin-left: 20px;
  margin-right: auto;
  width: 100%;
  padding-left: 20px;
  padding-right: 20px;
  outline: 5px solid navy;
  border-radius:5px;
  }
  
.mainhome {
  background-color: lightblue;
  margin-left: auto;
  margin-right: auto;
  width: 620px;
  padding-left: 20px;
  padding-right: 20px;
  outline: 5px solid navy;
  border-radius:5px;
  }
  
.hometext {
  background-color: mediumseagreen;
  margin-left: -10px;
  margin-right: -10px;
  border-radius: 10px;
  }
  
.hometext>p {
    text-align:center;
  }
  
.text {
  background-color: mediumseagreen;
  margin-left: -10px;
  margin-right: -10px;
  border-radius: 10px;
  }  
  
.updates {
  background-color: mediumseagreen;
  border: 5px solid navy;
  margin-left: -10px;
  margin-right: -10px;
  padding-left: 20px;
  padding-right: 20px;
  height: 300px;
  }
  
.updates h2 {
  background-color: royalblue;
  border-bottom: 5px solid navy;
  margin: 0px;
  margin-left: -20px;
  margin-right: -20px;
  padding: 5px 20px;
  }
  
.updatecontainer {
  overflow:auto;
  height:249px;
  margin-right:-20px;
  padding-right:5px;
  margin-left:-10px;
  }

.updateentry {
  border-bottom: 3px dashed midnightblue;
  }  
 
.sidebarrightcontainer {
  float:right;
  margin-left: auto;
  width: 250px;
  }
  
.sidebarright {
  background-color: lightblue;
  float: right;
  margin-left: auto;
  width: 250px;
  margin-bottom: 20px;
  outline: 5px solid navy;
  border-radius:5px;
  }
  
.quicklink {
  display: grid;
  grid-template-columns: 30% 70%;
  column-gap: 5px;
  align-items: center;
  padding: 5px;
  margin-left: 30px;
  }
  
.quicklogo img {
  width: 100%;
  transition: all 0.1s;
  }
  
.quicklogo img:hover {
  transform: scale(1.05, 1.05);
  cursor: pointer;
  }
  
.quicksocial {
  width: 100%;
  text-align: left;
  padding-left: 5px;
  }
  
.quicksocial h3{
  margin-bottom:20px
  }
  
.sidebarmusic{
  text-align: center;
  margin-top: 20px;
  }
  
.sidebartext {
  background-color: mediumseagreen;
  border-radius: 10px;
  margin: 10px;
    }
    
.collapsible {
  display:flex;
  background-color:mediumseagreen;
  cursor: pointer;
  padding: 5px;
  text-align: left;
  border: none;
  outline: none;
  transition: 0.4s;
}

/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
.active, .collapsible:hover {
  background-color:mediumaquamarine;
}

/* Style the accordion panel. Note: hidden by default */
.blogentry {
  padding: 0 18px;
  background-color: mediumaquamarine;
  display: none;
  overflow: hidden;
}

.blogentry img {
  display:flex;
  float:right;
  margin-left:10px;
  }
  
.blinkiecontainer{
  margin-top: -10px;
  margin-bottom: -10px;
  text-align:center;
  }
  
.blinkie {
  width:150px;
  vertical-align: middle;
  }
  
.stampcontainer {
  margin-top: -10px;
  margin-bottom: 20px;
  text-align:center;
  }
  
.stamp {
  width: 100px;
  vertical-align: middle;
  }
  
.buttoncontainer {
  text-align:center
  }
  
.button {
  width: 89px;
  vertical-align: middle;
  }