body {
    background-image: url("pildid/Manga pildid/Manga background.jpeg");
    background-repeat: no-repeat;
    background-size: contain;
    margin: 0;
    padding: 0;
    height: 100%;
}

header a.button {
    -webkit-appearance: button;
    -moz-appearance: button;
    appearance: button;
    background-size: 50px;
    text-decoration: none;
    color: white;
    background-color: black;
    border-radius: 5px;
    font-size: xx-large;
}

nav button {
    background-color: black;
    color: white;
    font-size: large;
    height: 75px;
    width: 25%;
    border-radius: 10px;
    border-color: grey;
}

nav button:hover {
    text-decoration: underline;
    text-underline-offset: 5px;
    background-color: grey;
}


#manga {
    background: linear-gradient(to left, rgba(255, 255, 255, 0) 200px, rgba(255, 255, 255, 1) 700px, rgba(255, 255, 255, 1) 10px), url("pildid/Manga pildid/manga.webp") no-repeat;
    background-position: right;
    background-size: cover;
    color: black;
    height: 600px;
}


#action {
    background: linear-gradient(to right, rgba(255, 255, 255, 0) 25vw, rgba(255, 255, 255, 1) 50vw, rgba(255, 255, 255, 1) 0), url("pildid/Manga pildid/action.jpg") no-repeat;
    background-position: left;
    background-size: cover;
    color: black;
    z-index: -1;
}

#adventure {
    background: linear-gradient(to left, rgba(255, 255, 255, 0) 400px, rgba(255, 255, 255, 1) 700px, rgba(255, 255, 255, 1) 10px), url("pildid/Manga pildid/Seiklus.jpeg") no-repeat;
    background-position: right;
    background-size: contain;
    width: 100%;
    color: black;
    z-index: -1;
}

#comedy {
    background: linear-gradient(to right, rgba(255, 255, 255, 0) 25vw, rgba(255, 255, 255, 1) 50vw, rgba(255, 255, 255, 1) 0), url("pildid/Manga pildid/comedy.jpg") no-repeat;
    background-position: left;
    background-size: contain;
    color: black;
    z-index: -1;
}

#drama {
    background: linear-gradient(to left, rgba(255, 255, 255, 0) 400px, rgba(255, 255, 255, 1) 700px, rgba(255, 255, 255, 1) 10px), url("pildid/Manga pildid/drama.jpg") no-repeat;
    background-position: right;
    background-size: contain;
    color: black;
    z-index: -1;
}

#slice_of_life {
    background: linear-gradient(to right, rgba(255, 255, 255, 0) 25vw, rgba(255, 255, 255, 1) 50vw, rgba(255, 255, 255, 1) 0), url("pildid/Manga pildid/Elu\ lõige.jpeg") no-repeat;
    background-position: left;
    background-size: contain;
    color: black;
    z-index: -1;
}

#horror {
    background: linear-gradient(to left, rgba(255, 255, 255, 0) 25vw, rgba(255, 255, 255, 1) 50vw, rgba(255, 255, 255, 1) 0), url("pildid/Manga pildid/horror.jpg") no-repeat;
    background-position: right;
    background-size: contain;
    color: black;
    z-index: -1;
}

#sport {
    background: linear-gradient(to right, rgba(255, 255, 255, 0) 25vw, rgba(255, 255, 255, 1) 50vw, rgba(255, 255, 255, 1) 0), url("pildid/Manga pildid/sports.jpg") no-repeat;
    background-position: left;
    background-size: contain;
    color: black;
    z-index: -1;
}

#Mystery {
    background: linear-gradient(to left, rgba(255, 255, 255, 0) 25vw, rgba(255, 255, 255, 1) 50vw, rgba(255, 255, 255, 1) 0), url("pildid/Manga pildid/mystery.jpg") no-repeat;
    background-position: right;
    background-size: cover;
    color: black;
    z-index: -1;
}

#romance {
    background: linear-gradient(to right, rgba(255, 255, 255, 0) 25vw, rgba(255, 255, 255, 1) 50vw, rgba(255, 255, 255, 1) 0), url("pildid/Manga pildid/romance.jpg") no-repeat;
    background-position: left;
    background-size: contain;
    color: black;
    z-index: -1;
}

#supernatural {
    background: linear-gradient(to left, rgba(255, 255, 255, 0) 25vw, rgba(255, 255, 255, 1) 50vw, rgba(255, 255, 255, 1) 0), url("pildid/Manga pildid/supernatural.jpg") no-repeat;
    background-position: right;
    background-size: contain;
    color: black;
    z-index: -1;
}

#avantgarde {
    background: linear-gradient(to right, rgba(255, 255, 255, 0) 25vw, rgba(255, 255, 255, 1) 50vw, rgba(255, 255, 255, 1) 0), url("pildid/Manga pildid/avant garde.jpg") no-repeat;
    background-position: left;
    background-size: cover;
    color: black;
    z-index: -1;
}

#fantasy {
    background: linear-gradient(to left, rgba(255, 255, 255, 0) 25vw, rgba(255, 255, 255, 1) 50vw, rgba(255, 255, 255, 1) 0), url("pildid/Manga pildid/fantasy.jpg") no-repeat;
    background-position: right;
    background-size: contain;
    color: black;
    z-index: -1;
}


#suspense {
    background: linear-gradient(to right, rgba(255, 255, 255, 0) 25vw, rgba(255, 255, 255, 1) 50vw, rgba(255, 255, 255, 1) 0), url("pildid/Manga pildid/Põnevus.jpeg") no-repeat;
    background-position: left;
    background-size: contain;
    color: black;
    z-index: -1;
}

#sci-fi {
    background: linear-gradient(to left, rgba(255, 255, 255, 0) 25vw, rgba(255, 255, 255, 1) 50vw, rgba(255, 255, 255, 1) 0), url("pildid/Manga pildid/sci-fi.jpg") no-repeat;
    background-position: right;
    background-size: contain;
    color: black;
    z-index: -1;
}

#gourmet {
    background: linear-gradient(to right, rgba(255, 255, 255, 0) 25vw, rgba(255, 255, 255, 1) 50vw, rgba(255, 255, 255, 1) 0), url("pildid/Manga pildid/gourmet.jpg") no-repeat;
    background-position: left;
    background-size: contain;
    color: black;
    z-index: -1;
}