html {
height: 100%;
width: 100%;
}

body {
font-family: 'Rajdhani', sans-serif;
background-color: #DAD4C9
}

h1, h2 {
font-family: 'Cinzel Decorative', serif;
}

h2 {
/*text 3D effect*/
background-color: #bb1b31;
background-size: 100%;
background-repeat: repeat;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent; 
-moz-background-clip: text;
-moz-text-fill-color: transparent;
background-clip: text;
text-shadow: 1px 1px black;
}

.stars {
color: #bb1b31;
}


#container {
text-align: center;
width: 80%;
height: auto;
margin-right: auto;
margin-left: auto;
padding-top: 10px;
padding-bottom: 10px;
}

#userInput {
margin-bottom: 2em;
}

#searchInput {
font-size: 1em;
margin-right: 1em;
}

#searchBtn, #randomHeroBtn {
background-color: #bb1b31;
color: #ffffff;
font-size: 1em;
border-radius: 5%;
padding: 5px;
}

#heroImage {
position: relative;
width: fit-content;
margin-right: auto;
margin-left: auto;
margin-bottom: 8px;
z-index: 1;
}


#heroImage img {
border: 5px inset #686736;
}

#heroStats {
font-size: 1.1em;
width: 475px;
display: flex;
align-content: center;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-evenly;
margin-left: auto;
margin-right: auto;
/*text 3D effect*/
background-color: #bb1b31;
background-size: 100%;
background-repeat: repeat;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent; 
-moz-background-clip: text;
-moz-text-fill-color: transparent;
background-clip: text;
text-shadow: 0.5px 0.5px black;
}

@-webkit-keyframes rainbowBackground {
0% {
    -webkit-background-position: 0 0;
}
50% {
    -webkit-background-position: 100% 0;
}
100% {
    -webkit-background-position: 0 0;
}
}

@-moz-keyframes rainbowBackground {
0% {
    -moz-background-position: 0 0;
}
50% {
    -moz-background-position: 100% 0;
}
100% {
    -moz-background-position: 0 0;
}
}

@keyframes rainbowBackground {
0% {
    background-position: 0 0;
}
50% {
    background-position: 100% 0;
}
100% {
    background-position: 0 0;
}
}

#heroImage::before, #heroImage::after {
content: '';
position: absolute;
left: 0px;
top: 0px;
background: linear-gradient(45deg, #fb0094, #0000ff, #00ff00,#ffff00, #ff0000, #fb0094, #0000ff, #00ff00,#ffff00, #ff0000);
background-size: 400%;
width: 99%;
height: 99%;
z-index: -1;
-webkit-animation: rainbowBackground 5s linear infinite;
-moz-animation: rainbowBackground 5s linear infinite;
animation: rainbowBackground 5s linear infinite;
}

#heroImage::after {
-webkit-filter: blur(50px);
-moz-filter: blur(50px);
filter: blur(50px);
}

.card {
background-color: bisque;
border-radius: 2%;
padding: 1px 30px;
animation: spin 0.4s linear;
width: 45%;
margin-left: auto;
margin-right: auto;
box-shadow: 5px 5px 20px black;
border: 3px solid goldenrod;
}

@-webkit-keyframes spin {
0% {-webkit-transform: scale(0) rotate(0deg);}
25% {-webkit-transform: scale(0.1) rotate(90deg);}
50% {-webkit-transform: scale(0.4) rotate(180deg);}
75% {-webkit-transform: scale(0.7) rotate(270deg);}
100% {-webkit-transform: scale(1) rotate(360deg);}
}

@-moz-keyframes spin {
0% {-moz-transform: scale(0) rotate(0deg);}
25% {-moz-transform: scale(0.1) rotate(90deg);}
50% {-moz-transform: scale(0.4) rotate(180deg);}
75% {-moz-transform: scale(0.7) rotate(270deg);}
100% {-moz-transform: scale(1) rotate(360deg);}
}

@keyframes spin {
0% {transform: scale(0) rotate(0deg);}
25% {transform: scale(0.1) rotate(90deg);}
50% {transform: scale(0.4) rotate(180deg);}
75% {transform: scale(0.7) rotate(270deg);}
100% {transform: scale(1) rotate(360deg);}
}
  
@media only screen and (max-width: 600px) {
    h1 {
        margin-top: 0px;
    }

    #searchInput {
        display: block;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 20px;
    }

    #searchBtn, #randomHeroBtn {
        padding: 10px;
        border-radius: 2%;
    }

    #container {
        width: 100%;
    }

    .card {
        width: 70%;
        margin-top: -20px;
        margin-bottom: 20px;
    }

    #heroImage img {
        width: 100%;
        opacity: 1;
    }

    #heroImage::before {
        height: 98%;
        -webkit-filter: blur(15px);
        -moz-filter: blur(15px);
        -o-filter: blur(15px);
        -ms-filter: blur(15px);
        filter: blur(15px);
        z-index: -1;
    }

    #heroImage::after {
        -webkit-filter: blur(15px);
        -moz-filter: blur(15px);
        -o-filter: blur(15px);
        -ms-filter: blur(15px);
        filter: blur(15px);
        width: 105%;
        height: 98%;
        left: 2px;
        box-shadow: 20px 20px 20px 20px transparent;/*add to blur the div edges*/
    }

    #heroStats {
        font-size: 0.7em;
        width: 100%;
    }
}

@media only screen and (min-width: 601px) and (max-width: 1024px) {
    .card {
        width: 80%;
    }

    #heroImage::before {
        height: 98%;
    }

    #heroImage::after {
        -webkit-filter: blur(15px);
        filter: blur(15px);
        width: 100%;
        height: 99%;
        box-shadow: 20px 20px 20px 20px transparent;/*add to blur the div edges*/
        }
}