@import url('https://fonts.googleapis.com/css2?family=Festive&family=Lobster&family=Pacifico&family=Roboto:ital,wght@0,100;0,300;0,400;1,100;1,300&family=Zen+Kurenaido&display=swap');
*{
    margin:0;
    padding:0;
}
body {
    font-family: sans-serif;
    font-family: Roboto;
}
header{
    background-color: rgb(124, 102, 63);
    padding: 15px 0px;
    color:white;
    border-bottom: black 1px solid;
}
section{
    background-color: rgb(228, 228, 228);
    padding: 20px 0px;
}
figure{
    margin:0;
}
img{
    max-width: 100%;
    height:auto;
}
table{
    border-collapse: collapse;
    border:none;
}
th{
    border: 1px solid #000;
    background-color: rgb(199, 180, 146);
    color:white;
    padding:5px;
}
td {
    border: 1px solid #000;
    text-align: center;
}
a{
    color:black;
}
a:hover{
    color: rgb(124, 102, 63);
}
.back{
    text-align:center;
    padding:20px;
}
footer{
    background-color: rgb(53, 53, 53);
    clear:both;
    padding:30px;
    color:white;
}
footer li{
    display:inline;
}
footer p a{
    color:white;
}
footer p:first-child{
    float:left;
}
footer p:last-child{
    float:right;
}
.container{
    width:90%;
    margin:auto;
}
header span{
    display:none;
}
figure h2{
    display: none;
}
figcaption{
    text-align:center;
}
.title{
    display:none;
}
table{
    width: 100%;
    margin-top:10px;
}
.clearfix{
    overflow:auto;
}
@media only screen and (min-width:800px){
    header span{
        display:inline-block;
    }
    figure h2{
        display: block;
    }
    .title{
        float:left;
        text-align: center;
        width:45%;
        display: block;
        margin-top:150px;
    }
    table{
       float:left;
       width:45%;
    }
    figure{
        float:right;
        width:50%;
    }
    figcaption{
        display:none;
    }
    figure:hover figcaption{
        display:block;
    }
    header{
        padding:20px;
        border-top-left-radius: 15px;
        border-top-right-radius: 15px;
    }
    .wrapper{
        max-width:1000px;
        margin:auto;
        border: 2px solid black;
        border-radius: 15px;
        padding:10px;
    }
    footer{
        border-radius: 15px;
    }
    .container{
        max-width: none;
        width:auto;
        margin:auto;
    }
    .back{
        padding:10px 0px;
        position:fixed;
        top:20px;
        left:20px;
        border: 2px solid rgb(174, 151, 112);
        border-radius: 5px;
        background-color: white;
    }
    .back a{
        padding:10px 15px;
    }
    .back:hover{
        background-color: rgb(116, 116, 116);
        cursor:pointer;
    }
    .back span{
        display:none;
    }
}