body {
    background-image: url("background2.gif");
    background-repeat: repeat;
    background-size: 100px 100px;
    font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-weight: 300;
}

header {
    align-items: center;
    text-align: center;
}

button {
  background-color: red;
  padding: 20px;
  border: none;
  margin-left: 50px;
  margin-right: 50px;
  color: white;
  border-radius: 15px;
}

button:hover {
    background-color: blue;
}


.container {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    grid-template-rows: repeat(12, 1fr);
}

.music, .video, .joke, .blog, .art, .game{
    border: 5px solid #FFEE00;
    border-radius: 15px;
    padding: 15px;
    margin: 20px;
    text-align: center;
}

.music:hover, .video:hover, .joke:hover, .blog:hover, .art:hover, .game:hover {
    margin: 0;
    transition: 0.25s;
    border: 20px solid #FFAA00;
}

.el1 {
    background-image: url("elementgreen.gif");
    background-color: turquoise;
    grid-column: 1 / 4;
}

.el2 {
    background-image: url("elementorange.gif");
    background-repeat: repeat;
    background-color: purple;
    grid-column: 4 / 6;
    grid-row: 1 / 3;
}

.el3 {
    background-image: url("elementred.gif");
    background-color: red;
    grid-column: 1 / 3;
    grid-row: 2 / 6;
}

.el4 {
    background-image: url("elementpale.gif");
    background-color: magenta;
    grid-column: 3 / 6;
    grid-row: 3 / 7;
}

.el5 {
    background-image: url("elementblue.gif");
    background-color: orangered;
    grid-column: 3 / 4;
}

.el6 {
    background-image: url("elementpurple.gif");
    background-color: turquoise;
    grid-column: 1 / 3;
    grid-row: 6/8;
}

.el7 {
    background-image: url("elementorange.gif");
     background-color: purple;
    grid-column: 3/ 6;
    grid-row: 7/10;
}

.el8 {
    background-image: url("elementred.gif");
    background-color: red;
    grid-column: 1 / 2;
    grid-row: 8/10;
}

.el9 {
    background-image: url("elementpale.gif");
    background-color: magenta;
    grid-column: 2 / 3;
    grid-row: 8/10;
}

.el10 {
    background-image: url("elementblue.gif");
    background-color: magenta;
    grid-column: 1 / 6;
    grid-row: 10/11;
}

.music {
  background-image: url("elementblue.gif");
    grid-column: 6 / 9;
    grid-row: 2/4;
}

.video {
  background-image: url("elementred.gif");
    grid-column: 1 / 5;
    grid-row: 4/8;
}

.blog {
  background-image: url("elementred.gif");
    grid-column: 1 / 6;
    grid-row: 1/4;
}

.joke {
    background-image: url("elementorange.gif");
    grid-column: 6 / 9;
    grid-row: 1/2;
}

.art {
  background-image: url("elementpale.gif");
    grid-column: 5 / 9;
    grid-row: 4/8;
}

.game {
  background-image: url("elementgreen.gif");
    grid-column: 1 / 9;
    grid-row: 8/12;
}

.background-canvas {
  position: fixed;
  top: 0;
  left: 0;
  z-index: -1;
  pointer-events: none;
}

/*music player css*/
#musicplayer{
    font-family:'Arial'; /* default font */
    background:white; /* background color of player */
    border:4px solid orange; /* border around player */
    width:100%; /* width of the player - make it 100% if you want it to fill your container */
    height: 75%;
    text-align:center; 
    display:flex;
    border-radius: 15px;
    flex-direction:column;
    align-items: center;
}

.songtitle, .track-info, .now-playing{
    padding:5px;
}

.controls{
    display:flex; 
    flex-direction:column; 
    gap:10px;
}

.buttons{
    display:flex;
    justify-content:center;
    font-size:17px !important; /* size of controls */
    width:100%;
}

.buttons div{
    width:33.3%;
}

.playpause-track, .prev-track, .next-track{
    color:orange; /* color of buttons */
    font-size:35px !important; /* size of buttons */
}

.volume-icon{
    font-size:22px !important; /* size of volume icon */
}

.seeking, .volume{
    display:flex;
    flex-direction:row;
    align-items:center;
    gap:5px;
}

.now-playing, .track-info{
    background-color:#c9eff2; /* background color of top two boxes */
}

.now-playing{
    font-weight:bold;
}

input[type=range]{
    -webkit-appearance: none; /* removes default appearance of the tracks */
    width:100%;
}

input[type=range]:focus{
    outline:none; /* removes outline around tracks when focusing */
}

input[type=range]::-webkit-slider-runnable-track{
    width:100%;
    height:4px; /* thickness of seeking track */
    background:orange; /* color of seeking track */
}

input[type=range]::-webkit-slider-thumb{
    height:10px; /* height of seeking square */
    width:10px; /* width of seeking square */
    border-radius:0px; /* change to 5px if you want a circle seeker */
    background:orange; /* color of seeker square */
    -webkit-appearance:none;
    margin-top:-3px; /* fixes the weird margin around the seeker square in chrome */
}

input[type=range]::-moz-range-track{
    width:100%;
    height:4px; /* thickness of seeking track */
    background:orange; /* color of seeking track */
}

input[type=range]::-moz-range-thumb{
    height:10px; /* height of seeking square */
    width:10px; /* width of seeking square */
    border-radius:0px; /* change to 5px if you want a circle seeker */
    background:orange; /* color of seeker square */
    border:none; /* removes weird border around seeker square in firefox */
}

#game-canvas {
  width: 100%;
  height: 250px;
  position: relative;
}

#game-canvas canvas {
  display: block;
}