@font-face {
    font-family:"Raleway";
    font-weight: 400;
    src: url("../fonts/Raleway-Regular.ttf") format("truetype");
}
@font-face {
    font-family:"Raleway";
    font-weight: 600;
    src: url("../fonts/Raleway-SemiBold.ttf") format("truetype");
}
@font-face {
    font-family:"Daydream";
    src: url("../fonts/Daydream.ttf") format("truetype");
}

*{
    margin: 0;
    padding: 0;
    text-decoration: 0;
}

body {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 10px;
    background: #1A1717;
}

.Holder{
    display: flex;
    width: 70vw;
    padding: 10px;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    flex-shrink: 0;
}

.Title{
    display: flex;
    width: 100%;
    height: 7.5vw;
    padding: 10px;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.Title img{
    height: 100%;
    width: 100%;
    object-fit: contain;
}

.RandomizerButton{
    display: flex;
    padding: 10px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    border-radius: 20px;
    border: 1px solid #FFF;
    background: #E3350D;
}

h1{
    color: #FFF;
    text-align: center;
    font-family: Daydream;
    font-size: 1.5vw;
    font-style: normal;
    line-height: normal;
}

.Pokemon{
    display: flex;
    width: 100%;
    height: 30vw;
    padding: 10px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    border-radius: 20px;
    border: 2px solid #E3350D;
    background: #FFF;
}

.PokemonImage{
    width: 30vw;
    height: 30vw;
    flex-shrink: 0;
}

.Image{
    height: 100%;
    width: 100%;
    object-fit: contain;
}

.Info{
    display: flex;
    padding: .75vw 1.5vw;
flex-direction: column;
align-items: center;
gap: .5vw;
flex: 1 0 0;
align-self: stretch;
border-radius: 20px;
background: #191717;
}
h2{
    height: 50%;
align-self: stretch;
color: #FFF;
text-align: center;
font-family: Raleway;
font-size: 1.5vw;
font-style: normal;
font-weight: 400;
line-height: normal;
}
.Spacer{
    width: 80%;
height: 2px;
background: #FFF;
}
h3{
    align-self: stretch;
    color: #FFF;
    text-align: center;
    font-family: Raleway;
    font-size: 2vw;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}
.Stats{
    margin-top: -.5vw;
    display: flex;
    width: 80%;
    padding: .5vw;
    justify-content: center;
    align-items: center;
    align-content: center;
    gap: .5vw;
    flex: 1 0 0;
    flex-wrap: wrap;
}
p{
    width: 40%;
flex-shrink: 0;
color: #FFF;
text-align: center;
font-family: Raleway;
font-size: 2vw;
font-style: normal;
font-weight: 400;
line-height: normal;
}
.ClassSiteButton{
    display: flex;
    padding: 10px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    border-radius: 20px;
    border: 1px solid #FFF;
    background: #E3350D;
}
button:hover{
    background: rgb(253, 101, 67);
    cursor:pointer;
}
a:hover{
    background: rgb(253, 101, 67);
}