:root {
  --bg-color: #1d1d1d;
--text-color: #ff50b8;
  --cell-text: #ffd2ed;
  --font: "imFell";
  --headings: "pirataOne";
}

:root,
[data-text="original"]{
  --font: "imFell";
  --headings: "pirataOne"
}
[data-text="alt-font"]{
  --font: "atkinson";
  --headings: "timesRoman"
}

:root,
[data-bg="original"]{
  --bg-color: #1d1d1d;
  --text-color: #ff50b8;
  --cell-text: #ffd2ed;
  --cell-color: #2c2c2c;
  --card-color: #0d0d0d
}
[data-bg="low-contrast"]{
  --bg-color: #2d2d2d;
  --text-color: #ff9acc;
  --card-color: black
}

body {
    background: var(--bg-color);
    color: var(--text-color);
    margin: 0 auto;
    display: grid;
    justify-content: center;
    font-family: var(--font);
}

.top {
 margin-top: 10px; 
 text-align: center;
 position: relative;
}

.header {
  font-family: var(--headings);
}

.socials {
  position: absolute;
  right: 5px;
  top: 10px;
}

a {
  color: var(--text-color);
  text-decoration: none;
}

.bluesky {
  height: 20px;
  width: 20px;
}

.tumblr {
  height: 20px;
  width: 20px;
}

.dropdown button {
  background: var(--bg-color);
  color: var(--text-color);
  font-family: var(--font);
  font-size: 1rem;
  border: 1px solid;
}

.dropdown {
 position: absolute;
  left: 10px;
  top: 10px;
}

.switch {
  display: block;
  color: var(--text-color);
  text-decoration: none;
  padding: 3px;
}

.drop-content {
  display: none;
  position: absolute;
  text-align: left;
  background-color: var(--card-color);
  width: 35vw;
  height: 25vw;
  max-width: 150px;
  max-height: 60px;
  padding: 10px
}

.dropdown:hover .drop-content {
 display: block 
}

.intro {
  text-align: center;
  margin: 5px;
}

table {
  table-layout: fixed;
    width: 95vw;
    height: 114vw;
    max-width: 500px;
    max-height: 600px;
    box-sizing: border-box;
    border-radius: 0.5vw;
    background: var(--card-color);
    padding: 5px;
    justify-content: center;
    
    border-collapse: separate;
    empty-cells: show;
    border-spacing: 4px;
    margin: 0 auto
}

tr {
    box-sizing: border-box;
}

th {
  min-width: 100%;
  min-height: 100%;
 box-sizing: border-box; 
 border: 1px solid;
    border-radius: 5px;
    background: var(--bg-color);
}

td {
  min-width: 100%;
  min-height: 100%;
    border: 1px solid;
    border-radius: 5px;
    background: var(--cell-color);
}

.banner {
  min-width: 100%;
    font-family: var(--headings);
    color: var(--heading-text);
    font-size: 2em;
    
	position: absolute;
	text-decoration: none;
	top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.a {
  min-height: 100%;
  min-width: 100%;
  position: relative;
}

.b {
  min-width: 100%;
    font-size: .75em;
    
position: absolute;
box-sizing: border-box;
	text-decoration: none;
  text-align: center;
  padding: 2px;
  color: var(--cell-text);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.flag {
  background-image: url("/stede-flag-real2.png");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

.e {
  width: 25vw;
  height: 15vw;
  max-width: 120px;
  max-height: 40px;
  padding: 2px;
  box-sizing: border-box;
  border: 2px solid;
  border-radius: 5px;
  background: var(--bg-color);
  color: var(--text-color);
  font-size: 20px;
  text-align: center;
  font-family: var(--headings);
}

.d {
  margin-top: 50px;
}