/*
Made with Gemini.
Some comments by me and specific by Gemini.
I changed some style names and values as per my styling.
*/

/* Loads Bitsu font file. Typeface designed by me. */
@font-face {
    font-family: 'Bitsu';
    src: url('../fonts/Bitsu_Variable-Regular.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}

/* Loads Inter font file. */
@font-face {
    font-family: 'Inter';
    src: url('../fonts/Inter_18pt-Light.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

/* Added last minute in class. Styles scrollbar for chrome and other browsers. */
html {
    scrollbar-width: thin;
    background-color: transparent;
}

/* Base style for the entire website. */
body {
    padding: 0; /* Removes default padding. */
    margin: 0; /* Removes default margin. */
    background-color: #000; /* Sets the background color to black. */
    color: #fff; /* Sets the text color to white. */
    font-family: 'Bitsu', sans-serif; /* Sets the default font to 'Bitsu'. */
    scrollbar-width: thin; /* Styles the scrollbar for Firefox. */
    scrollbar-color: rgb(200, 200, 200) transparent; /* Styles the scrollbar for Firefox. */
}


/* Custom cursor styling. */
#custom-cursor {
    position: fixed; /* Keeps the cursor fixed on the screen. */
    z-index: 9999; /* Ensures the cursor is on top of all other elements. */
    pointer-events: none; /* Prevents the cursor from interfering with mouse events. */
    font-size: 24px;
    color: white;
}

/* This rule styles the p5.js canvas. */
#bg-canvas {
    position: fixed; /* Keeps the canvas fixed in the background. */
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh; /* Makes the canvas cover the entire viewport. */
    z-index: -1; /* Places the canvas behind all other content. */
}

/* This rule styles the header. */
header {
    height: 5vh; /* Sets the height of the header. */
    display: flex; /* Uses flexbox for layout. */
    justify-content: space-between; /* Distributes the items evenly with space between them. */
    align-items: center; /* Centers the items vertically. */
    padding: 0 2vw; /* Adds padding to the left and right. */
    position: fixed; /* Keeps the header fixed at the top. */
    top: 0;
    width: 96%;
    background-color: transparent; /* Makes the header background transparent. */
    z-index: 2; /* Places the header above the main content. */
}

/* These rules style the text in the header. */
.header-text-left,
.header-text-right {
    font-size: calc(0.5 * 5vh); /* Sets the font size relative to the viewport height. */
}

/* This rule styles the main content area. */
main {
    position: relative; /* Allows for absolute positioning of child elements. */
    z-index: 1; /* Places the main content below the header. */
    padding-top: 5vh; /* Adds padding to the top to avoid overlapping with the header. */
    padding-bottom: 2vh; /* Adds padding to the bottom to avoid overlapping with the footer. */
}

/* This rule styles the horizontal divisions. */
.horizontal-div {
    height: auto;
    background-color: rgba(0, 0, 0, 0.8); /* Sets a semi-transparent black background. */
    padding: 2vh 2vw;
    display: flex;
    align-items: center;
    position: relative;
}

/* First blank division that shows interactive background. */
.interactive-screen {
    height: 90vh;
    background-color: transparent;
}


/* Corner text elements. */
.corner-text {
    position: absolute; /* Positions the text relative to the parent div. */
    font-family: 'Inter', sans-serif;
    font-size: 1vh;
}

/* Corner four multiplication symbol styling */
.top-left {
    top: 2vh;
    left: 2vw;
}

.top-right {
    top: 2vh;
    right: 2vw;
}

.bottom-left {
    bottom: 2vh;
    left: 2vw;
}

.bottom-right {
    bottom: 2vh;
    right: 2vw;
}

/* Text style for top centre text that helps tell one interaction element. */
.center-interaction-text {
    position: absolute;
    font-family: 'Inter', sans-serif;
    top: 2vh;
    left: 50%;
    transform: translateX(-50%); /* Centers the text horizontally. */
    font-size: 1.5vh;
}

/* Text style for bottom centre text that asks to scroll down. */
.center-scroll-text {
    position: absolute;
    font-family: 'Inter', sans-serif;
    bottom: 2vh;
    left: 50%;
    transform: translateX(-50%); /* Centers the text horizontally. */
    font-size: 1.5vh;
}


/* Quote box styling*/
.quote-div {
    height: 64vh;
}

/* Quote text styling */
.quote {
    font-family: 'Bitsu', sans-serif;
    font-size: 3.5vh;
    text-align: center;
    width: 100%;
}

/* All images styling*/
.image-div {
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

/* Left aligned images. Had to solve it manually. I wrote this part. */
.image-left {
    width: 100%;
    height: auto;
    aspect-ratio: 16/10;
    object-fit: cover;
    margin-right: auto;
    border: 1px solid rgb(200, 200, 200);
}

/* right aligned images. Had to solve it manually. I wrote this part. */
.image-right {
    width: 100%;
    height: auto;
    aspect-ratio: 16/10;
    object-fit: cover;
    margin-left: auto;
    border: 1px solid rgb(200, 200, 200);
}

/* square image. Had to solve it manually. I wrote this part. */
.image-square {
    width: 100%;
    aspect-ratio: 1/1;
    object-fit: cover;
    margin-right: auto;
    border: 1px solid rgb(200, 200, 200);
}

/* This rule styles the image gallery. */
.image-gallery {
    display: flex;
    flex-wrap: wrap; /* Allows the items to wrap to the next line. */
    justify-content: space-around; /* Distributes the items evenly with space around them. */
    padding: 2vh 2vw;
    background-color: rgba(0, 0, 0, 0.8);
}

/* This rule styles the items in the gallery. */
.gallery-item {
    flex-basis: 23%; /* Sets the initial size of the items. */
    aspect-ratio: 1 / 1; /* Maintains a square aspect ratio. */
    margin-bottom: 10px;
}

/* This rule styles the images in the gallery. */
.gallery-image {
    height: 100%;
    width: 100%;
    object-fit: contain; /* Ensures the entire image is visible without being cropped. */
    border: 1px solid rgb(200, 200, 200);
}



/* Last horizontal section style */
.creative-writing-div {
    height: auto;
    padding: 2vh 2vw;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Text box inside the horizontal section */
.text-box {
    width: 50vw;
    background-color: rgba(0, 0, 0, 0.8);
    padding: 2vh 2vw;
    border: 1px solid rgb(200, 200, 200);
    transition: width 0.5s ease-in-out;
}

/* Text style for week 4 creative writing */
.my-writing {
    font-family: 'Inter', sans-serif;
    font-size: 2vh;
    text-align: left;
}


/* Footer stylling */
footer {
    height: 2vh;
    background-color: transparent;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 2vw;
    position: fixed;
    bottom: 0; /* Sticks the footer to the bottom. */
    width: 96%;
    z-index: 2;
}

/* Go back up button text */
.footer-left {
    font-size: calc(0.9 * 2vh);
}

/* Right side footer made in gemini comment */
.footer-right {
    font-size: calc(0.9 * 2vh);
    margin-left: auto; /* Pushes the text to right don't know why it says left and auto */
}

/* This rule styles the "go to top" button. */
#go-top {
    display: none; /* Hides the button by default. */
    cursor: pointer;
    color: rgb(255, 135, 195);
}

/* This rule shows the "go to top" button when the "show" class is added. */
#go-top.show {
    display: block;
}

/* gemini showed me this and I used it to style other images and text box. */
/* Changes with screen size to make it look responsive. */

@media (min-width: 1081px) {
    .image-left,
    .image-right {
        width: 60%;
    }

    .image-square {
        width: 40%;
    }
    
}

@media (max-width: 1080px) {
    .image-left,
    .image-right,
    .image-square {
        width: 100%;
    }

    .gallery-item {
        flex-basis: 46%;
    }

    .text-box {
        width: 96%;
    }
}


@media (max-width: 798px) {
    .gallery-item {
        flex-basis: 100%;
    }
}