:root {
    --rice-h: #FFFFFF;
    --rice-s: #FFF4DE;
    --sesame-h: #FFE8BB;
    --sesame-s: #FFD389;
    --salmon-h: #FFAF4A;
    --salmon-s: #FF524F;
    --nori-h: #005768;
    --nori-s: #1A2F33;
    --soy-sauce: #02090A;
    --rice-s-transparent: rgba(255, 244, 222, 0); /* Transparent version of rice-s */
}

.message-new-thing{
    display: none;
}

* {
    margin: 0;
    padding: 0;
    border: 0;
    transition: all 0.3s ease;
}

body {
    background-color: var(--rice-s);
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100svh;

    font-family: "Ubuntu", sans-serif;
    font-weight: 400;
    font-style: normal;
    overflow: hidden;
}

h1{
    font-family: "Jost", sans-serif;
    font-optical-sizing: auto;
    font-weight: 900;
    font-style: normal;
}

h2{
    font-family: "Lexend", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
}

h3{
    font-family: "Lexend", sans-serif;
    font-optical-sizing: auto;
    font-weight: 200;
    font-style: normal;
}

p{
    font-family: "Ubuntu", sans-serif;
    font-weight: 400;
    font-style: normal;
}

.main {
    display: flex;
    width: 100%;
    height: 100%;
}

.gradient-left, .gradient-right {
    flex: 2; /* Two-thirds of the remaining space */
}

.parent-content {
    aspect-ratio: 1080/960;
    display: flex;
    flex-direction: column;
    height: fill;
    /* background-color: green; */
}

.header {
    height: 15%;
    width: 100%;
    /* background-color: blue; */
}

.content {
    position: relative; 
    height: 85%;
    width: 100%;
    /* aspect-ratio: 918/960; */
    /* height: fill; */
    /* background-color: var(--nori-s); */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 0px;
    box-sizing: border-box;
    flex-shrink: 0;
    /* background-color: red; */
}

/* Left gradient background */
.gradient-left {
    background: linear-gradient(
        to right,
        var(--nori-s) 0%,
        var(--nori-h) 11.11%,
        var(--salmon-s) 22.22%,
        var(--salmon-h) 33.33%,
        var(--sesame-s) 44.45%,
        var(--sesame-h) 55.55%,
        var(--rice-s-transparent) 66.67%
    );
}

/* Right gradient background */
.gradient-right {
    background: linear-gradient(
        to left, /* Reversed direction for symmetry */
        var(--nori-s) 0%,
        var(--nori-h) 11.11%,
        var(--salmon-s) 22.22%,
        var(--salmon-h) 33.33%,
        var(--sesame-s) 44.45%,
        var(--sesame-h) 55.55%,
        var(--rice-s-transparent) 66.67%
    );
}

