/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */


@font-face {
  font-family: dogica; 
  src: url(assets/dogica.otf); 

}

@font-face {
  font-family: norse; 
  src: url(assets/norse.regular.otf); 

}


body {
  height:100%;
  margin:0px;
  padding:0px;
  background-color: white;
  color: black;
  font-family: Verdana;
  background-image:url(assets/background.png);
  cursor:crosshair;
}

#links {
  position:fixed;
  width:600px;
  margin:0px;
  padding:0px;
}

#link1 {
  position:absolute;
  top:50px;
  left:100px;
  color:#e5e5e5;
  font-family: norse;
  font-size:15px;
}

#link2 {
  position:absolute;
  top:200px;
  left:300px;
  color:#e5e5e5;
  font-family: norse;
  font-size:15px;
}

#link3 {
  position:absolute;
  top:237px;
  left:243px;
  color:#e5e5e5;
  font-family: norse;
  font-size:15px;
}

#link4 {
  position:absolute;
  top:324px;
  left:210px;
  color:#e5e5e5;
  font-family: norse;
  font-size:15px;
}

#link5 {
  position:absolute;
  top:370px;
  left:384px;
  color:#e5e5e5;
  font-family: norse;
  font-size:15px;
}

#link6 {
  position:absolute;
  top:412px;
  left:334px;
  color:#e5e5e5;
  font-family: norse;
  font-size:15px;
}

#link7 {
  position:absolute;
  top:502px;
  left:183px;
  color:#e5e5e5;
  font-family: norse;
  font-size:15px;
}

#link8 {
  position:absolute;
  top:558px;
  left:220px;
  color:#e5e5e5;
  font-family: norse;
  font-size:15px;
}

#link9 {
  position:absolute;
  top:661px;
  left:55px;
  color:#e5e5e5;
  font-family: norse;
  font-size:15px;
}

#link1 a, #link2 a, #link3 a, #link4 a,#link5 a, #link6 a, #link7 a, #link8 a, #link9 a  {
    color:#e5e5e5;
    opacity:1;
    text-decoration:none;
    letter-spacing:2px;
      cursor:crosshair;
}

#link1 a:hover , #link2 a:hover, #link3 a:hover, #link4 a:hover, #link5 a:hover, #link6 a:hover, #link7 a:hover, #link8 a:hover, #link9 a:hover  {
    color:#e5e5e5;
    opacity:0;
}

#site-wrapper {
  width:600px;
  margin:50px 600px 0px 600px;
  text-align:center;
  }

#header {
  width:600px;
  margin:0px 0px;
}

#content-wrapper {
  width:370px;
  margin:0px auto;
  padding:10px;
  color:#e5e5e5;
  text-align:center;
  text-transform:uppercase;
  font-family: dogica;
  font-size:8px;
}

#content-wrapper a, a:visited {
  color:#959595;
  padding:3px;
  opacity:1;
  text-decoration: none;
  border-bottom:1px solid #959595;
    cursor:crosshair;
}

#content-wrapper a:hover, a:active {
  color:#959595;
  opacity:0;
  text-decoration: none;

}

h2 {
  color:#e5e5e5;
  font-family:norse;
  font-size:25px;
  letter-spacing:5px;
  margin-bottom: 30px;
  font-weight:300;
}

p {
  line-height:2;
  margin:20px;
}
strong {
  font-weight:300;
  background-color:#171717;
  padding:0px 0px 0px 2px;
  margin:-5px -5px 5px 5px;
  border-bottom:5px solid #171717;
  border-right:5px solid #171717;
}

::selection {
  background: #959595;
  color: #242424;
  padding:9px;
        }

.content-box {
  position: relative;
  /* Complex background goes on the main box */
  border-radius: 15px;
  padding: 24px 20px 20px 20px;
  margin:35px 0px;
  color: #e5e5e5;
}

/* The border is drawn on this pseudo-element */
.content-box::before {
  content: "";
  position: absolute;
  inset: 0; /* Stretches to fill the parent */
  border: 1px solid #e5e5e5;
  border-radius: 15px;
  pointer-events: none; /* Lets clicks pass through to the content */
  
  /* Cut a notch out of the top border */
  clip-path: polygon(
    0 0,                                  /* Top-left */
    20px 0,                               /* Start of notch (left padding) */
    20px 12px,                            /* Down into the notch */
    calc(20px + var(--title-width, 150px)) 12px, /* Across the notch */
    calc(20px + var(--title-width, 150px)) 0,    /* Up out of the notch */
    100% 0,                               /* Top-right */
    100% 100%,                            /* Bottom-right */
    0 100%                                /* Bottom-left */
  );
}

