/* #region PAGE */

html,
body {
    width: 100%;
    height: 100%;
    margin: 0;

    background: black;
}

body {
    overflow: hidden;
}


/* #endregion */


/* #region RIGHT BRAIN PAGE */

.brain-page {
    display: flex;
    justify-content: center;
    align-items: center;

    width: 100vw;
    height: 100vh;

    background: black;
}


/* Holds the brain + all overlays together */

.brain-container {
    position: relative;

    width: min(1000px, 92vw);
}


/* Main white brain */

.brain-base {
    display: block;

    width: 100%;
    height: auto;
}


/* #endregion */


/* #region COLORED OVERLAYS */

.brain-overlay {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;

    width: 100%;
    height: 100%;

    opacity: 0;

    pointer-events: none;

    transition: opacity 0.3s ease;
}


/* FRONTAL */

.brain-container:has(.frontal-hotspot:hover) .frontal-overlay {
    opacity: 1;
}


/* PARIETAL */

.brain-container:has(.parietal-hotspot:hover) .parietal-overlay {
    opacity: 1;
}


/* TEMPORAL */

.brain-container:has(.temporal-hotspot:hover) .temporal-overlay {
    opacity: 1;
}


/* OCCIPITAL */

.brain-container:has(.occipital-hotspot:hover) .occipital-overlay {
    opacity: 1;
}


/* THALAMUS */

.brain-container:has(.thal-hotspot:hover) .thal-overlay {
    opacity: 1;
}


/* HYPOTHALAMUS */

.brain-container:has(.hypothal-hotspot:hover) .hypothal-overlay {
    opacity: 1;
}

/* #endregion */

/* #region HOTSPOTS */

.brain-hotspot {
    position: absolute;
    z-index: 10;

    display: block;

    cursor: pointer;
}


/* FRONTAL LOBE */

.frontal-hotspot {
    top: 15%;
    left: 7%;

    width: 30%;
    height: 30%;
}


/* PARIETAL LOBE */

.parietal-hotspot {
    top: 5%;
    left: 49%;

    width: 25%;
    height: 46%;
}


/* OCCIPITAL LOBE */

.occipital-hotspot {
    top: 20%;
    left: 70%;

    width: 20%;
    height: 43%;
}


/* TEMPORAL LOBE */

.temporal-hotspot {
    top: 55%;
    left: 28%;

    width: 18%;
    height: 22%;
}


/* THALAMUS */

.thal-hotspot {
    top: 41%;
    left: 42%;

    width: 12%;
    height: 10%;
}


/* HYPOTHALAMUS */

.hypothal-hotspot {
    top: 49%;
    left: 37%;

    width: 8%;
    height: 10%;
}


/* #endregion */