body {
    background-color:rgb(194, 237, 194);
    font-family: "sansserif", sans-serif;
}

p {
    background-color:seagreen; color:lightgreen;
    border: double 7px lightgreen; text-align:center;
    padding:15px; border-radius: 25px;
}

h3 {
    text-align:center;
}
/*
    for padding:
    1 value: all sides
    2 values: 1st value = top/bottom, 2nd = left/right
    4 values: 1st = top, 2nd = right, 3rd = bottom, 4th = left

    padding is for internal spacing
    margin is for external spacing
*/

/*
    cmd + / or ctrl +/
    opt + sift + a for alternative comment shortcut
*/
h1 {
    background-color:seagreen; color:lightgreen; border: double 7px lightgreen;
    font-size:50px;
    text-align:center;
    display: inline-block;
    padding:20px;
    margin: 50px;
    border-radius: 25px;

    font-family: "plantfont", serif;
    font-size: 5rem;
}

.special {
    background-color:cornflowerblue; color:midnightblue; border-radius: 100%;
    margin: 20px 210px;
}

.centered-text {
    text-align:center;
    padding: 15px;
}


/* CARDS */


.card {
    width: 200px;
    height: 200px;
    perspective: 1000px;
}

.card {
    border-radius: 25px;
    overflow: hidden;
    background: rgb(194, 237, 194);
}

.card-content {
    border-bottom-left-radius: 25px;
    border-bottom-right-radius: 25px;
    background: transparent;
}

.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 4rem;
    justify-items: center;
}

.card-front,
.card-back {
    position: absolute;
    backface-visibility: hidden;
    transition: transform 0.6s;
}

.card-back {
    transform: rotateY(180deg);
}

.card:hover .card-front {
    transform: rotateY(180deg);
}

.card:hover .card-back {
    transform: rotateY(0deg);
}


/* FONTS */

@font-face {
    font-family: "plantfont";
    src: url("fonts/plantfont.woff2") format("woff2"),
        url("fonts/plantfont.woff") format("woff");
}

@font-face {
    font-family: "SansSerif";
    src: url("fonts/sansserif.woff2") format("woff2"),
       url("fonts/sansserif.woff") format("woff");
}

.hero {
    text-align: center;
}

.hero h1 {
    display: inline-block;
}