*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
body, html{
    background-color: black;
    color: aliceblue;
    font-size: 1.3vw;
    text-align: center;
}
header{
    background-color: rgb(170, 44, 44);
    height: 10vw;
    display: flex;
    border-bottom: solid 1vw gray;
}
header h1{
    font-size: 5vw;
    margin: auto;
}
main{
    padding: 3vw;
    background-color: rgb(95, 95, 95);
    display: flex;
    justify-content: space-evenly;
    flex-wrap: wrap;
}
.card{
    margin: 1vw;
    display: flex;
    border: solid;
    height: 16vw;
    width: 32vw;
    border: solid 0.5vw;
    background-color: rgb(0, 63, 146);
}
.card:hover{
    border-color: yellow;
}
.characterImage{
    height: 15vw;
    width: 15vw;
    border: solid 0.3vw gray;
}
.characterImage1{
    height: 20vw;
    width: 20vw;
    border: solid 0.3vw gray;
    margin: auto;
}
.name1{
    font-size: 3vw;
}
.characterInfo{
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    height: 15vw;
    width: 15vw;
}
section{
    justify-content: space-evenly;
    display: none;
    position: fixed;
    flex-direction: column;
    top: 0%;
    left: 0%;
    width: 100%;
    height: 100%;
    background-color: rgb(33, 102, 1);
    padding: 1vw;
    border: solid 1vw greenyellow;
    text-align: left;
}
section .characterInfo{
    width: 100%;
    margin-top: 2vw;
}
.closeSpan{
    width: 10vw;
    margin: auto;
    padding: 0.5vw;
}
section a{
    margin: auto;
}
.closeSpan:hover{
    background-color: red;
}
footer{
    padding: 2vw;
}