:root {
    --background: gray;
    --card-background: #FDF5E6;
    --name-color: green;
    --id-number-color: red;
    --stats-color: black;
}

.center{
    width: 400px;
    margin: auto;
}

.monster-card{
    position: relative;
    width: 100%;
    height: 600px;
    margin-top: 100px;
    border: 10px solid black;
    border-radius: 20px;
    background-color: var(--card-background);
    padding: 15px;
}

.header{
    display: flex;
    flex-direction: row;
}
.picture{
    flex-shrink: 0;
    height: 200px;
    border: 2px solid black;
}
.info{
    flex-grow: 1;
    margin-left: 10px;
}
.name{
    font: 38px "Trebuchet MS";
    color: var(--name-color);
}
.id-number{
    font: 20px "Georgia";
    color: var(--id-number-color);
    margin-bottom: 10px;
}
.stats{
    color: var(--stats-color);
    font: 30px "Georgia";
}
.paragraphs > *{
    font: 18px "Trebuchet MS";
}
.classification{
    position: absolute;
    color: red;
    font: 20px "Trebuchet MS";
    bottom: 15px;
    left: 60px;
}


/* General */
p{
    padding:0;
    margin:0;
}
body{
    width: 100%;
    padding: 0;
    margin: 0;
    background-image: url("bg.jpg");
    background-color: var(--background);
}
html{
    height: 100%;
    width: 100%;
}
*{
    box-sizing: border-box;
}