/* <uniquifier>: Use a unique and descriptive class name*/
/* <weight>: Use a value from 100 to 900*/

.noto-sans-<uniquifier> {
  font-family: "Noto Sans", serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
  font-variation-settings:
    "wdth" 100;
}

/* Reset some basic styles for better cross-browser compatibility */
body, ul {
    margin: 0;
    padding: 0;
}

body {
    font-family: "Noto Sans", sans-serif;
    line-height: 1.6;
    background-image: url('/myimages/snowpattern.jpg'); 
    background-size: 800px 800px;
    background-repeat: repeat;
    --section-links: #080;
}

/* Footer styles */
footer {
    background: linear-gradient(0deg, rgba(102,102,102,1) 0%, rgba(153,153,153,1) 100%);
    color: white;
    text-align: center;
    padding: 20px 0;
    position: relative;
    width: 100%;
    bottom: 0;
    left: 0;
}

/* Grid container */
.container {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 10px;
    padding: 80px 10px 10px; /* Adjust top padding to avoid overlap with fixed navbar */
    max-width: 1200px;
    margin: 0 auto;
}

.container a:hover {
   background-color: rgba(51, 51, 119, 0.9);
   color: #fff;
}

/* Grid items */
.item {
    background-color: #ddd;
    padding: 20px;
    box-sizing: border-box;
    box-shadow: 5px 5px 2px rgba(0, 0, 0, 0.3);
}

.linkbox {
    cursor: pointer;
    max-width: 800px;
    border-radius: 20px;
    margin: 0 auto;
}

.linkbox:hover {
  background-color: #ccc;
  transition: background-color 0.3s ease-in-out;
}

/*I don't fully graps know that flex thing works, syntax is all over the place, I'll stick to regular list I guess

.section-link-bar {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
  align-items: center;
  padding: 10px;
}

.section-link-bar a {
  color: var(--section-links);
  font-weight: bold;
  text-decoration: none;
  padding: 5px 14px;
  display: inline-block;
  margin: 0;
}
*/

.thumbnails {
  overflow: auto;
  white-space: nowrap;
  max-width: 85vw;
  gap: 15px;
}

.thumbnails img {
  margin-top: 20px;
  max-height: 160px;
  border-radius: 5px;
}

.box-info {
  display: flex;
  justify-content: space-between;
  margin: 0;
  font-size: 0.9rem;
  color: #333;
}

.box-info .left {
  text-align: left;
}

.box-info .right {
  text-align: right;
}

/* Responsive grid items */
@media (max-width: 899px) {
    .container {
        grid-template-columns: 1fr;
    }

    .item {
        grid-column: span 12;
    }
}

@media (min-width: 900px) {
    .item-2 { grid-column: span 2; }
    .item-3 { grid-column: span 3; }
    .item-4 { grid-column: span 4; }
    .item-5 { grid-column: span 5; }
    .item-6 { grid-column: span 6; }
    .item-7 { grid-column: span 7; }
    .item-8 { grid-column: span 8; }
    .item-9 { grid-column: span 9; }
    .item-10 { grid-column: span 10; }
    .item-11 { grid-column: span 11; }
    .item-12 { grid-column: span 12; }
    .topnav #myLinks { justify-content: flex-end;}
}

.centeredimage img {
  max-width: 80%;
  display: flex;
  margin: 5px auto;
}

.buttonsandwebrings {
  text-align: center;
}

.map {
  max-width: 95%;
  display: block;
  margin: 0 auto;
}

h1, h2, h3, h4, h5, h6, h7 {
  padding: 0;  
}

/* Reset default margin and padding */
ul, li, p {
    margin: 0;
    padding: 0;
}

/* Specific styling for ul */
ul {
    list-style: disc; /* or another style like circle or square */
    padding-left: 20px; /* Adjust based on your layout needs */
}

/* Paragraph styling */
p {
    margin-bottom: 1em; /* Example margin, adjust as needed */
}

.section-list a, .map-list a, .idea-list a {
  margin-top: -80px;
  text-decoration: none;  
  color: #080;
}

.section-list li::marker {
  content: "\f00b  "; /* FontAwesome Unicode */
  font-family: FontAwesome;
}

.map-list li::marker {
  content: "\f278  "; /* FontAwesome Unicode */
  font-family: FontAwesome;
}

.idea-list li::marker {
  content: "\f129  "; /* FontAwesome Unicode */
  font-family: FontAwesome;
}

.question-list a {
  text-decoration: none;
}

.question-list li::marker {
  content: "\f128  "; /* FontAwesome Unicode */
  font-family: FontAwesome;
}

.links-list li::marker {
  content: "\f08e  "; /* FontAwesome Unicode */
  font-family: FontAwesome;
}

.img-context {
  width: 80%;
  margin: 0 auto 30px auto;
  text-align: center;
  color: #222;
}

.img-title {
  font-weight: bold;
  font-style: italic;
}

.shrine-title {
  text-align: center; 
}