/* Box sizing rules */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
ul[role='list'],
ol[role='list'] {
  list-style: none;
}

/* Set core root defaults */
html:focus-within {
  scroll-behavior: smooth;
}

/* A elements that don't have a class get default styles */
a:not([class]) {
  text-decoration-skip-ink: auto;
}

/* Inherit fonts for inputs and buttons */
input,
button,
textarea,
select {
  font: inherit;
}

body {
	background-color:#1e1e2f;
	margin: auto;
	font-family: Arial, Helvetica, sans-serif;
	color: white; /* this is the font color */
		}
		
.header {
  background-color: #322f32;
  top: 0;
  /* padding: 10px; */
  text-align: center;
  color: white
}

img {
	display: block;
	max-width: 100%;
}

.link-img {
	display: inline;
	}

/*
nav {
  position: sticky;
  top: 0;
  overflow: hidden;
  background-color: #111;
}*/


#navbar {
  overflow: hidden;
  display: flex;
  justify-content: center;
  background-color: #111;
}

#navbar a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 0.5rem 0.4rem;
  text-decoration: none;
  font-size: 1.3rem;
}

#navbar a:hover {
  background-color: #ddd;
  color: black;
}

#navbar a.active {
  background-color: #FA17DB;
  color: white;
}

.content {  
  padding: min(1em, 3%);
  color: white;
}

.even-cols {
  display: grid;
  justify-items: center;
 }

@media (min-width: 50em) {
  .even-cols {
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    }
}

h2 {
  margin: 0 auto;
  text-align: center;
 }

.spo-button {
  cursor: pointer;
  text-decoration: none;
  border: 0;
  border-radius: 100vmax;
  padding: 0.5em 1em;
  font-weight: bold;
  font-size: 1.2rem;
  color: black;
  background-color: limegreen;
}

.spo-button:hover,
.spo-button:focus-visible {
  background-color: lightgreen;
 }
 
 .band-button {
  cursor: pointer;
  text-decoration: none;
  border: 0;
  border-radius: 100vmax;
  padding: 0.5em 1em;
  font-weight: bold;
  font-size: 1.2rem;
  color: white;
  background-color: black;
}

.band-button:hover,
.band-button:focus-visible {
  background-color: gray;
 }

.ibox {
  width: min(1200px, 95%);
  height: calc(0.5625 * width);
  /*border: solid red;*/
  margin: 0 auto;
}
 
.iframe-wrapper {
  position: relative;
  overflow: hidden;
  width: 100%;
  padding-top: 56.25%; /* 16:9 Aspect Ratio (divide 9 by 16 = 0.5625) */
}

.responsive-iframe {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
}

.list-container { /* this hopefully centres all the items */
  text-align: center;
  }
  
.list-container a {
  text-decoration: none;
  }
  
.horz-UL li {  /* this is to make the list strictly horizontal (inline) */
  display: inline;
  margin: 0 0.2rem;
  justify-items: center;
}

.sticky {
  position: fixed;
  top: 0;
  width: 100%;
}

.footer {
  text-align: right;
 }

/*
 * This is for later when I need to add shop things
 * grid {
 *   display: grid;
 *   gap: 2rem;
 * grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));

.footer {
  background-color: #f1f1f1;
  padding: 10px;
}

/* CSS syntax:
 * @smth is a query.
 * smth (without . or anything) is a selector by tag name i.e. of a <div> (h1, p, *, etc).
 * #smth is an id (useful for javascript).
 * .smth is a class
 * usually you use classes to style via css
 * and id (which must be unique in the document) to manipulate elements with javascript
 */