/* universal text rules */
:root {
--text: #011d57;
--link:  #b94f4f;
--pagecol: #fffbeb;
--bg: #ffffff;
  font-size: calc(15pt + 0.390625vw);
   color: var(--text);
  font-family: 'ratwalks-web';
}

/* links */
a:link {
  color: var(--link);
}

a:visited {
  color: var(--link);
}

/* underline only on hover */
.hoverlink a {
color: #011d57;
text-decoration: none;
}

.hoverlink a:hover {
text-decoration: underline;
}

/* text elements */
header {
text-align: center;  
}

header a:link {
color: var(--text);
}

header a:visited {
color: var(--text);
}

h1 {
  font-weight: bold;
  font-size: 2rem;
  text-align: center;
  margin-bottom: 1%;
  margin-top: 1%;
}

h2 {
  font-size: 1.5rem;
  text-align: center;
  margin-bottom: 1%;
}

h3 {
  margin-top: 1%;
  margin-bottom: 0;
}

p {
  margin-top: 0;
}

.center {
  width: 100%;
  margin: auto;
  text-align: center;
}

/* images */
img {
  max-width: 100%;
}


/* 2 columns */
.column {
  flex: 50%;
}

.row {
  display: flex;
  justify-content: space-around;
}

/* lists */
ul {
  list-style-position: inside;
  margin-left: 3%; 
  padding-left: 0;
  margin-top: 0;
    text-align: left;
}

/* star bullets */
.star li::marker {
content: "✦ ";
}

/* for secrets */
.curious {
  cursor: help;
}

/* nav buttons */
.navbtn {
  position: absolute;
}

.left {
text-align: left;
left: 2%;
  margin-left: 1%;
}

.left::before {
content: '< ';
color: var(--link);
}

.right {
text-align: right;
right: 2%;
  margin-right: 1%;
}

.right::after {
content: ' >';
color: var(--link);
}

/* misc flexbox with wrap */
.flex-container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-around;
}

/* responsive rules */
@media only screen and (max-width: 580px) {
/* 2 columns */
.row {
justify-content: center;
align-items: center;
  flex-direction: column;
padding-bottom: 2%;
}

/* nav buttons */
.navbtn {
position: relative;
margin-top: 2%;
}

.left {
text-align: left;
width: fit-content;
}
}