/* Default CSS */
/* Generated by the CoffeeCup HTML Editor - www.coffeecup.com */
.biglinkimg {

 }
 
 .previewbutton {
 line-height: 1.2;
 margin: 0 auto; text-align: center; background-color: #FFFFFF; 
  border: 2px solid #6C39FF;
border-radius: 8px;
color: #6C39FF;
font-weight: 700;
font-size: 18px;
padding: 10px 10px;
width: 80%;
max-width: 500px;
shadow: none;
margin-top: 12px;
  }
 .fb-share {
 width: 100%;
 max-width: 360px;
 background-color: white;
 color: black;
  }
/* HERO: center the row; let children stretch in height */
.hero {
  color:#bbf7f9;
  background:#422d6e;
  display:flex;
  justify-content:center;
  width:100%;
  /* optional baseline height so stretching is visible */
  /* min-height: 260px; */
}

.hero-inner {
  display:flex;
  justify-content:center;
  align-items:stretch;   /* <-- key: lets children match row height */
  gap:20px;
  max-width:900px;
  width:100%;
  margin:0 auto;
}

.image-wrapper {
  width: clamp(300px, 25vw, 400px); /* min 300px, max 400px */
  aspect-ratio: 4 / 1;              /* width:height ratio = 4:1 */
  overflow: hidden;                 /* hides clipped part */
  border-radius: 8px;               /* optional */
  position: relative;
}

.image-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;                /* fill container */
  object-position: center top;      /* adjust crop focus */
  display: block;
}

/* SOCIAL BAR: keep row behavior; fill height of hero row */
.social-bar {
max-width: 100px;
  background:#ddd;
  display:flex;
  flex-direction:row;    /* <-- keep horizontal, do NOT switch to column */
  flex-wrap:wrap;        /* <-- allows 2×2 on mobile */
  align-content:center;  /* multi-row vertical centering inside full height */
  align-items:center;    /* single-row vertical centering */
  justify-content:center;
  gap:0px;
  padding:0px;
  align-self:stretch;    /* <-- makes bar match hero-inner’s height */
}

/* Icons/links */
.social-bar a {
  width:30px; height:30px;
  display:flex; align-items:center; justify-content:center;
  color:#000; font-size:.8em; text-decoration:none;
}

.social-bar img { width:30px; height:30px; }

/* Desktop/laptop: single horizontal row */
@media (min-width: 768px) {
  .social-bar {
    max-width:none;      /* no forced wrap */
    flex-wrap:nowrap;    /* 1×4 row */
  gap: 0px;
  }
}




.image-wrapper {
align-self: start;
  /* Width: 300–400px fluid */
  width: clamp(300px, 30vw, 400px);

  /* Height = 25% of width */
  aspect-ratio: 10 / 3;

  position: relative;
  overflow: hidden; /* clip vertically */
  border-radius: 8px; /* optional */
  box-sizing: border-box;
}

/* Increase specificity with the child selector */
.image-wrapper > img {
  position: absolute; /* decouple from layout/intrinsic size */
  inset: 0;
  width: 100%;
  height: 100%;       /* concrete height so object-fit works */
  object-fit: cover;  /* fill + crop */
  object-position: 50% 30%; /* adjust the visible area if needed */
  display: block;
}
 
 .spotify {
  width: 75%; height: 80px;
  display: block;
  }
.articlewrap {
border-radius: 5px;
background-color: #bbf7f9;
max-width: 800px;
margin: 0 auto;
padding: 10px;
 }
 
body {  
font-family: "Barlow", "Arial", sans-serif;
background-color: #26e5ec;
color: #212121;
font-size: 16px;
line-height: 1.5;

}

button:hover {
  background-color: #c20;
  cursor: pointer;
}

.intro {
margin: 10px 0px;
 }
.cta {
margin: 10px 0px;
 }
 
 .hero {
   text-align: center;
 width: 100%;
 background-color: #dedcd2;
  }
  
  .link-legend {
  font-size: 12px;
  color: #9aa3ad; margin: 5px 0px 20px 0px;
}

footer {
display: flex;
justify-content: space-around;
  position: relative;
  left: 0;
  right: 0;
  width: 100%;
  background-color:#cccccc;
    padding: 0px; 
	}
button {
font-size: 16px;
font-weight: 700;
width: 120px;
clear: left;
background-color: #FF6F61;;
color: #000000;
margin: 10px 0px 0px 0px;
 }


 .articlepromo {
 max-width: 400px;
 width: 100%;
  }
  
.biglink {
font-size: 20px;
display: block;
line-height: 1.25;
font-weight: 600;
	 color: #FF6F61;
 }
 
 .biglinkimg {
 
 width: 100%;
 max-width: 300px; max-height:200px;
 }
 
 .articlecontainer {
 margin: 20px 10px;
 }
 
  .articleelement {
  flex: 1;
  margin-bottom: 15px;
 }
 
 a, a:visited {
 color: #0066CC;
 text-decoration: none;
  }
  
  h1, h2, h3 {
  font-family: "Orbitron", "Arial", sans-serif;
  margin: 0px;
  line-height: 1.15;
   }
   
   h1.article {
   font-size: 24px;
    }
	
	h2.article {
	font-size: 21px;
	 }
	 
	 h3.article {
		font-size: 18px; 
	  }
   
   h1 {
     font-size: 30px;

    }
	h2 {
	  font-size: 20px;

	 }
	 h3 {
	   font-size: 18px;

	  }
   
   .articlepage {
   margin: 0px;
   background-color: #422d6e;;
    }
   
   p {
   margin: 5px 0px;
    }
   
   a {
   margin: 0px 0px;
    }
	
	h2 {
	line-height: 1.25;
	 }
	 
	 .boris {
	 color: #FF6F61;
	  }
	  
/* External link icon (inline SVG inherits color) */
a.external-link {
  text-decoration: none;
  border-bottom: 1px solid rgba(255,255,255,0.25);
  padding-bottom: 2px;
}
a.external-link svg {
  width: 0.9em; height: 0.9em; margin-left: 6px; vertical-align: text-bottom;
  opacity: .9;
}

/* Neon toast */
#redirect-toast {
  position: fixed; bottom: 20px; right: 20px;
  background: #FFCCCB; color: #000000; 
  padding: 12px 16px; border-radius: 10px;
  font-size: .95em; line-height: 1.2;
  box-shadow: 0 0 0 rgba(0,0,0,0);
  display: none; z-index: 9999;
  border: 1px solid rgba(177,242,230,.35);
}

/* Fade + neon glow */
@keyframes neonGlow {
  0%   { box-shadow: 0 0 0px #B1F2E6; }
  50%  { box-shadow: 0 0 22px #B1F2E6; }
  100% { box-shadow: 0 0 0px #B1F2E6; }
}
@keyframes toastFadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes toastFadeOut {
  from { opacity: 1; transform: translateY(0); }
  to   { opacity: 0; transform: translateY(6px); }
}

#redirect-toast.show {
  display: block;
  animation: toastFadeIn .18s ease-out, neonGlow 1.6s ease-in-out infinite;
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  #redirect-toast { animation: none !important; }
}

@media screen and (max-width: 699px) {

#featured-image, .articleimg {
height: 125px;
width: auto;
 }
 }
 @media screen and (min-width: 700px) {

#featured-image, .articleimg {
height: 300px;
width: auto;
 }
 }