:root {
    --background: #131419;
    --header-background: white;
    --text: #3A2C3A;
    --text-highlight: #FF5252;
    --text-unclickable: #FFABAB;
    --text-selected: gray;
}

body {
    background-color: #131419;
}
.banner {
    height:300px;
}
.banner-mobile {
    display:none;
}
.title-display {
    height: 300px;
    background-color: #131419;
    display: grid;
    justify-content: center;
    align-content: center;
    align-items: center;
    justify-items: center;
}
.empty-strip {
    height:50px;
    background-color:white;
    display: grid;
    align-items: center;
    align-content: center;
    justify-content: center;
    justify-items: center;

}
.description-strip {
    padding-top: 30px;
    background-color: #131419;
    display:grid;
    color:white;
    font-family: garamond;
    font-size: 16pt;
    
    justify-content: center;
    align-content: center;
    align-items: center;
    justify-items: center;

}
#description {
    width:40%; 
    text-align: justify;
    text-justify: inter-word;
}

.alternate-readers {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    align-content: center;
    justify-content: center;
    justify-items: center;
    column-gap: 25%;
}
.alternate-readers img {
    height:35px;
    padding-bottom: 0;
}

.available {
    padding-bottom:50px;
    display:grid;
    background-color: #131419;
    align-items: center;
    align-content: center;
    justify-content: center;
    justify-items: center;
}
#square-image {
    width:50%;
}

.lotr-goth {
    height: auto;
    background-color: rgb(36,36,36);
    display: grid;
    grid-template-columns: .5fr 2fr 2fr .5fr;
    grid-template-rows: .5fr .5fr 1fr .5fr;
    grid-template-areas:
    "empty available available empty2"
    "empty picture title empty2"
    "empty picture paragraph empty2"
    "empty picture button empty2";
    padding-bottom:50px;
    column-gap: 4%;
}
#also-available {
    color:white;
    font-family: garamond;
    font-size: 26pt;
    text-align: center;
    grid-area: available;
}

#cover-left {
    grid-area: picture;
    height: 500px;
    width: auto;
}
#lotr {
    grid-area: title;
    color: #E0D6C7;
    font-family: cecep;
    text-align: center;
    font-size: 40pt;

}
#details {
    grid-area: paragraph;
    color:#E0D6C7;
    font-family: goudy;
    font-size: 18pt;
    text-align: justify;
    text-justify: inter-word;
}
.about-button {
    width: 100%;
    height: 100%;
    padding:0;
    grid-area: button;
    display: grid;
    grid-template-rows: auto auto;
    grid-template-areas:
    "read"
    "learn";
    align-items:top;
    justify-items: center;
}
#read, #learn {
    font-family: cecep;
    color: #E0D6C7;
    background-color: rgb(36,36,36);
    border-color: rgb(36,36,36);
    font-size: 16pt;
    width:50%;
    height:60%;
    padding:0px;
    margin: 0px;
}
#read:hover,#learn:hover {
    background-color:gray;
}
#read {
    grid-area: read;
}
#learn {
    grid-area: learn;
}

@media screen and (max-width: 1250px) {
    .banner {
        width:90%;
        height:auto;
    }
}

@media screen and (max-width: 800px) {
    #description {
        width:85%;
    }
    #square-image {
        width:85%;
    }
    .banner-mobile {
        display:inherit;
        height:350px;
        justify-self: center;
        align-self: center;
    }
    .banner {
        display: none;
    }
    .title-display {
        height:350px;
    }

    .lotr-goth {
        height: auto;
        background-color: rgb(36,36,36);
        display: grid;
        grid-template-columns: 1fr 2fr 1fr;
        grid-template-rows: .2fr 1fr .1fr .1fr .3fr;
        grid-template-areas:
        "empty available empty2"
        "empty picture empty2"
        "empty title empty2"
        "empty paragraph empty2"
        "empty button empty2";
        padding-bottom:50px;
    }

}