:root {
  --color-bg: #333;
  --color-text-main: #eee;
  --color-primary: #FFFF00;
  --image-max-width: 300px;
  --image-margin: 3rem;
}

/* Basic page style resets */
* {
  box-sizing: border-box;
}

a {
  font-style: normal;
  font-weight: normal;
  color: var(--color-text-main);
  text-decoration: none;
  
}
a:visited {
  font-style: normal;
  font-weight: normal;
  color: var(--color-text-main);
  border-style: none;
}
/******************************************************************************
END Glitch hello-app default styles
******************************************************************************/

body {
  font-family: sans-serif;
  background-color: var(--color-bg);
  color: var(--color-text-main);
}
.xyz {
  font-style: normal;
  font-weight: normal;
  color: var(--color-text-main);
  text-decoration: underline;
  
}
.xyz:visited {
  font-style: normal;
  font-weight: normal;
  color: var(--color-text-main);
  border-style: none;
}
.xyz img {
  display:block;margin:1em 0;
}
.xyz.hascaption img {
  margin-bottom:0;
}
p {
  margin-top: 3rem;
  width:100%;
  margin-left:-15px;
  padding-left:15px;
  border-left:thin solid #666;
}
p strong {
  text-decoration:underline;
  font-size:1.25rem;
}
p a img {width:100%}
form {display:inline;}
button {
  background-color: DarkSlateGray;
  border: none;
  color: white;
  padding: 12px 16px;
  font-size: 18px;
  cursor: pointer;
  border-radius:15px;
  text-decoration:none!important;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  align-content: center;
}
button i {font-size:30px;font-weight:normal;padding-right:10px;}

button:hover {
  background-color: LightSlateGray;
}

/* Page structure */
.wrapper {
  display: grid;
  place-items: center;
  margin: 0 1rem;
}
.content {
  max-width:600px;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: center;
  align-content: center;
  justify-content: flex-start;
}