body {
    background-image: url("pildid/Anime lehe pildid/Üldine background.png");
    background-repeat: no-repeat;
    margin: 0;
    padding: 0;
}

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

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

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


#anime {
    background: linear-gradient(to left, rgba(255, 255, 255, 0) 200px, rgba(255, 255, 255, 1) 750px, rgba(255, 255, 255, 1) 10px), url("pildid/Anime lehe pildid/Anime_section.png") no-repeat;
    background-position: right;
    background-size: contain;
    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/Anime lehe pildid/Action anime.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/Anime lehe pildid/Adventure.jpg") no-repeat;
    background-position: right;
    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/Anime lehe pildid/Comedy.jpg") no-repeat;
    background-position: left;
    background-size: cover;
    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/Anime lehe pildid/Drama.png") 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/Anime lehe pildid/Slice_of_life.png") 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/Anime lehe pildid/Õudus.png") 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/Anime lehe pildid/sport.png") 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/Anime lehe 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/Anime lehe pildid/Romance.png") 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/Anime lehe pildid/Supernatural.png") 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/Anime lehe pildid/Avant-Garde.jpeg") 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/Anime lehe pildid/Fantasy.jpeg") no-repeat;
    background-position: right;
    background-size: cover;
    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/Anime lehe pildid/suspense.png") 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/Anime lehe pildid/Sci-fi.png") 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/Anime lehe pildid/Gourmet.png") no-repeat;
    background-position: left;
    background-size: contain;
    color: black;
    z-index: -1;
}