body, html {
    font-family: monospace;
    cursor: url('assets/pointing-finger.png'), auto;
    -webkit-hyphens: auto;
    hyphens: auto;
    -webkit-hyphenate-limit-before: 3; 
    -webkit-hyphenate-limit-after: 2;  
}

.center-line {
    border: none;
    border-top: 1.8px solid blue;
    width: 10200px; 
    position: absolute; 
    top: 50%; 
    transform: translateY(-50%);
}

.text-container {
    position: absolute;
    top: 50%;
    left: 270px; 
    transform: translate(-50%, -50%);
    text-align: left;
    z-index: 1; 
}

h1 {
    font-size: 16pt;
    font-weight: 400;
    font-style: normal;
    line-height: 2;    
}

p {
    font-size: 10pt;
    font-weight: 400;
    font-style: normal;
    line-height: 1.5;    
}

.image-container {
    text-align: center;
    position: absolute;
    width: 9500px;
    top: 50%;
    left: 710px;
    transform: translateY(-50%);
}

.image-container img {
    filter: grayscale(100%) drop-shadow(2px 2px 3px #c9c9c9); 
    transition: filter 0.3s ease; 
}

.image-container img:hover {
    filter: grayscale(0%);
    filter: drop-shadow(2px 2px 2px #c9c9c9);
}

.image-wrapper {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    margin-right: 460px;
}

.image-text1 {
    font-size: 10pt;
    font-weight: 400;
    font-style: normal;
    text-align: center;
    position: absolute;
    bottom: 350px; 
    left: 50%;
    transform: translateX(-50%);
    opacity: 0;
    z-index: 1;
}

.image-text2 {
    font-size: 10pt;
    font-weight: 400;
    font-style: normal;
    text-align: center;
    position: absolute;
    bottom: 320px;
    left: 50%;
    transform: translateX(-50%);
    opacity: 0;
    z-index: 1;
}

.image-text3 {
    font-size: 10pt;
    font-weight: 400;
    font-style: normal;
    text-align: center;
    position: absolute;
    bottom: 290px;
    left: 50%;
    transform: translateX(-50%);
    opacity: 0;
    z-index: 1;
}

/* .continued {
    font-size: 8pt;
    font-weight: 400;
    font-style: normal;
    text-align: center;
    bottom: 1px;
    position: absolute;
    transform: translateX(-50%);
    z-index: 1;
    margin-left: 60px;
} */

.story1,
.story2,
.story3,
.story4,
.story5,
.story6,
.story7,
.story8,
.story9,
.story10,
.story11,
.story12,
.story13,
.story14 {
    font-size: 9pt;
    font-weight: 400;
    font-style: normal;
    text-align: left;
    line-height: 1.4;
    position: absolute;
    top: 230px; 
    left: 52%;
    transform: translateX(-50%);
    opacity: 0;
    z-index: 1;
}

.image-text1,
.image-text2,
.image-text3,
.story1,
.story2,
.story3,
.story4,
.story5,
.story6,
.story7,
.story8,
.story9,
.story10,
.story11,
.story12,
.story14 {
    width: 425px;
}

.story13 {
    width: 485px;
}

.image-wrapper:hover .image-text1,
.image-wrapper:hover .image-text2,
.image-wrapper:hover .image-text3,
.image-wrapper:hover .story1,
.image-wrapper:hover .story2,
.image-wrapper:hover .story3,
.image-wrapper:hover .story4,
.image-wrapper:hover .story5,
.image-wrapper:hover .story6,
.image-wrapper:hover .story7,
.image-wrapper:hover .story8,
.image-wrapper:hover .story9,
.image-wrapper:hover .story10,
.image-wrapper:hover .story11,
.image-wrapper:hover .story12,
.image-wrapper:hover .story13,
.image-wrapper:hover .story14 {
    opacity: 1; 
}

/* .image-container img {
    cursor: url('assets/ear.png'), auto;
} */

.sdcard,
.cassette,
.cd-player,
.iriver-mp3,
.mickey-mp3,
.iphone3gs,
.galaxy-m,
.lg-slider,
.ipod-nano,
.ipod-touch,
.iphone6s,
.iphone8plus,
.iphonexsmax,
.iphone13promax {
    width: 100%;
    height: auto;
}

.old-earbuds {
    width: 8%;
    display: block;
    margin: 0 auto;
}

@media only screen and (max-width: 700px) {
    body {
        min-height: 4100px; 
    }

    h1 {
        font-size: 14pt;
        font-weight: 400;
        font-style: normal;
        line-height: 1.8;    
    }
    
    p {
        font-size: 8pt;
        font-weight: 400;
        font-style: normal;
    }

    .center-line {
        display: none;
    }

    .vertical-line {
        height: 11800px;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 6.5%; 
        border-left: 2px solid blue;
    }

    .text-container {
        width: 80%;
        left: 50%;
        top: 15%; 
        transform: translate(-50%, -50%);
        text-align: center;
    }

    .image-container {
        width: 70%;
        left: 50%;
        bottom: 75%; 
        transform: translate(-50%, -50%);
    }

    .image-wrapper {
        margin-right: 0;
        margin-bottom: 600px;
    }

    .image-text1,
    .image-text2,
    .image-text3 {
        text-align: center;
        width: 400px;
    }

    .story1,
    .story2,
    .story3,
    .story4,
    .story5,
    .story6,
    .story7,
    .story8,
    .story9,
    .story10,
    .story11,
    .story12,
    .story13,
    .story14 {
        text-align: center;
        width: 350px;
    }

    .image-text1 {
        font-size: 10pt;
        font-weight: 400;
        font-style: normal;
        text-align: center;
        position: absolute;
        bottom: 320px; 
        left: 53%;
        transform: translateX(-50%);
        opacity: 0;
        z-index: 1;
    }
    
    .image-text2 {
        font-size: 10pt;
        font-weight: 400;
        font-style: normal;
        text-align: center;
        position: absolute;
        bottom: 290px;
        left: 53%;
        transform: translateX(-50%);
        opacity: 0;
        z-index: 1;
    }

    .image-text3 {
        font-size: 10pt;
        font-weight: 400;
        font-style: normal;
        text-align: center;
        position: absolute;
        bottom: 260px;
        left: 53%;
        transform: translateX(-50%);
        opacity: 0;
        z-index: 1;
    }

    .continued {
        top: 50%;
    }

    .story1,
    .story2,
    .story3,
    .story4,
    .story5,
    .story6,
    .story7,
    .story8,
    .story9,
    .story10,
    .story11,
    .story12,
    .story13,
    .story14 {
        font-size: 8pt;
        font-weight: 400;
        font-style: normal;
        text-align: left;
        line-height: 1.4;
        position: absolute;
        left: 53%;
        transform: translateX(-50%);
        opacity: 0;
        z-index: 1;
    }

    .sdcard,
    .cassette,
    .cd-player,
    .iriver-mp3,
    .mickey-mp3,
    .iphone3gs,
    .galaxy-m,
    .lg-slider,
    .ipod-nano,
    .ipod-touch,
    .iphone6s,
    .iphone8plus,
    .iphonexsmax,
    .iphone13promax {
        width: 100%;
        height: auto;
    }
}