.title {
    position: absolute;
    padding: 0;
    top: 8%; /* Adjust as needed */
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 12svh; /* Responsive font size */
    white-space: nowrap; /* Prevents title from breaking into multiple lines */
    background: linear-gradient(to top, var(--salmon-s), var(--salmon-h));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Footer styles */
.footer, .message-new-thing{
    width: 100%;
    background-color: var(--soy-sauce);
    color: white;
    text-align: center;
    padding: 10px; /* Adjust height as needed */
    box-sizing: border-box;
    z-index: 3;
    animation: 0s;
}

.container {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    height: 100%;
}

.footer p {
    margin: 0;
}

.table{
    /* position: absolute; */
    height: 32svh; /* Adjust size as needed */
    width: auto;

    /* left: 50%; */
    /* transform: translate(-50%, 0%); */
    z-index: 0;
}

.shelf{
    height: 3.5svh; /* Adjust size as needed */
    width: auto;
    /* transform: translate(-50%, 0%); */
    z-index: 0;
}

.content a, .social-links, .table-group, .shelf-group{
    position: absolute;
    text-decoration: none;
    text-align: center; /* Center the text horizontally */
    transition: transform 0.3s ease;
    display: inline-block; 
}

.table-group {
    /* background-color: red; */
    bottom: 12svh;
    transition: none;
    width: fit-content;
    height: fit-content;
    display: block;
    position: absolute; /* Ensure it does not overlap other elements */
    transform: translateY(50%);
    justify-content: space-between;
}

.on-table, .on-shelf {
    /* background-color: green; */
    display: flex;
    justify-content: space-around; /* Ensures equal space around each element */
    gap: -40%;
    align-items: flex-end;
}   

.table-group a, .shelf-group a {
    display: inline-block; /* Ensures proper alignment in the flex container */
    position: relative;
    bottom: 0;
    margin: 0 -10%;
}

.shelf-group {
    /* background-color: blue; */
    transition: none;
    width: fit-content;
    height: fit-content;
    display: block;
    position: absolute; /* Ensure it does not overlap other elements */
    top: 30%;
    left: 10%;
}

.content a img{
    position: relative; 
    width: auto; /* Set the width of the image to 100% of its container */
    z-index: 2; /* Ensure it is on top of the text */
    display: block; 
}

.content a h2{
    font-size: 2.25svh;
    color: var(--nori-s);
    position: absolute;
    bottom: 0;
    width: 100%;
    margin: 0;
    transform: translate(0%, -200%); /* Move it out of view */
    transition: transform 0.3s ease; /* Smooth transition */
    z-index: 1; /* Ensure it is behind the image */
}

.bottom-scroll:hover h2 {
    transform: translateY(125%); /* Move text into view on hover */
}
.content a:hover {
    transform: scale(1.1) rotate(2deg); /* Scale up and rotate on hover */
}

.blog-link {
    top: 10%;
    /* bottom: 0%; */
    left: 40%;
}

.blog-link img {
    height: 21svh; /* Ensure the aspect ratio is maintained */
}

.tools-link {
    /* bottom: 20svh; */
    /* left: 15%; */
}

.tools-link img {
    height: 12svh; /* Ensure the aspect ratio is maintained */
}

.games-link {
    bottom: 20svh;
    /* left: 25%; */
}

.games-link img {
    height: 15svh; /* Ensure the aspect ratio is maintained */
}

.other-link {
    bottom: 20svh;
    /* right: 25%; */
}

.other-link img {
    height: 17svh; /* Ensure the aspect ratio is maintained */
}

.portrait-link {
    top: 20%;
    right: 15%;
}

.portrait-link img {
    height: 14svh; /* Ensure the aspect ratio is maintained */
}

.left-scroll:hover h2 {
    transform: translate(-60%, -200%); /* Move text into view on hover */
}
.right-scroll:hover h2 {
    transform: translate(80%, -200%); /* Move text into view on hover */
}

.social-links {
    display: flex;
    justify-content: space-around;
    width: 25%; /* Adjust as needed */
    right: 15%;
    top: 5%;
    /* background-color: #FF524F; */
}

.social-links a {
    position: relative;
    display: inline-block;
    /* background-color: #005768; */
}

.social-links img {
    height: 4svh; /* Ensure the aspect ratio is maintained */
}

@media (max-aspect-ratio: 9/10) {
    .gradient-left, .gradient-right{
        display: none;
    }
    .header{
        background: linear-gradient(
            to bottom,
            var(--nori-s) 0%,
            var(--nori-h) 17%,
            var(--salmon-s) 33%,
            var(--salmon-h) 50%,
            var(--rice-s-transparent) 100%
        );

        height: 14%; 
    }

    .title{
        font-family: "Outfit", sans-serif;
        font-optical-sizing: auto;
        font-weight: 200;
        font-style: normal;
        background: none;
        -webkit-background-clip: text; /* Ensure background-clip is set to text */
        -webkit-text-fill-color: var(--rice-h); /* Override text fill color */
        color: var(--rice-h); /* Set the text color */
        /* height: 75%; */
        font-size: 2.5svh;
        letter-spacing: 24px;
        top: 5%;
    }

    .content{
        width: fill;
        height: fill;
        flex-grow: 1;
    }

    .blog-link {
        top: calc(12svh + 4vw);
        /* bottom: 0%; */
        left: calc(55vw - 15svh);
    }

    .tools-link img {
        height: calc(10vw + 4svh);
    }

    .games-link img {
        height: 18vw;
    }

    .other-link img {
        height: 20vw;
    }
    
    .portrait-link {
        top: calc(60svh - 50vw);
        right: 15%;
    }

    .table{ 
        height: 34vw;
    }

    .table-group {
        bottom: 10vw;
    }

    .shelf {
        height: calc(2vw + 2svh);
    }

    .shelf-group {
        top: calc(70svh - 45vw);
        left: 6svh;
    }

    .social-links {
        width: 30svh; /* Adjust as needed */
        right: auto;
        top: 5%;
        /* background-color: #FF524F; */
    }

    .left-scroll:hover h2 {
        transform: translate(0%, -19vw); /* Move text into view on hover */
    }
    .right-scroll:hover h2 {
        transform: translate(0%, -21vw); /* Move text into view on hover */
    }
}

@media (max-aspect-ratio: 1/2) {

    .header{

    }

    .title{
        letter-spacing: 12px;
    }

    .content{
        aspect-ratio: 500/860;
        width: 100%;
        height: auto;
    }

    .content{
        width: fill;
        height: fill;
        flex-grow: 1;
    }

    .blog-link {
        top: 30%;
        /* bottom: 0%; */
        left: 44vw;
    }

    .tools-link img {
        height: 18vw;
    }

    .blog-link img {
        height: 33vw;
    }

    .games-link img {
        height: 22vw;
    }

    .other-link img {
        height: 23vw;
    }

    .portrait-link img {
        height: 21vw;
    }
    
    .portrait-link {
        top: 45%;
        right: 10%;
    }

    .table{ 
        height: 34vw;
    }

    .table-group {
        bottom: 28vw;
    }

    .shelf {
        height: 5vw;
    }

    .shelf-group {
        top: 40svh;
        left: 5vw;
    }

    .social-links {
        width: 65vw; /* Adjust as needed */
        right: auto;
        top: 15%;
        /* background-color: #FF524F; */
    }

    .social-links>a {
        height: 7.5vw; /* Adjust as needed */
        /* background-color: #FF524F; */
    }

    .footer {
        display: none;
    }
    
    .message-new-thing{
        position: absolute;
        top: 2svh;
        display: flex; 
        width: 82vw;
        aspect-ratio: 520/120;
        align-items: center; 
    }

    .message-new-thing>p {
        text-align: center;
        width: 100%;
        margin: 0;
    }

    .left-scroll:hover h2 {
        transform: translate(0%, -23vw); /* Move text into view on hover */
    }
    .right-scroll:hover h2 {
        transform: translate(0%, -24vw); /* Move text into view on hover */
    }
}

.footer a{
    color: var(--salmon-h);
    cursor: pointer;
    text-decoration: underline;
}