:root {
    --orange-primary: #febb5e;
    --orange-secondary: #dd9551;
}


/*Dont display the scroll bar*/
html::-webkit-scrollbar {
    display: none;
    /*Chrome and Opera*/
}
html {
    -ms-overflow-style: none;
    /* IE and Edge */
    scrollbar-width: none;
    /* Firefox */
}

* {
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;

    /* scroll behavior when auto scrolling*/
    scroll-behavior: smooth;
    scroll-margin-top: 35vh;
}

body {
    color: #333;
}

main {
    max-width: 70%;
    margin: 0 auto;
    padding: 20px;
}

.hidden {
    display: none;
}

h2 {
    text-align: center;
    padding: 0 10px 10px 10px;
}

/*Character stuff*/

.character-card {
    display: flex;
    align-items: flex-start;
    margin-bottom: 20px;
    width: 80%;
}

.character-card:nth-child(odd) {
    flex-direction: row-reverse;
    text-align: right;
    margin-left: auto;
}

.character-card img {
    max-width: 250px;
    margin-right: 20px;
}

.character-card:nth-child(odd) img {
    margin-right: 0;
    margin-left: 20px;
}


/* WORLD PAGE */

.world-page-background {
    background-image:
        linear-gradient(to bottom,
        white 0vh,
        rgba(255, 255, 255, 0.4) 30vh,
        rgba(255, 255, 255, 0.4) 90vh,
        white 120vh),
        url("/images/map-of-lysies.webp");

    background-size: 100%;
    background-position: center 300px;
    background-repeat: no-repeat;
    background-attachment: scroll;
}

/* CHARACTER PAGE BACKGROUND*/

.character-page-background {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}

.character-page-background > div {
    flex: 1;
    min-height: 800px;
    min-width: 800px;
    margin-top: 100px;
    margin-right: auto;

    background-size: contain;
    background-repeat: no-repeat;
    background-position: left;

    mask-image: radial-gradient(
        circle at 5% center ,
        rgba(0,0,0,0.5) 350px,
        transparent 400px
    );
}
.character-page-background > div:nth-child(odd) {
    background-position: right center;
    margin-right: 0;
    margin-left: auto;

    mask-image: radial-gradient(
        circle at 95% center,
         rgba(0,0,0,0.5) 350px,
        transparent 400px
    );
}

/* Alfred image */
.character-page-background > div:nth-child(4) {
    background-position: left -120px center;
}

.character-page-background > div:nth-child(5) {
    background-position: right -380px center;
}

.character-page-background > div:nth-child(6) {
    background-position: left -290px center;
}


body > header {
    position: relative;
    z-index: 10;
}


body > main,
body > footer,
body > nav {
    position: relative;
    z-index: 1;
}


/* HOME PAGE */
.welcome-section {
    position: relative;
    overflow: hidden;

    text-align: left;
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
    border-radius: 10px;
    margin-top: 10px;
    padding: 40px;
    min-height: 600px;

    background-image:
        linear-gradient(
            to right,
            white 0%,
            white 30%,
            transparent 60%
        ),
        url("/images/banner-image-4.webp");

    background-size:
        100% 100%,
        auto 1200px;

    background-position:
        center,
        right -250px top 20%;

    background-repeat: no-repeat;
}

.welcome-section::before {
    content: "";
    position: absolute;

    top: var(--decoration-top, 50px);
    left: var(--decoration-left, -120px);
    width: var(--decoration-width, 600px);
    height: var(--decoration-height, 600px);

    background-image: var(
        --decoration-image,
        url("/images/assets/Fall-Leaves.png")
    );

    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;

    opacity: 0.2;
    transform-origin: var(--decoration-origin, center);
    transform: rotate(var(--decoration-rotation, -90deg));
    transition: all 2s ease;

    pointer-events: none;
}

.welcome-section:hover::before {
    opacity: 0.7;
    transform: rotate(var(--decoration-rotation-end, -100deg)) scale(1.1) translate(-20px, 20px);
}

.welcome-section > * {
    position: relative;
    z-index: 1;
}

.welcome-section h2{
    font-size: 40px;
    text-align: left;
    margin: 0;
    padding: 0;
}
.welcome-section h3{
    text-align: left;
    margin: 0;
    padding: 0;
}

.welcome-section p {
    position: relative;
    width: 30%;
    padding-bottom: 10px;
    line-height: 1.8;
}

.welcome-section:hover .rotating-background::before {
    transform: rotate(-95deg);
}
/*EXPLORE CARDS*/

.explore-section {
    width: 100%;
    display: flex;
    gap: 20px;
}

