* {
 
}

html {
     scroll-behavior: smooth
 }

 @media (min-width: 768px) {
     html {
         scroll-snap-type: y mandatory;
     }

     .fullscreen-section {
         scroll-snap-align: start;
     }
 }

 @media (max-width: 767px) {
     html {
         scroll-snap-type: none !important;
     }

     .fullscreen-section {
         scroll-snap-align: none !important;
     }
 }

 body {
     margin: 0;
     padding: 0;
     font-family: 'Galyon', sans-serif;
     width: 100%;
     color: #121212;
     overflow-x: hidden;
     background-color:  #D9B69D;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
     font-smoothing: antialiased;
     text-rendering: geometricPrecision;
 }

 a {
     text-decoration: none;
     color: initial;
 }

 a:hover {
     text-decoration: line-through
 }

p {
    font-size: calc(1rem + 0.5vw);
    line-height: 140%;
}

 h1,
 h2,
 h3,
 h4,
 h5 p {
     margin: 0;
 }

 h1 {
     font-size: calc(3vw + 20px);
 }

 h2 {
     font-size: 3rem;
 }

 h3 {
     font-size: 2rem;
 }

 .fullscreen-section {
     height: 100dvh;
     width: 100vw;
     scroll-snap-align: start;
     position: -webkit-sticky;
     position: sticky;
     top: 0;
     display: flex;
     justify-content: center;
     align-items: center;
     text-align: center;
 }

 .section-content {
     padding: 0;
     margin: 0;
     border: 4px solid #121212;
     width: calc(100% - 80px);
     height: calc(100dvh - 80px);
     box-sizing: border-box;
     display: flex;
     flex-direction: column;
     background-color: transparent;
 }

 .section-header {
     height: 100px;
     overflow: hidden;
     position: relative;
     width: 100%;
     display: flex;
     align-items: center;
     justify-content: center;
     border-bottom: 4px solid #121212;
     margin: 0;
     padding: 0;
 }

 .right-div {
     margin-left: auto;
 }

 .right-div,
 .left-div {
     padding: 0 40px;
 }


.scrolling-text-wrapper {
  width: 100%;
  overflow: hidden;
  position: relative;
  background: transparent;
  text-align: center;
}

.scrolling-track {
  display: flex;
  white-space: nowrap;
  will-change: transform;
  justify-content: flex-start;
}

.scrolling-track.no-scroll {
  justify-content: center;
}

.scrolling-text {
  padding-right: 80px;
  white-space: nowrap;
  will-change: transform;
  display: inline-block; /* default for animation */
}

.scrolling-text span {
     padding-right: 0rem!important;
 }

/* When not scrolling, override display for centering */
.scrolling-track.no-scroll .scrolling-text {
  display: flex;
  justify-content: center;
  align-items: center;
  padding-right: 0; /* no gap needed */
}
.scrolling-text h2 {
 font-size: 3vw;
    text-align: center;
}
 @media (max-width: 768px) {
     .scrolling-text {
         animation-duration: 15s;
     }
      .scrolling-text span {
     display: inline-block;
     padding-right: 4vw;
   
     white-space: nowrap;

 }
 }



 keyframes scroll-left {
     0% {
         transform: translateX(0%);
     }
     100% {
         transform: translateX(-50%);
     }
 }



 .circle {
     background-color: #D9B69D;
     border: 4px solid #121212;
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     overflow: hidden;
     transition: all 0.3s ease;
 }

 .section-main {
     flex: 1;
     width: 100%;
     position: relative;
     display: flex;
     align-items: center;
     justify-content: center;
     min-height: 0;
   
 }

 .image-box {
     border: 4px solid #121212;
     width: calc(100% / 1.43);
     height: calc(100% / 1.43);
     overflow: hidden;
 }

 .image-box img {
     width: 100%;
     height: 100%;
     object-fit: cover;
 }

 .section-footer {
     position: absolute;
     bottom: 40px;
     left: 40px;
     right: 40px;
     display: flex;
     justify-content: space-between;
     font-size: 1.2rem;
     z-index: 2;
 }

.content-footer {
     display: flex;
     justify-content: space-between;
    background-color: #fff;
    border: 4px solid #121212;
       border-top: 0px;
 }

 .content-footer  .right-div,
     .content-footer .left-div {
         padding:10px 20px;
     }

 .right-bottom,
 .left-bottom {
     padding: 40px;
     text-align: right
 }

 .left-bottom {
     text-align: left;
 }
.custom-post-navigation {
    margin: 100px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
    border: 4px solid #121212;
}
.custom-post-navigation .prev-post-image,
.custom-post-navigation .next-post-image {
  width: 20%;
  flex-shrink: 0;
}
.custom-post-navigation .prev-post-image img,
.custom-post-navigation .next-post-image img {
  width: 100%;
  height: auto;
  display: block;
}
.custom-post-navigation .nav-label {
  text-align: center;
  flex-grow: 1;
  order: 0;
  width: auto;
}



