@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Caveat:wght@400..700&family=Hachi+Maru+Pop&family=Hina+Mincho&family=Josefin+Sans:ital,wght@0,100..700;1,100..700&family=Jost:ital,wght@0,100..900;1,100..900&family=Kiwi+Maru&family=M+PLUS+1p&family=Michroma&family=Mochiy+Pop+P+One&family=Playfair+Display:ital,wght@0,400..900;1,400..900&family=Slackside+One&family=Tsukimi+Rounded&family=Yuji+Mai&family=Yuji+Syuku&family=Zen+Antique&display=swap');


*
{
        padding: 0;
        margin: 0;
        box-sizing: border-box;
}

.animal {
        background-color: aliceblue;
        color: white;
        border: 5px solid black;
        margin: 20px;
        padding: 20px;
        border-radius: 24px 16px 24px 16px
        font-family: "Oswald", sans-serif;
        }
        

.flex-container
        {
                display: flex;
                gap: 1em;
                flex-direction: row;
        }


.flex-container .card 
        {
                flex: 1;
                padding: 2em;
                border-radius: .5em;
                background: var(--flex color-t);
                color: var(--flex color);
                border: 5px solid black;
                min-width: 0;
                box-sizing: border-box;
                background-color: brown;
                border-radius: 24px 24px 24px 24px;
        }

.flex-container .card img
{
        width: 100%;
        height: auto;
        display: block;
}

.flex-container .card video
{
        width: 100%;
        height: auto;
        display: block;
}

.wrapper
        { 
            margin: 0 auto; 
            width: 1000px;
            overflow: hidden;
        }

.navbar ul
        {
        list-style-type: none;
        background-color: black;
        padding: 0px;
        margin: 0;
        overflow: hidden;
        }

.navbar a
        {
        color: tomato;
        text-decoration: none;
        padding: 15px;
        display: block;
        text-align: center;
        }

.navbar a:hover
        {
            background-color: white;
        }        

.navbar li
        {
            float: left;
            font-size: 20px;
            font-family: "Michroma", sans-serif;
        }        

body    {
        background-image: url(daun.jpg);
        background-repeat: no-repeat;
        background-size: cover;
        }

    
    #myheader 
    {
        background-color: navajowhite;
        color: black;
        padding: 40px;
        text-align: center;
        font-family: "Caveat", cursive;
        font-size: 75px;
        border-radius: 24px 24px 24px 24px
    }

    #myheader2
    {
          font-family: "Caveat", cursive;
          padding: 25px;
          color: white;
          font-size: 45px;
          border-radius: 24px 16px 24px 16px
    }

    .listname
    {
        font-family: "Michroma", sans-serif;
        font-size: 15px;
        padding: 10px;
        color: tomato;
    }

    .wolfy
     {
        background-color: white;
        padding: 20px;
        font-family: "Michroma", sans-serif;
        border-radius: 24px 16px 24px 16px
     }

.myheader3
        {
        background-color: yellow;
        padding: 15px;
        color: black;
        border: 2px solid black;
        font-family: "Bebas Neue", sans-serif;
        }

.home
        {
                background-color: white;
                font-size: 15px;
                color: rgb(0, 157, 255);
                padding: 15px;
        }