.box-title {
  position: absolute;
  top: -10px; /* Pulls title up to sit perfectly on the border line */
  left: 30px;
  margin: 0;
  font-family:norse;
  font-weight:300;
  font-size: 1.7rem;
  color: #e5e5e5;
  line-height: 1;
  /* NO background-color needed! */
}

#content-wrapper .content-box a, a:visited {
  margin-bottom:10px;
  border-bottom:0px;
}

#content-wrapper .content-box img {
  margin-bottom:13px;
}

.updates {
  display: grid;
  /* Column 1: Date (min 100px, scales to content). Column 2: Content (takes remaining space) */
  grid-template-columns: minmax(100px, max-content) 1fr; 
  gap: 16px 24px; /* 16px vertical spacing, 24px horizontal spacing */
  text-transform:uppercase;
  font-family: dogica;
  font-size:8px;
  max-width: 370px;
  color: #e5e5e5;
}

.date {
  font-family:norse;
  font-weight:300;
  text-align: right;
    color:#959595;
    letter-spacing:2px;
  font-size:14px;
}

.content {
  margin: 0; /* Removes default paragraph margins if you use <p> tags */
  line-height: 1.5;
  font-size:8px;
  text-align:left;
}

/* 1. Remove the broken line from the date, and make it relative */
.updates > .date {
  border-bottom: 1px solid #e5e5e5;
  position: relative; 
}

/* 2. Keep the line on the content */
.updates > .content {
  padding-bottom: 16px;
  border-bottom: 1px solid #e5e5e5;
}

/* 3. The "Bridge" across the 24px gap */
.updates > .date::after {
  content: '';
  position: absolute;
  bottom: -1px; 
  right: -24px; /* Exactly matches your 24px column gap */
  width: 24px;
  height: 1px;
  background-color: #e5e5e5;
  
}

/* 4. Hide borders and bridges on the very last row */
.updates > *:nth-last-child(-n+2) {
  border-bottom: none;
  padding-bottom: 0;
}
.updates > .date:nth-last-child(2)::after {
  display: none;
}


#site-wrapper #content-wrapper ul {
  list-style-type: none;
  margin:0px;
  padding:0px;
}

#site-wrapper #content-wrapper li {
  list-style-type: none;
  margin:0px;
  padding:5px;
}

.flex-container {
  display: flex;
  gap: 5px; /* Adds space between the columns */
  padding-bottom: 0px; 
}

.date-column {
  flex: 0 0 100px;
  color:#959595;
  font-family:norse;
  letter-spacing:2px;
  font-size:16px;
}

.content-column {
  flex: 1; /* Takes up 2 parts of the available space */
  text-align: left;
  line-height:2;
}

.content-column p {
  margin-top:0px;
}

.flex-container + .flex-container {
  border-top: 1px solid #e5e5e5;
  padding-top: 20px; 
}

/* The main container */
.gallery-grid {
  max-width: 370px;
  margin: 0 auto;

}

.grid-sizer, .grid-item {
  width: 33.333333%;
}

.grid-sizer {
  /* It doesn't need to be hidden, it just sits there invisible */
}

/* Keep your original padding CSS for .grid-item */
.grid-item {
  padding: 5px;
  box-sizing: border-box;
  float: left;
}

/* Ensure images fill their container */
.grid-item img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 10px; 
  transition: transform 0.3s ease;
}

  .grid-item img:hover {
  opacity:0.3;
}

#content-wrapper .grid-item a, a:visited {
  padding:0px;
  text-decoration: none;
  border-bottom:0px;
    cursor:crosshair;
}

#content-wrapper .grid-item a:hover, a:active {
  padding:0px;
  text-decoration: none;
  border-bottom:0px;
    cursor:crosshair;
    opacity:1;
}



#footer {
  width:500px;
  background-image:url(assets/footer_background.png);
  border-radius:40px;
  font-family:norse;
  letter-spacing:10px;
  color:#171717;
  margin:20px auto 10px auto;
  padding:20px;
}