/* fonts */

@font-face { 
	font-family: "Bebas Neue"; 
	src: url("./fonts/BebasNeueRegular.woff2") format("woff2"), 
		url("./fonts/BebasNeueRegular.woff") format("woff"), 
		url("./fonts/BebasNeueRegular.ttf") format("truetype"); 
	font-weight: normal;
	font-style: normal; 
	font-display: swap; 
} /* Bebas Regular */


@font-face { 
	font-family: "Fantasque"; 
	src: url("./fonts/FantasqueSansMono-Regular.woff2") format("woff2"), 
		url("./fonts/FantasqueSansMono-Regular.woff") format("woff"), 
		url("./fonts/FantasqueSansMono-Regular.ttf") format("truetype"); 
	font-weight: normal;
	font-style: normal; 
	font-display: swap; 
} /*Fantasque*/

@font-face { 
	font-family: "AirlashRaiders"; 
	src: url("./fonts/AirlashRaiders.woff2") format("woff2"), 
		url("./fonts/AirlashRaiders.woff") format("woff"), 
		url("./fonts/AirlashRaiders.ttf") format("truetype"); 
	font-weight: normal;
	font-style: normal; 
	font-display: swap; 
} /*AirlashRaiders*/

@font-face { 
	font-family: "Unispace"; 
	src: url("./fonts/Unispace-Regular.woff2") format("woff2"), 
		url("./fonts/Unispace-Regular.woff") format("woff"), 
		url("./fonts/Unispace-Regular.ttf") format("truetype"); 
	font-weight: normal;
	font-style: normal; 
	font-display: swap; 
  } /*Unispace*/


/* main styles */

* {
  scrollbar-width: none;
  -ms-overflow-style: none;

  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-size: 18px;
  line-height: 1.4;
  color: #fff;
  font-family: "Fantasque", Courier, monospace /* Default font */
}

html  {
  background-image: url(https://midbooze.neocities.org/resources/images/monaxia_bkg.jpg);
  background-attachment: fixed;
  background-position: center center;
  background-size: cover; 
}

body img  {
  pointer-events: none;
}

:root {
--box-bg: #000000;
--box-border: 2px solid #61929c; /* cool orange #e68224, Bandcamp color #61929c */
--box-border-radius: 10px;
--header-button: #252525; /* Bandcamp darker col #28373a*/
--header-button-hover: #40575c;

--text-color-default: #fff;
--text-header_1: "Bebas Neue", arial, helvetica, sans-serif;
--text-header_2: "AirlashRaiders", arial, sans-serif;
--text-header_3: "Unispace", arial, sans-serif;
--text-shadow: 2px 2px #61929c;
--text-accent: #c8eff7;
--text-hover: #61929c;
--text-shadow-blur: 0 0 5px #e7e7e7;
}

p { 
  text-indent: 20px;
  padding-block: 0.3em;
}

a {
  color: var(--text-accent);
  -o-transition:.15s;
  -ms-transition:.15s;
  -moz-transition:.15s;
  -webkit-transition:.15s;
  transition:.15s;
  }
a:hover { color: var(--text-hover)}
a:link  {text-decoration: none}
a:visited {text-decoration: none}
a:hover {text-decoration: none}
a:active {text-decoration: none}


#accent {
  color: var(--text-accent)
}


.container  {
  max-width: 1000px;
  margin: auto;
  display: flex;
  flex-direction: column;
  position: relative;
}

marquee {
  display: flex;
}

footer {
  text-align: center;
  font-size: 12px;
  padding: 15px;
}

details {
  background-color: #0f0f0f;
  padding: 0.3rem 0.7rem;
  border: solid 2px #1b1b1b;
  border-radius: .50em;
}

details * {
  margin: 0;
} 

details > p {
  padding-block: 0.2em;
}

summary {
  font-family: var(--text-header_2);
  padding: 5px;
  padding-block: 0.1em;
  margin-inline-start: 1.3em;
  list-style-position: outside;
}

summary::marker {
  color: var(--text-hover)
}

/* header, columns, etc. */

