body {
  background-image: url("https://r3qu13m.neocities.org/images/background.jpg");
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
  font-family: 'Segoe UI', sans-serif;
  text-align: left;
  text-wrap: normal;
  cursor: url("https://r3qu13m.neocities.org/index/cursor.png"), auto;
}

a:hover {
  cursor: url("https://r3qu13m.neocities.org/index/cursor.png"), auto;

}

.auto {
  cursor: url("https://r3qu13m.neocities.org/index/cursor.png"), auto;

}

/* main container */
.container {
  display: flex;
  gap: 20px;
  flex-flow: row wrap;
  align-content: start;
  align-items: stretch;
  justify-content: space-between;
  margin: 75px 150px;
}

.item:nth-child(1),
.item:nth-child(8) {
  width: 100%;
  height: auto;
}

.item:nth-child(2),
.item:nth-child(4),
.item:nth-child(6) {
  width: 30%;
  height: auto;
}

.item:nth-child(3),
.item:nth-child(5),
.item:nth-child(7) {
  width: 60%;
  height: auto;
  flex-grow: 1;
}

/* main container end */

/* fonts and styles */
p {
  font-size: medium;
  margin: 10px;
}

h1 {
  font-weight: normal;
  font-size: x-large;
  text-align: center;

}

h2 {
  font-weight: bold;
  font-size: large;
}

h3 {
  font-weight: normal;
  margin-left: 10px;
  text-decoration: underline;
}

h4 {
  font-size: larger;
  font-weight: normal;
  padding-bottom: 20px;
}

/* fonts and styles end */

a:visited {
  color: purple;
}

/* navigation content */
.navigation {
  display: flex;
  padding: 0;
  margin: 0;
  list-style-type: none;
  justify-content: space-evenly;
}

.nav {
  max-width: 250px;
}

.navbutton img {
  height: 45px;
}

/* navigation content end */

.news {
  overflow: auto;
  height: 116px;
}

.credits {
  text-align: center;
  justify-content: center;
  align-content: center;
  height: 116px;
}

.paint {
  height: 500px;
}

.buttons {
  display: flex;
  flex-wrap: wrap;
  padding: 0;
  list-style-type: none;
  justify-content: space-evenly;
  overflow: auto;
}

.currently {
  margin: auto;
}

.changelog {
  width: 30%;
}

.sitemap {
  width: 60%;
}

footer {
    text-align: center;
    margin: 40px auto 0;
}

/* status cafe widget  */


/* status cafe widget end */

/* mp3 player */
#musicplayer {
  font-family: 'Arial';
  /* default font */
  background: transparent;
  /* background color of player */
  border: transparent;
  /* border around player */
  width: 90%;
  /* width of the player - make it 100% if you want it to fill your container */
  padding: 10px;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin:auto;
}

.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: #0689e4;
  /* 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: #e74492;
  /* 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: #e74492;
  /* 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: #e74492;
  /* 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: #e74492;
  /* color of seeker square */
  border: none;
  /* removes weird border around seeker square in firefox */
}

/* mp3 player end */

/* solitaire embed */
@media (max-width: 800px) {
  #solitaire_embed>div {
    padding-bottom: 90% !important;
    /* Change aspect ratio on mobile */
  }
}

@media (max-width: 568px) {
  #solitaire_embed>div {
    padding-bottom: 100% !important;
    /* Change aspect ratio on mobile */
  }
}

@media (max-width: 414px) {
  #solitaire_embed>div {
    padding-bottom: 120% !important;
    /* Change aspect ratio on mobile */
  }
}

/* solitaire embed end */