/* Custom fonts */
@font-face {
    font-family: 'TC Tallow Pen';
    src: url('Fonts/TC Tallow Pen Round Regular.otf');
    src: url('Fonts/TC Tallow Pen Round Regular') format('woff'), /* Modern Browsers */
	     url('Fonts/TC Tallow Pen Round Regular.ttf')  format('truetype'), /* Safari, Android, iOS */
	     url('Fonts/TC Tallow Pen Round Regular.svg') format('svg'); /* Legacy iOS */
}

@font-face {
    font-family: 'TC Block Party';
    src: url('Fonts/TC Block Party Bold.otf');
    src: url('Fonts/TC Block Party Bold.woff') format('woff'), /* Modern Browsers */
	     url('Fonts/TC Block Party Bold.ttf')  format('truetype'), /* Safari, Android, iOS */
	     url('Fonts/TC Block Party Bold.svg') format('svg'); /* Legacy iOS */
}

/* Page styling */
h1 {
    font-size: 4rem;
    font-family: 'TC Block Party';
    text-shadow: 1px 1px 2px black;
}

h2 {
    font-family:'TC Tallow Pen';
    font-size: 3rem;
}

h3 {
    font-family:'TC Tallow Pen';
    font-size: 2rem;
}

/* Unvisited link */
a:link {
    color:black
}

/* Visited link */
a:visited {
    color: hsl(212, 70%, 40%);
}

/* Mouse over link */
a:hover {
    color: hsl(212, 70%, 40%);
}

/* Selected link */
a:active {
    color: hsl(212, 70%, 40%);
}

body {
    margin: 0;
    font-family: sans-serif;
    background: hsl(346 70 40%);
}

.bg-red {
    background: hsl(346 70 40%);
}

.bg-cream {
    background: hsl(45, 28.8%, 87.4%);
}

.text-white {
    color: white
}

.rounded {
    border-radius: 50%;
}

/* Expandable Containers */
.expandable-container {
    width: 100%;
    overflow: hidden;
    transition: max-height 0.7s ease;
    position: relative;
    cursor: pointer;
}

.header {
    position: relative;
    background-attachment: local;
    background-position-y: 40%;
    background-size: cover;
    height: 200px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 20px;
    color: white;
}

.header h1 {
    margin: 0;
    text-align: left;
    font-size: 4rem;
    font-family: 'TC Block Party';
    text-shadow: 1px 1px 2px black;
    max-width: 80vh;
}

.header p {
    margin: 5px 0 0;
    text-align: left;
    font-size: 1.5rem;
    font-family: 'TC Tallow Pen';
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}

.content {
    padding: 20px;
    opacity: 0;
    transform: translateY(-10px);
    transition: opacity 0.5s ease, transform 0.5s ease;
}

.content h1 {
    margin: 0;
    color:#fff;
    text-align: left;
    font-size: 4rem;
    font-family: 'TC Block Party';
    text-shadow: 1px 1px 2px black;
    max-width: 80vh;
    padding-left: 20px;
}

.content h3 {
    margin: 5px 0 0;
    text-align: left;
    font-size: 1.5rem;
    font-family: 'TC Tallow Pen';
}

.content h4 {
    margin: 5px 0 0;
    text-align: left;
    font-size: 1.25rem;
    font-family: 'TC Tallow Pen';
}

.content p {
    margin: 5px 0 0;
    text-align: left;
    font-size: 1.25rem;
    font-family: 'Newsreader';
}

.content ul {
    margin: 5px 0 0;
    text-align: left;
    list-style-type: disc;
    font-size: 1.25rem;
    font-family: 'Newsreader';
}

.expanded .content {
    opacity: 1;
    transform: translateY(0);
}

.content .header-icon img {
    width: fit-content;
    height:4rem;
    margin-block-start: 0.67em;
    margin-block-end: 0.67em;
}

.content .header img {
    width: 100%;
    max-height: 300px;
    object-fit: cover;
    margin-bottom: 20px;
}

.content .main-carousel {
    width: 100%;
    height: 300px;
    max-height: 300px;
    margin-bottom: 20px;
}

