@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=Playwrite+NZ+Guides&family=Slackside+One&family=Tsukimi+Rounded&family=Yuji+Mai&family=Yuji+Syuku&family=Zen+Antique&display=swap');@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Caveat:wght@400..700&display=swap');


body
{
    margin: 0px;
    background-color: rgb(221, 127, 33);
    background-image: url(fgo.jpg);
    background-repeat: no-repeat;
    background-size: cover;
}

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

main
{
    margin-left: 25px;
    margin-right: 25px;
}

#myheader
{
    background-color: lightpink;
    color: black;
    font-size: 75px;
    font-family: "Bebas Neue", sans-serif;
    padding: 20px;
}

#myheader2
{
    font-family: "Bebas Neue", sans-serif;
    font-size: 50px;
    color: white;
}

#myheader7
{
    font-family: "Bebas Neue", sans-serif;
    font-size: 50px;
    color: white;
    text-align: center;
    background-color: darkslategray;
    padding: 10px;
    border-radius: 24px 24px 24px 24px;
}

.navbar ul
{
    list-style-type: none;
    background-color: rgb(7, 130, 1);
    padding: 0px;
    margin: 0;
    overflow: hidden;
}

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

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

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

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

   .gallery 
    {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .image 
    {
        position: relative;
        margin: 0 -50px;
        z-index: 1;
        transition: .3s;
    }

    .image img 
    {
        width: 240px;
        height: auto;
        box-shadow: 0px 6px 20px; rgba(0,0,0,0,2);
    }

    .image:hover 
    {
        transform: translate(-20px)
        z-index: 2;
    }

    .image:hover
    {
        box-shadow: 0px 8px 30px; rgba(0,0,0,0,3);
    }

    div
    {
        display: block;
    }

    .paragraph
    {
        text-align: justify;
        font-size: 25px;
    }

    .table-container
        {
            width: 100%;
            overflow-x: auto;
            -webkit-overflow-scrolling: touch;
        }
    
    .table-container::-webkit-scrollbar
        {
            display: none;
        }

    table, th, td
    {
        border: 2px solid;
        background-color: white;
    }

    .carousel
        {
            margin: 100px auto;
            width: 90%;
            border: 5px solid white;
            display: flex;
            overflow-x: auto;
        }

    .carousel::-webkit-scrollbar
        {
            display: none;
        }

    .group
        {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 1em;
            animation: spin 60s infinite linear;
            padding-right: 1em;
        }

    .group img
    {
        display: block;
        width: 15rem;
        height: 15rem;
        object-fit: cover;
        flex-shrink: 0;
        object-position: top;
        border-radius: .2em;
    }
    
    .card
        {
            flex: 0 0 5em;
            height: 5em;
            padding: 1em;
            background: cornflowerblue;
            font-size: 3rem;
            border-radius: .2em;
            text-align: center;
            align-items: center;
        }

    @keyframes spin 
        {
            from {translate: 0;}
            to {translate: -100%;}
        }