header  {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: auto;
  margin: 10px 20px 5px 20px;

  border: var(--box-border);
  border-radius: var(--box-border-radius);
  background: url(https://midbooze.neocities.org/resources/images/headerFooterBkgTest_bw.jpg);
  box-shadow: inset 0 0 125px #000000;
  padding: 10px
}

header nav  {
  display: flex;
  flex-direction: row;
}

header nav a  {
  color: var(--text-color-default);
  font-weight: 600;
  background-color: var(--header-button);
  border-radius: 5px;
  padding: 5px 10px;
  margin: 5px;
  box-shadow: 2px 2px 0 #000;
  text-align: center;
}

header nav a:hover  {
  background-color: var(--header-button-hover);
  padding: 5px 12px;
}

h1, h2, h3  {
  font-family: var(--text-header_2);
  text-align: center;
}

h1  {
  text-shadow: 0 0 5px #fdfdfd;
  font-size: 50px;
  letter-spacing: 1px;
  animation: shadow-text-anim 2s ease-in-out infinite;
}

h2  {
  font-size: 35px;
} 

h3  {
  text-align: center;
  font-size: 20px;
  text-shadow: 2px 2px  #000;
  letter-spacing: 1px;
}

@keyframes shadow-text-anim {
  0%  {
    text-shadow: 0 0 5px #fdfdfd;
  }
  50% {
    text-shadow: 0 0 8px #fdfdfd;
  }
  1000% {
    text-shadow: 0 0 15px #ffffff;
  }
}

ul li {
  list-style: none;
}

.content  {
  display: flex;
  flex-direction: row;
  gap: 10px;
  margin: 5px 20px;
  justify-content: center;
}

.columnMain {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 700px;
}

.columnSide {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 350px;
}

.columnSide img {
  max-width: 100%;
}

.columnHeader {
  display: flex;
  flex-wrap: nowrap;
  flex-direction: column;
  justify-content: center;
  border: var(--box-border);
  border-radius: var(--box-border-radius);
  background-color: var(--box-bg);
  margin: 5px 20px 5px 20px;
  padding: 15px 25px;
}

.socialbutton {
  display: block;
  border-bottom: 1px dotted var(--text-accent);
  padding: 5px 0;
}

.socialbutton a {
  font-size: 20px;
  font-family: var(--text-header_2);
  letter-spacing: 0.1em;
}

.socialicon {
  padding: 0 15px;
  height: 24px;
  vertical-align: middle;
  filter: grayscale();
}


.textbox, .textboxSide  {
  display: flex;
  flex-wrap: nowrap;
  flex-direction: column;
  justify-content: center;
  border: var(--box-border);
  border-radius: var(--box-border-radius);
  background-color: var(--box-bg);
} /* textbox style plaese use this omega */

.textbox  {
  padding: 10px 25px;
}

.textboxSide  {
  padding: 10px;
}

.textboxSide ul {
  text-align: left;
  padding: 0 10px
}

table {
  width: 100%;
}

.albumtable th {
  text-align: left;
  font-size: 16px;
}

.albumtable td {
  text-align: right;
  font-size: 16px;
}

.albumtable  {
  margin: auto;
  align-items: center;
  justify-content: space-around;
}

.sitebuttons  {
  display: flex;
  justify-content: center;
  align-items: center;
}

.sitebuttons img  {
  padding: 5px;
}

.sitebuttons textarea {
  height: 31px; 
  width: 160px; 
  font-size: 10px;
  color:#000
}

/* mobile 800px max */

@media (max-width:800px)  {
  
  * {
    line-height: 1.5
  }

  table {
    width: 80%;
  }
  .content  {
    flex-direction: column;
    align-items: center;
  }
  .columnMain {
    width: 100%;
  }
  .columnSide {
    width: 100%;
  }
  #coverart  {
    display: none;
  }
}

/* mobile 473px max */

@media  (max-width:473px) {
  * {
    font-size: 16px;
    line-height: 1.65;
  }

  h1  {
    font-size: 35px;
  }
  h2  {
    font-size: 25px;
  }
  h3 {
    font-size: 18px;
  }
  .textbox  {
    padding:  15px;
  }
  .textboxSide  {
    padding:  15px;
  }
  table {
    width: 100%;
  }
  #coverart {
    display: block;
  }
}