@font-face {
  font-family: "gallant";
  src: local("solaris_gallant12x22"),
       url("/fonts/solaris_gallant12x22.ttf") format("truetype");
}

/**/
/**************UHHH YEAH**************/
body {
  background-color: purple;
  color: pink;
  font-family: "gallant", sans-serif;
  
}

body a {
  text-decoration: underline;
  color: purple;
  font-family: "gallant", sans-serif;
  
}

nav {
  display: flex;
  gap: 20px;
  padding: 10px;
/*  justify-content: flex-end; */
}

nav a {
  text-decoration: none;
  color: pink;
  font-family: "gallant", sans-serif;
  
}

nav a:hover {
  font-style: italic;
  text-decoration: underline wavy;
  color: purple;
  
}

.current {
  text-decoration: none;
  color: purple;
  }

/**************CONTAINER CLASSES**************/
.container { /*Regular container*/
  background-color: gray;
  max-width: 1000px;
  margin: 0 auto;
  /*border: 1px solid pink; <--To double check boundaries*/
  /*padding*/
  text-align: center;
  
}

.blank { /*Padding*/
padding: 20px
}

.txtent { /*For text entries eg. blog entries and devlog*/
  background-color: black;
  max-width: 480px;
  margin: 0 auto;
  border: 1px solid pink; 
  padding: 20px;
  text-align: justify;
  
}

.imgent { /*For image entries eg. gallery*/
  background-color: black;
  max-width: 480px;
  margin: 0 auto;
  border: 1px solid pink; 
  padding: 20px;
  text-align: right;
  
}

.asciient { /*For ascii art in blog entries*/
  max-width: 500px;
  margin: 0 auto;
  /*border: 1px solid pink; */
  padding: 10px 10px;
  text-align: center;

}

.dateent { /*For dates right-aligned elements in blog entries*/
  background-color: black;
  max-width: 500px;
  margin: 0 auto;
  /*border: 1px solid pink; */
  padding: 10px;
  text-align: right;

}
/**************.**************/

/**************ELEMENTS**************/
.defaultimg {/*For pictures in gral*/
  background-color: black;
  width: 300px;
  /*margin*/
  border: 1px solid pink;
  padding: 10px;
  height: auto;
  
}

.galleryimg {/*For gallery exclusively*/
  width: 100%;
  height: auto;
  display: block; /*So the image is treated like a paragraph and not like an inline element*/
}
/**************.**************/



/* AUDIO PLAYER
.player {
  padding: 4px 10px;
  border: 1px solid pink;
  margin-bottom: 10px;
  font-family: "gallant", sans-serif;
  display: flex;
  align-items: center;
}

.controls {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
}

.player button {
  color: pink;
  background-color: black;
  border: 1px solid pink;
  font-size: 10px;
  width: 20px;
  height: 20px;
  padding: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "gallant", sans-serif;
}

.player button:hover {
  background-color: pink;
  color: black;
}

input[type="range"] {
  accent-color: pink;
  height: 2px;
  flex-grow: 1;
}
*/