.explore-section-card {
    flex: 1;
    min-width: 0;
    height: 700px;

    display: flex;
    flex-direction: column;

    margin-top: 30px;
    border-radius: 15px;
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
    overflow: hidden;
}

.explore-section-img {
    position: relative;
    height: 70%;
    width: 100%;
    overflow: hidden;
}

.explore-section-img::before {
    content: "";
    position: absolute;
    inset: 0;

    background-image: inherit;
    background-size: cover;
    background-position: inherit;
    background-repeat: no-repeat;

    transition: transform 0.3s ease;
}

.explore-section-card:hover .explore-section-img::before {
    transform: scale(1.05);
}


.explore-section-text {
    box-sizing: border-box;
    height: 30%;
    width: 100%;
    padding: 20px;

    background-color: white;
    text-align: center;
}
.explore-section-text div{
    margin: auto;
    padding: 30px;
}

.meet-the-cast-container{
    width: 100%;
    display: flex;
    flex-direction: column;
}

.meet-the-cast-carousel {
    width: 100%;
    display: flex;
    gap: 20px;
    text-align: center;
}

.meet-the-cast-header {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    margin-top: 10px;
    margin-bottom: 10px;
}

.meet-the-cast-header h2{
    padding: 0;
    margin: 0;
}

.cast-card div {
    width: 200px;
    height: 200px;
    border-radius: 100px;
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
    transition: all 0.2s ease;
    cursor: pointer;
}

.cast-card div:hover {
    transform: scale(1.05);
}

/* Katharina */
.cast-card:nth-child(1) div {
    background-image: url(images/characters/katharina-2.webp);
    background-size: 140%;
    background-position: top 10% left 45%;
}

/* Leopold */
.cast-card:nth-child(2) div {
    background-image: url(images/characters/leopold-2.webp);
    background-size: 350%;
    background-position: top 6% left 38%;
}

/* Deliah */
.cast-card:nth-child(3) div {
    background-image: url(images/characters/deliah-3.webp);
    background-size: 250%;
    background-position: top 10% left 25%;
}

/* Alfred */
.cast-card:nth-child(4) div {
    background-image: url("/images/characters/alfred.webp");
    background-size: 110%;
    background-position: top 22% left 50%;
}

/* Sabuh */
.cast-card:nth-child(5) div {
    background-image: url("/images/characters/sabuh-2.webp");
    background-size: 280%;
    background-position: top 13% left 10%;
}

/* Lian */
.cast-card:nth-child(6) div {
    background-image: url("/images/characters/lian-2.webp");
    background-size: 200%;
    background-position: top 13% left 50%;
}

.cast-card {
    text-decoration: none;
    color: #333;
}


/* FORUM */
.forum-post {
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
    border-radius: 10px;
    margin: auto;
    margin-bottom: 20px;
    padding: 40px;
    width: 60%;
    background-color: white;
}

.login-box,
.main-section {
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
    border-radius: 10px;
    margin-top: 10px;
    padding: 40px;
    background-color: white;
}

.bordered {
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
    border-radius: 10px;
}

.sub-section{
    border-radius: 10px;
    margin-top: 10px;
    padding: 40px;
    transition: ease 0.5s all;
}
.sub-section:hover {
    transform: scale(1.01);
}

.sub-section p {
    position: absolute;
    top: 30%;
    left: 0;
    padding: 10px;
    display: none;
    text-shadow: 0 0 2px white,
        0 0 6px white,
        0 0 12px white,
        0 0 20px white;

}
.sub-section:hover p {
    display: block;
}
.sub-section img {
    position: relative;
    transition: ease 0.5s all;
}

.sub-section:hover img {
    transform: scale(0.9);
    opacity: 0.2;
    z-index: -1;
}


.main-section h3 {
    padding: 10px; 
    font-style: italic;  
}

.forum-post h3, .forum-comment-section h4 {
    margin-bottom: 10px;
}

.forum-post div.date, .forum-comment-section div.date {
    font-size: 12px;
    color: rgba(0, 0, 0, 0.5);
    margin-bottom: 15px;
}

.forum-post p,
.main-section p {
    padding-bottom: 10px;
    line-height: 1.8;
}

.forum-comment-section {
    display: none;
    box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.2);
    border-radius: 10px;
    margin-top: 10px;
    padding: 20px;
}

.show>.forum-comment-section {
    display: block;
}

.forum-comment-section form {
    font-size: 12px;
    color: rgba(0, 0, 0, 0.5);
    text-align: right;
}

.forum-comment-section form textarea {
    width: 98%;
    border: none;
    resize: none;
    padding: max(4px, 1%);
    padding-left: 1%;
    padding-right: 1%;
    border-radius: 5px;
    background-color: rgba(0, 0, 0, 0.1);
}


