h1{
    width: 100%;
}

.hero-photo{
    width: 100%;
}

.data{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    background-color: #dddddd;
}

.data-icon{
    height: 30px;
}

.data-name{
    width: 25%;
    text-align: right;
    font-size: 30px;
    padding-right: 5px;
}

.data-bg{
    width:60%;
    background-color: #414141;
    border: 2px solid #7c7c7c;
}

.atk{
    width: 100%;
    display: flex;
    float: left;
    margin-top: 20px;
}

.atk-data{
    height: 100%;
    font-size: 30px;
    background-color: #ff6a00;
}

.def{
    width: 100%;
    display: flex;
    float: left;
    margin-top: 20px;
}

.def-data{
    height: 100%;
    font-size: 30px;
    background-color: #ff6a00;
}

.hp{
    width: 100%;
    display: flex;
    float: left;
    margin-top: 20px;
    margin-bottom: 20px;
}



.hp-data{
    height: 100%;
    font-size: 30px;
    background-color: #ff6a00;
}