:root {
  --backColor: #b99946;
  --contentBackColor: #ffffff; 
  --contentForeColor: #272727;
  --navBackColor: var(--contentBackColor);
  --navForeColor: var(--contentForeColor);
  --lightGray: #c4c4c4;
}

.wf-loading {
  font-family: Arial, sans-serif;
  visibility: hidden;
}

.wf-active {
  font-family: 'Roboto', Arial, sans-serif;
  visibility: visible;
}

body {
  background-image: url("/images/dot.png");
  background-color: #f1f1f1;
  color: var(--contentForeColor);
  font-family: 'Roboto', sans-serif;
  font-weight: 400;
  font-size: 20px;
  max-width: 875px;
  min-height: 100vh;
  margin: auto;
}

strong, b {
  font-weight: 200;
}

h4 {
  margin-left: 20px;
}

table {
  border-collapse: collapse;
}

table td, th {
  border: 1px solid black;
  padding: 7px;
}

table tr:nth-child(2n+3) {
  background-color: var(--lightGray);
}

.navSection {
  background-color: var(--navForeColor);
}

.navMenu { 
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.navItem {
  color: var(--navBackColor);
  text-decoration: none;
  display: inline-block;
}

.navItem:hover { /* Colors are inverted on hover */
  background-color: var(--navBackColor);
  color: var(--navForeColor);
  transition: 0.2s;
}

#contentSection {
  min-height: 100vh;
  background-color: var(--contentBackColor);
  border-left: 1px solid black;
  border-right: 1px solid black;
}

.contentHeading {
  margin-top: 15px;
  margin-bottom: 15px;
}

#headingSection {
  background-color: var(--contentBackColor);

  display: flex;
  justify-content: left;
  align-items: center;

  border-left: 1px solid black;
  border-right: 1px solid black;
}

#mainHeading {
  padding-left: 25px;
  font-family: 'Roboto', sans-serif;
  color: var(--contentForeColor);
  text-decoration: underline;
}

#contacts {
  padding: 7px;
  padding-bottom: 1px; /* less because icons grow upward, so keep it more even */ 
  justify-content: space-around;
}

.contactIcon {
  margin: auto;
  display: block;
  padding-bottom: 5px;
}

.contactDescription {
  margin: 0px;
  color: var(--contentBackColor);
  font-size: 13px;
}

#headingLink {
  text-decoration: none;
}

.contactLink:hover .contactDescription {
  color: var(--contentForeColor);
  transform: scale(1.1,1.1);
}

.contactLink:hover .contactIcon {
  transform: scale(1.4,1.4);
  transition: 0.1s;
}

.contactLink {
  padding-bottom: 0px;
}

pre {
  font-size: 20px; 
  color: var(--contentForeColor); 
  font-family: 'Roboto', sans-serif; 
  white-space: pre-wrap; 
  word-wrap: break-word;
}


.post {
  background-color: rgb(228, 228, 228);
  border: 1px solid black;
  margin-bottom: 10px;

  display: flex;
  justify-content: left;
  align-items: center;
}

.post:hover {
  background-color: rgb(212, 212, 212);
}

.post:hover img {
  opacity: 0.8;
}

.post img {
  vertical-align: bottom;
  border-right: 1px solid black;
  margin-right: 25px;
}

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

.image-row {
  display: flex;
  justify-content: center;
  gap: 5px;
  width: 100%;
  margin: 5px 0;
}

/* For rows of 2+ images */
.image-row-two {
  display: flex;
  justify-content: center;
  gap: 20px;
  width: fit-content;
  margin: 20px auto;
}

.imageContainer video {
  width: 100%;  /* Make video fill container width */
  display: block;
  margin: 0;    /* Remove any margins */
  cursor: pointer;
}

.imageContainer {
  border: 1px solid black;
  text-align: center;
  display: flex;
  flex-direction: column;
  width: fit-content;
  height: fit-content;
  margin: 20px auto;  /* Center the container */
}

.imageContainer span {
  background-color: var(--contentForeColor);
  color: var(--contentBackColor);
  width: 100%;
  display: block;
  margin-top: -4px;  /* Remove any gap between video and span */
}

.imageContainer img {
  display: block;
  max-width: 100%;
  height: auto;
}

/* When imageContainer is not in a row (single image) */
.imageContainer:not(.image-row-two *) {
  margin: 20px auto;
}

/* When imageContainer is in a row */
.image-row-two .imageContainer {
  margin: 0;
}

.regularLink {
  background-color: var(--contentBackColor);
  color: var(--contentForeColor);
  text-decoration: underline;
}

.regularLink:hover {
  background-color: var(--contentForeColor);
  color: var(--contentBackColor);
  text-decoration: none;
}

video {
  height: auto;
  display: block;
  margin: 0 auto;
  cursor: pointer;
  border: 1px solid black;
}



/* mobile resizing css */
/* small */
@media (max-width: 360px) {
    #mainHeading {
    font-size: 25px;
  }

  #headingSection {
  height: 55px;
  }

  .navItem {
  font-size: 17px;
  
  padding: 3px;
  padding-left: 14px;
  padding-right: 14px;
  }

  #contentSection {
    padding-top: 1px;
    padding-bottom: 10px;
    padding-left: 12px;
    padding-right: 12px;
  }
  .contentHeading {
    font-size: 21px;
  }
}

/* medium */
@media (min-width: 361px) {
  #mainHeading {
  font-size: 30px;
  }

  #headingSection {
  height: 70px;
  }

  .navItem {
  font-size: 18px;
  
  padding: 6px;
  padding-left: 18px;
  padding-right: 18px;
  }

  #contentSection {
  padding-top: 1px;
  padding-bottom: 10px;
  padding-left: 15px;
  padding-right: 15px;
  }

  .contentHeading {
  font-size: 24px;
  }
}

/* big */
@media (min-width: 550px) {
  #mainHeading {
  font-size: 36px;
  }

  #headingSection {
  height: 90px;
  }

  .navItem {
  font-size: 20px;

  padding: 6px;
  padding-left: 28px;
  padding-right: 28px;
  }

  #contentSection {
  padding: 10px;
  padding-left: 25px;
  padding-right: 25px;
  }

  .contentHeading {
  font-size: 30px;
  }
}