body{
    background: radial-gradient(circle, rgba(171, 208, 224, 1), rgba(171, 208, 224, 0));
    text-align: center;
    margin: 0;
    padding: 0;
}

img{
    display: block;
    height:300px;
    align-self: center;
    margin: 0 auto;
    border-radius: 16px;
}

.header{
    width: 43%;
    padding: 10px;
    background-color: rgb(242, 245, 248,0.6);
    padding: 20px;
    border-radius: 100px;
    color:rgb(24, 46, 75);
    margin: 20px auto; /* centers hor. bc of width defined*/
}

.red{
    color: rgb(177, 108, 108);
}
.list{
    width: 40%;
    margin: 20px auto;
    background: linear-gradient(to bottom, transparent, white);
    border-radius: 100px;
    padding: 50px;
    text-align: center;
    color:rgb(30, 30, 83);
    align-content: center;
}

.pokemon{
    display:flex;
    margin: 0;
    padding: 0;
}

.pokemon img{
    width:100px;
    height: auto;
}
.checkbox{
    display: flex; 
    align-items: center;
    margin-bottom: 10px;
    font-size: 18px;
    cursor: pointer;
    text-align: center;
}

.checkbox h2{
    display:block;
    margin-bottom: 10px;

}

.checkbox img{
    display: block; /*own line*/
    margin: 0 auto;
    height: 300px;
}

.checkbox input{
    display: none; /*hiding square box*/
}

.snowflake{
    display: inline-block;
    width: 30px;
    height: 3cqb;
    margin-right: 10px;
    border-radius: 50px;
    background-color: rgb(175, 199, 230);
    position: relative;
    text-align:center;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.snowflake:before {
    content: "❄";
    position:absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    font-size: 0px;
    color: white;
    z-index: 1;
}


.checkbox input:checked + .snowflake:before,
.checkbox input:checked + .snowflake:after {
    color: #FFF;
    font-size: 50px;
}