@font-face {
    font-family: 'rocksalt';
    src: url('RockSalt.ttf');
}

@font-face {
    font-family: 'oswald';
    src: url('Oswald.ttf');
}

@font-face {
    font-family: 'VT';
    src: url('VT323.ttf');
}

@font-face {
    font-family: 'girl';
    src: url('TheGirlNextDoor.ttf');
}

a:link {
    color: #ffffff;
}

a:visited {
    color: #7799aa;
}

a:hover {
    color: #0000007f;
}

a:active {
    color: #7799aa7f;
}

body {
    background-image: linear-gradient(to right, #000000ff, #00000000, #000000ff), url(cavebg.png);
    font-family: 'rocksalt', sans-serif !important;
    font-size: 18px;
    user-select: none;
    user-select: none;
    color: #ffffff;
    text-align: left;
    text-shadow: 0px 2px 3px black;
}


.title {
    background-image: linear-gradient(to bottom, #0000007f, #7799aaa1, #000000ff), url(titlebg.png);
    color: #7799aa;
    text-align: center;
    text-shadow: 0px 5px 3px black;
    font-size: 60px;
    margin-top: -25px;
    margin-bottom: -15px;
}

.subtitle {
    font-family: 'Arial';
    text-align: center;
    text-shadow: 0px 2px 3px black;
    font-size: 25px;
    margin-top: -48px;
    margin-bottom: -32px;
}

.photo {
    display: flex;
    justify-content: center;
    align-items: left;
    margin-top: -32px;
    margin-bottom: -32px;
}

.middlehouse {
    background-image: linear-gradient(to bottom, #0000007f, #00000000, #00000000, #00000000, #00000000);
}

.middle {
    display: block;
    justify-content: center;
    align-items: left;
    margin-left: 180px;
    margin-right: 180px;
    background-image: linear-gradient(to right, #ffffff7f, #00000000, #ffffff7f), url(storybg.png);
}

.noncolorstory {
    font-family: 'Arial';
    background-image: linear-gradient(to bottom, #000000a1, #00000000, #000000a1);
    padding-top: 25px;
    padding-left: 25px;
    padding-right: 25px;
    padding-bottom: 12px;
}

.redstory {
    font-family: 'Arial';
    background-image: linear-gradient(to bottom, #000000a1, #00000000, #9D0000);
    padding-top: 25px;
    padding-left: 25px;
    padding-right: 25px;
    padding-bottom: 12px;
}

.greenstory {
    font-family: 'VT' !important;
    font-family: 'Arial';
    background-image: linear-gradient(to bottom, #0067527f, #0000007f, #0000007f, #0000007f, #0067527f), url(greenbg.png);

    @keyframes scroll {
        to {
            background-position: -500px 0;
        }
    }

    color: #00ff00;
    padding-top: 25px;
    padding-left: 25px;
    padding-right: 25px;
    padding-bottom: 12px;
}

.bluestory {
    font-family: 'Oswald' !important;
    background-image: linear-gradient(to bottom, #000000a1, #00000000, #7799aa);
    padding-top: 25px;
    padding-left: 25px;
    padding-right: 25px;
    padding-bottom: 12px;
}

.yellowstory {
    font-family: 'girl' !important;
    background-image: linear-gradient(to bottom, #7799aa40, #e9ac1f99, #9D00007f);
    padding-top: 25px;
    padding-left: 25px;
    padding-right: 25px;
    padding-bottom: 12px;
}

.pinkstory {
    font-family: 'Arial';
    background-image: linear-gradient(to bottom, #000000a1, #00000000, #A177AA);
    padding-top: 25px;
    padding-left: 25px;
    padding-right: 25px;
    padding-bottom: 12px;
}

.greystory {
    font-family: 'Arial';
    background-image: linear-gradient(to bottom, #000000a1, #00000000, #7f7f7f);
    color: #7f7f7f;
    padding-top: 25px;
    padding-left: 25px;
    padding-right: 25px;
    padding-bottom: 12px;
}

.buttons {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    bottom: 0;
}