/*  The * below is used as a universal selector, so it creates default settings for your site */
* {
    font-size: 12pt;
    line-height: 14pt;
    font-family: Arial, Helvetica, sans-serif;
}
menu{font-size: 22;}

@font-face {
  font-family: "";
  src: url(./);
}


html {
  min-height: 100%;
}

body {
  background-color:rgb(1, 110, 34);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.main-content {
  flex: 1;
}

.about-body {
  margin-top: 48px;
}

footer {
  font-size: 12pt;
  font-style: italic;
  padding: 1em;
  text-align: center;
}

/* Decorative slowly scrolling lines on left and right */
@keyframes scroll-line {
  0% { background-position: 0 0; }
  100% { background-position: 0 40px; }
}

.side-decoration {
  position: fixed;
  top: 0;
  bottom: 0;
  width: 24px;
  z-index: 0;
  overflow: hidden;
}

.side-decoration::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: repeating-linear-gradient(
    to bottom,
    transparent 0,
    transparent 18px,
    rgba(0, 0, 0, 0.4) 18px,
    rgba(0, 0, 0, 0.4) 22px
  );
  background-size: 100% 40px;
  animation: scroll-line 8s linear infinite;
}

.side-left {
  left: 0;
}

.side-right {
  right: 0;
}

header {
  text-align: center;
}

header a{
  text-decoration: none;
}

/*ul settings for nav bar*/

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;

  display:flex;
}

ul li {
  float: center;
  display:flex;
  
}

ul li a {
  display: flex;
  color: rgb(0, 0, 0);
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  z-index: 300;
}

ul li a:hover {
  font-weight: bold;
}


h1{
  align-content: center;
}

span{
  writing-mode: vertical-lr;
}

bordered{
  border-style: dashed;
  margin: 25px;
}

bio{
  display: flex;
  line-height: 1.7;
  margin-left: 80px;
}

deco,
.deco {
  font-size: 24px;
  font-weight: bold;
}

.deco2 {
  font-size: 13px;
  font-style: italic;
  margin-left: 80px;
  margin-top: 160px;
  color:rgb(19, 29, 20);
  writing-mode: horizontal-tb;
}

/*h2*/

h2{
  text-transform: lowercase;
  text-align: center;
  text-decoration: none;
  color:rgb(1, 110, 34);

   font-size: 77px;
            text-shadow: 
                -1px -1px 0 black,
                 1px -1px 0 black,
                -1px  1px 0 black,
                 1px  1px 0 black;
}


h2:hover,
a:hover h2{
  color: black;
}

form{
  align-content: center;
}

.container {
  display: flex;
  flex-direction: column;
  border-style: double;
}

.container div {
  margin: 10px;
  padding: 20px;
  font-size: 30px;
}


postcard {
display: block;
}

.header-title {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.header-title a {
  position: relative;
  z-index: 1;
}

.oval {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  height: 55px;
  width: 620px;
  border: 1px solid black;
  border-radius: 50%;
  z-index: 0;
}

.header-title:hover .oval {
  background-color: beige;
}

img {
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 5px;
  width: 150px;
}

nav {
  display: flex;
  justify-content: center;
  align-items: center;
}

img {
  display: block;
  margin: auto;
    margin-top: 25px;
}
.archive-scroll {
  overflow: auto;
  max-height: calc(100vh - 200px);
  margin: 20px auto;
  padding: 20px;
}

#postcard-grid.grid {
  position: relative;
  width: 1400px;
  min-height: 2000px;
  margin: 0 auto;
}

#postcard-grid.grid.is-empty {
  width: auto;
  min-height: 0;
}

/* Each postcard: size set by JS to match image; absolute position set by JS */
.grid section.postcard-entry {
  position: absolute;
  z-index: 1;
  min-width: 120px;
  min-height: 120px;
  background-color: #f1f1f1;
  cursor: pointer;
  overflow: hidden;
  transition: box-shadow 0.2s ease;
}

.grid section.postcard-entry:hover {
  box-shadow: 4px 4px 12px rgba(0, 0, 0, 0.3);
}

.grid section.postcard-entry:focus {
  outline: 2px solid rgb(1, 110, 34);
  outline-offset: 2px;
}

/* Front (image) and back (text) fill the card */
.postcard-front,
.postcard-back {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 12px;
  box-sizing: border-box;
}

.postcard-back {
  display: none;
  overflow-y: auto;
  text-align: left;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.postcard-back::-webkit-scrollbar {
  display: none;
}

.grid section.postcard-entry.showing-text .postcard-front {
  display: none;
}

.grid section.postcard-entry.showing-text .postcard-back {
  display: flex;
}

.postcard-front .postcard-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border: none;
  display: block;
}

.postcard-no-image {
  font-size: 14px;
  color: #666;
}

.grid section.postcard-entry .postcard-text {
  font-size: 13px;
  line-height: 1.4;
  margin: 0 0 8px 0;
}

.grid section.postcard-entry .postcard-timestamp {
  font-size: 10px;
  color: #666;
  margin: 0;
  font-style: italic;
}

.form-container {
  display: flex;
  justify-content: center;
  padding: 20px;
}

/* Archive page: dingbat in bottom-left, questions postcard overlay */
.archive-dingbat {
  position: fixed;
  bottom: 24px;
  left: 24px;
  z-index: 1000;
  width: 48px;
  height: 48px;
  border: none;
  border-radius: 50%;
  background-color: rgb(1, 110, 34);
  color: white;
  font-size: 24px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.3);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.archive-dingbat:hover {
  box-shadow: 4px 4px 12px rgba(0, 0, 0, 0.4);
  transform: scale(1.05);
}

.questions-postcard-overlay {
  position: fixed;
  inset: 0;
  z-index: 1001;
  background: rgba(0, 0, 0, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0.2s ease;
}
.questions-postcard-overlay.is-open {
  opacity: 1;
  visibility: visible;
}

.questions-postcard {
  position: relative;
  background: #f1f1f1;
  max-width: 420px;
  width: 100%;
  padding: 28px 24px;
  box-shadow: 4px 4px 16px rgba(0, 0, 0, 0.3);
  border: 2px solid black;
}
.questions-postcard-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 32px;
  height: 32px;
  border: none;
  background: transparent;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  color: #333;
}
.questions-postcard-close:hover {
  color: black;
}
.questions-postcard-title {
  margin: 0 0 16px 0;
  font-size: 18px;
  font-weight: bold;
}
.questions-postcard-list {
  margin: 0 0 12px 0;
  padding-left: 20px;
  font-size: 14px;
  line-height: 1.6;
}
.questions-postcard-note {
  margin: 0;
  font-size: 12px;
  color: #666;
  font-style: italic;
}

/* some other things you should consider for css styling are: 
html, <h1>, <p>, <div>, .classes, #IDs, img, a */