/*---Shift + alt + F to auto indent---*/

body {
  background-image: url("imgs/background-1.png");
  background-size: cover;
  background-position: top center;
  background-attachment: fixed;
  font-family: sans-serif;
  font-size: 12px;
}

footer {
  color: rgb(255, 255, 255);
}

.wrapper {
  max-width: 700px;
  /* controls content width 800 originally*/
  margin: 32px auto;
  /* centers the wrapper */
  padding: 16px;
  /* space from the edges inside */
  background-color: #ffffee;
  color: #001a5b;
  box-shadow: 0 4px 0 rgb(62, 62, 230);
}

.wrapper-clear {
  max-width: 700px;
  /* controls content width */
  margin: 32px auto;
  /* centers the wrapper */
  padding: 16px;
  /* space from the edges inside */
}

.info_wrapper {
  background-color: #ffffee;
  max-width: 700px;
  margin: 16px auto;
  padding: 16px;
}

.info_wrapper h1 {
  font-family: Georgia, serif;
  font-size: 16px;
  background-color: #eecccc;
  padding: 4px;
  border: 1px solid black;
}


.info_wrapper p {
  border: 1px solid rgb(0, 0, 0);
  padding: 4px;
  font-family: sans-serif;
}

.photos {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  padding: 16px 0 16px 0;
}

p {
  margin: 0;
  font-family: sans-serif;
  font-size: 12px;
}

h1 {
  font-size: 32px;
  font-family: Georgia, serif;
  margin: 0;
}

figcaption {
  background-color: #dfdfd0;
  padding: 4px;
  border: 1px solid black;
  font-family: sans-serif;
  font-size: 12px;
}

figcaption strong {
  font-family: Georgia, 'Times New Roman', Times, serif;
  font-size: 16px;
}

figure {
  background-color: #eaeadc;
}

figure img {
  display: block;
  margin: 0 auto;
}

.inline-nav-list {
  display: flex;
  justify-content: center;
  gap: 64px;
  list-style: none;
  padding: 8px;
  margin: 0;
  font-size: 16px;
  font-family: Georgia, serif;
  text-transform: uppercase;
}

.site-footer {
  max-width: 800px;
  /* controls content width */
  margin: 20px auto;
  /* centers the wrapper */
  text-align: center;
  font-style: italic;
  font-family: sans-serif;
  color: #9b9b9b;
}

td {
  padding: 8px;
}

td a {
  text-decoration: none;
  color: rgb(0, 0, 0);
  font-weight: bold;
  cursor: pointer;
}

td a:hover {
  color: rgb(95, 15, 255);
}

button {
  padding: 4px 32px;
}

input{
  border: 2px solid rgb(81, 81, 81);
  border-radius: 4px;
  padding: 8px 16px;
  margin: 8px;
}

@media (max-width: 750px) {
    .flag {
        display: none;
    }
}

/*-- Spacers--*/
.sp-4{
  height: 4px;
}

.sp-8 {
  height: 8px;
}

.sp-16 {
  height: 16px;
}

.sp-32 {
  height: 32px;
}

.sp-64{
  height: 64px;
}