.forum-comment-section form button {
    border: none;
    border-radius: 4px;
    padding: 4px;
    cursor: pointer;
    color: rgba(0, 0, 0, 0.5);
    background-color: rgba(0, 0, 0, 0.1);
}

.forum-comment-section form button:hover {
    background-color: rgba(0, 0, 0, 0.2);
}

.likes button,
.login-box button
{
    font-size: 12px;
    border: none;
    border-radius: 4px;
    padding: 4px;
    cursor: pointer;
    background-color: transparent;
}

.likes {
    text-align: right;
}

.likes button:hover,
.login-box button:hover {
    background-color: rgba(0, 0, 0, 0.2);
}

.likes button:active,
.login-box button:active,
.login-box input[type="submit"]:active,
.login-box input[type="reset"]:active {
    background-color: rgba(0, 0, 0, 0.3);
}

.liked>.likes button {
    color: red;
}

.forum-comment-section hr {
    margin: auto;
    margin-bottom: 20px;
    width: 100%;
    border-color: rgba(0, 0, 0, 0.2);
}


.fancy-lable {
    position: relative;
    font-size: 16px;
    margin: auto;
    width: 60%;
    margin-top: 10px;
}

.fancy-lable input {
    box-sizing: border-box;
    width: 100%;
    height: 60px;
    padding: 24px 16px 8px;
    border: 1px solid rgba(0, 0, 0, 0.2);
    border-radius: 10px;
}

.fancy-lable label {
    position: absolute;
    top: 50%;
    left: 16px;
    color: rgba(0, 0, 0, 0.5);
    pointer-events: none;

    transform: translateY(-50%);
    transition: all 0.2s ease;
}

.fancy-lable button {
    background-color: transparent;
    padding: 0px;
    border: none;
    border-radius: 50px;
    font-size: 30px;
    position: absolute;
    right: 10px;
}

.fancy-lable button:hover {
    transform: scale(1.05);
    transition: transform 0.3s ease;
    cursor: pointer;
}

.fancy-lable input:focus+label,
.fancy-lable input:not(:placeholder-shown)+label {
    top: 12px;
    transform: translateY(0);
    font-size: 12px;
}

.fancy-lable input::placeholder {
    color: transparent;
}

.fancy-lable input:focus::placeholder {
    color: rgba(0, 0, 0, 0.4);
}


/* MAP MAGNIFIER */

.magnifier {
    position: relative;
    display: inline-block;
    cursor: none;
}

.magnifier img {
    display: block;
    max-width: 100%;
}

.magnifier-glass {
    position: absolute;
    width: 250px;
    height: 250px;

    border: 3px solid white;
    border-radius: 50%;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);

    pointer-events: none;
    /* should be invisible until the mouseover event */
    display: none;

    background-repeat: no-repeat;
}

.magnifier-area-of-interest {
    position: absolute;
    width: 6%;
    height: 7.5%;
    border-radius: 100%;
    /* border: red 1px solid; */
}

.magnifier-area-of-interest:hover {
    cursor: pointer;
}

/* SPECIAL FONT STUFF */
@font-face {
    font-family: 'Base12';
    src: url('/fonts/Otherworldbase12-Regular.ttf') format('truetype');
}
@font-face {
    font-family: 'Lysian';
    src: url('/fonts/Comicfontotherworld-Regular.ttf') format('truetype');
}

.lysian {
    font-family: 'Lysian', serif;
    font-size: 22px;
}

.base12 {
    font-family: 'Base12', serif;
    font-size: 30px;
}


/* GENERAL */

.container{
    position: relative;
}

.carousel {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    text-align: center;
    gap: 10px;
}

.column {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    text-align: center;
    gap: 10px; 
}

.column > * {
    flex: 1;
    min-width: 0;
}

.carousel > * {
    flex: 1;
    min-width: 0;
}

.positioned {
    position: absolute;
    bottom: 10%;
    left: 10%;
}

.positioned-bottom-left {
    position: absolute;
    bottom: 5%;
    left: 5%;
}

.positioned-horizon-left {
    position: absolute;
    bottom: 45%;
    left: 2%;
}

.positioned-horizon-right {
    position: absolute;
    bottom: 45%;
    right: 2%;
}


.image-gallery {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 20px;
    margin-top: 20px;
    margin-bottom: 20px;
}

.image-gallery img {
    max-width: 100%;
    max-height: 270px;
}

.image-gallery img:hover, .character-card img:hover  {
    transform: scale(1.05);
    transition: transform 0.3s ease;
    cursor: pointer;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
}