.content .carousel-cell {
    width: fit-content;
    height: 300px;
    max-height: 300px;
    margin-bottom: 20px;
}

.content .carousel-cell img {
    width: fit-content;
    height: fit-content;
    max-height: 300px;
    margin-bottom: 20px;
}

.collapse-button {
    text-align: center;
    margin-top: 20px;
    font-size: 1.5rem;
    cursor: pointer;
    color: #333;
}

/* Smooth expand/collapse using max-height */
.collapsed {
    max-height: 220px;
}

.expanded {
    max-height: 2000px; /* adjust if needed */
}

.body h1 {
    margin: 5px 0 0;
    padding: 0px;
}

.body h3 {
    margin: 5px 0 0;
    text-align: center;
    font-size: 2rem;
    font-family: 'TC Tallow Pen';
}

.body h4 {
    margin: 5px 0 0;
    text-align: center;
    font-size: 1.25rem;
    font-family: 'TC Tallow Pen';
}

.body p {
    margin: 5px 0 0;
    text-align: justify;
    font-size: 1.25rem;
    font-family: 'Newsreader';
}

.body ul {
    margin: 5px 0 0;
    text-align: justify;
    list-style-type: disc;
    font-size: 1.25rem;
    font-family: 'Newsreader';
}

/* Scaling divs for different portrait and landscape behaviour */
.scaling-div {
    margin: auto;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;

}

/* Set max width as visually-pleasing column */
.scaling-div.landscape {
    max-width: 80vh;
    /* background: hsl(0, 100%, 50%);*/
}

.scaling-div.portrait {
    max-width: 80vh;
    /* background: hwb(169 0% 0%);*/
}

.scaling-div span {
    display: inline-block;
    padding: 20px;
}

/* Parallax scrolling behaviour */
.parallax-container {
    position: relative;
    height: 100vh;
    max-height: 150vw;
    overflow: hidden;
}

.parallax-layer {
    position: absolute;
    width: 100%;
    height: 100vh;
    align-items: center;
    justify-content: space-between;
    font-size: 3rem;
    will-change: transform;
    pointer-events: none;
}

.parallax-inner {
    padding:2.5vh;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: start;
    justify-content: center;
    text-align: center;
}

.flex-column {
    display: flex;
    flex-direction: column;     /* Stack items vertically */
    padding: 10vw;              /* Add space inside the container */
    gap: 10px;                  /* Optional: space between items */
}

/*
.parallax-layer:nth-child(1) { background: #ff0077; z-index: 1; }
.parallax-layer:nth-child(2) { background: #0099ff; z-index: 2; }
.parallax-layer:nth-child(3) { background: #22cc88; z-index: 3; }
*/

/* Section-specific overrides */

/* Extra padding for left-aligned text in overview */
.scaling-div h3 {
    text-align: left;
    vertical-align: middle;
    margin:auto;
}

.flex-horizontal {
    display: flex;
    flex-direction: row;
}

.align-center {
    display: flex;
    align-content: center;
    justify-content: center;
}

.flex-horizontal-icon {
    display: flex;
    width:60px;
    height:fit-content;
}

.flex-horizontal-entry {
    display: flex;
    width:fit-content;
    height:fit-content;
}

.flex-horizontal-image {
    display: flex;
    width:fit-content;
    height:fit-content;
}

.text-centered {
    margin:auto;
    text-align: center;
}

.rising-button {
    transform: translate(0px,-200px);
    transition: transform 0.7s ease;
}

/* Tween-in keyframes */
@keyframes reveal {
    from {
    opacity: 0;
    transform: translate(0px,100px);
    }
    to {
    opacity: 1;
    transform: translate(0px,0px);
    }
}

@keyframes reveal-overlap {
    from {
    opacity: 0;
    transform: translate(0px,-100px);
    }
    to {
    opacity: 1;
    transform: translate(0px,-200px);
    }
}

.revealing-image {
    animation: reveal 1s ease both;
    animation-timeline: view();
    animation-range: cover 0% cover 50%;
}

.revealing-animation {
    animation: reveal-overlap 1s ease both;
}