/* Mobile layout */
@media (max-width: 1000px) {
  .custom-post-navigation {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    text-align: center;
  }
  
  .custom-post-navigation .nav-label {
    width: 100%;
    height: 50px;
      padding-top: 25px;
    order: -1;
    margin-bottom: 0px;
  }
  
  .custom-post-navigation .prev-post-image,
  .custom-post-navigation .next-post-image {
    width: 40%;
    order: 1;
  }
}


 footer {
     min-height: 70vh;
     background-color: #121212;
     color: #fff;
     text-align: center;
     background-image: url('img/globus.svg');
     background-size: auto 80%;
      scroll-snap-align: start;
     background-repeat: no-repeat;
     background-position: center;
     display: flex;
     align-items: center;
     justify-content: center;
     z-index: 1000;
 }

.single-post footer{
        scroll-snap-align: none !important;
}



body .home .footer {
    
}

 footer a {
     color: #fff;
 }




.wrapper {
	max-width: 1200px;
	margin: 0 auto;
	padding: 2rem;
}



.hero {
	position: relative;
overflow: hidden;
	display: flex;
	flex-direction: column; /* Stack header over body */
	
}

.hero-header {
	display: flex;
    height: 80px;
	max-width: 900px;
	width: 100%;
	margin: 0 auto; /* center it like hero-media */
}

.hero-header-left {
	width: calc( 70% + 6px);
    border: 4px solid #121212;
     display: flex;
     align-items: center;
     justify-content: center;
   border-bottom: 0px solid #121212;
}

.hero-header-right {
	width: calc( 30% - 6px);
    text-align: right;
}



.hero-body {
	display: flex;
	justify-content: center; /* center the inner media wrapper */
	position: relative;
    border: 4px solid #121212;
}

.hero-media {

	position: relative;
	max-width: 900px;
	width: 100%;
	display: flex;
	align-items: center;
	gap: 2rem;
    
}

.vinyl {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

.vinyl-bg-circle {
  position: absolute;
  width: 40%;
  height:40%;
  border-radius: 50%;
  z-index: 0;
}

.vinyl img {
  position: relative;
  z-index: 1;
}


.billede {
    	border-left: 4px solid #121212;
    border-right: 4px solid #121212;
	position: relative;
	width: 70%;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	z-index: 2;
}

.billede img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.vinyl {
	position: absolute;
	top: 0;
	left: 0;
	width: 70%;
	aspect-ratio: 1 / 1;
	z-index: 1;
	transform: translateX(55%);
	opacity: 1;
	transition: transform 1s ease-in-out;
}

.vinyl img {
	width: 100%;
	height: 100%;
	animation: spin33rpm 1.818s linear infinite;
	transform-origin: center center;
    transform: rotate(50deg);
}



.latest-posts {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 2rem;
}

.post-item {
  flex: 1 1 calc(33.333% - 1rem);
  box-sizing: border-box;
  text-align: center;
  border: 4px solid #121212
}

.post-thumbnail img {
  width: 100%;
  height: auto;
  display: block;
    border-bottom: 4px solid #121212;
}

.post-title {
  padding: 1rem;
}

/* 2 columns under 960px */
@media (max-width: 960px) {
  .post-item {
    flex: 1 1 calc(50% - 1rem);
  }
    
    .scrolling-text h2 {
 font-size: 6vw;
   
}
}

/* Mobile responsive */
@media (max-width: 768px) {
  .post-item {
    flex: 1 1 100%;
  }
}

#content-wrapper {
max-width: 1200px;
    padding: 100px;
background-color: #fff;
     border: 4px solid #121212;
       border-top: none;

}
.post-title {
	width: 100%;
	padding: 2rem 0;
	text-align: center;
}

.content {
	padding: 0 1rem;
}

 @media (max-width: 767px) {
     html {
         scroll-snap-type: none !important;
         overflow-y: auto !important;
     }

     body {
         scroll-snap-type: none !important;
         overflow-y: auto !important;
     }
     
     .wrapper {
	padding: 10px;
}

     .fullscreen-section {
         scroll-snap-align: none !important;
         position: relative !important;
     }

     .sticky-scroll-container {
         scroll-snap-type: none !important;
     }

     .section-content {
         width: calc(100% - 40px);
         height: calc(100dvh - 20px);
     }

     .section-content:first-of-type {
         margin-top: 20px;
     }

     .section-content:last-of-type {
         margin-bottom: 20px;
     }

     footer {
         margin-top: 20px;
     }

      .right-bottom,
 .left-bottom {
    padding: 0;
 }
     
       footer .right-bottom,
 footer .left-bottom {
  display: none
 }
     
     .right-div, .left-div {
         padding: 0 15px;
        
     }


     .section-header {
         height: 30px;
     }
     
        .section-header:first-of-type {
         height: 60px;
     }

     h2 {
         font-size: 1.5rem;
     }
     
     h3 {
         font-size: 1.3rem;
     }
     
     #content-wrapper {
    padding:40px 15px;
}
     
     .hero-header-left {
	width: 70%
     }
     
     .hero-header-right {
	width: 30%;
    text-align: right;
}

     
     .billede {
    	border-left: 0px
}
 }

@media (hover: none) {
  a:hover {
    background: none;
    color: inherit;
    text-decoration: none;
  }
}