style.css

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    position: center;

}

/* main box */
.maincontainer{
    position: absolute;
    width: 250px;
    height: 320px;
    margin-left: 40%;
    margin-right: 40%;
    margin-top: 8%;
    
}  
 /* Box */
.thecard{
    position: absolute;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    transition: all 0.5s ease;
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: 1rem;
    padding-bottom: 1rem;
}

.thecard:hover{
    transform: rotateY(180deg);
}

/* the front of my card typografie en size */
.thefront{
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    background: #ffc728;
    background-image: url(assets/IMG_7648.JPG);
    background-size: cover;
    text-align: center;
    font-family: 'Times New Roman', Times, serif;
    margin-top: 1rem;
    border-radius: 20px;
    font-size: 30px;
    font-weight: bold;
    color: #333;
    box-shadow: 10px 10px 5px rgb(191, 206, 211);
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: 1rem;
    padding-bottom: 1rem;
}

/* the back of my card typografie en size */
.theback{
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    background-image: linear-gradient(beige,rgb(105, 167, 175));
    color: #fff;
    transform: rotateY(180deg);
    text-align: center;
    font-family: 'Times New Roman', Times, serif;
    margin-top: 1rem;
    border-radius: 20px;
    font-size: 14px;
    font-weight: bold;
    box-shadow: 10px 10px 5px rgb(191, 206, 211);
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: 1rem;
    padding-bottom: 1rem;
}

/* heading 1 features */
h1{
    color: #345e30;
    text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
    
    position: relative;
    line-height: 1em;
    margin-bottom: 10px;
    margin-top: 2rem;
    font-family: 'Times New Roman', Times, serif;

}

/* paragraph features */
p{
    color: #403c3c;
    position: center;
    font-size: 14px;
    margin-bottom: 10px;
    margin-top: 15px;
    font-family: 'Times New Roman', Times, serif;
}

.green{
    color: #85b481;
}