@import url('https://fonts.googleapis.com/css2?family=Montserrat+Alternates:wght@200&display=swap');
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta2/css/all.min.css');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    background-color: lightgray;
    color: #402915;
}

body {
    font-family: 'Montserrat Alternates', sans-serif;
    margin: auto;
    text-align: center;
}

figure img {
    padding: 0px;
    padding-top: 20px;
    max-width: 100%;
    height: auto;
}

figure figcaption {
    padding-bottom: 20px;
    text-align: center
}

table,
th,
td {
    border: 2px solid black;
}

table {
    width: 500px;
    margin: auto;
    border-collapse: collapse;
}

footer {
    padding-top: 25px;
    padding-bottom: 20px;
    background-color: #0D2D8C;
    color: white;
}

footer a {
    color: white;
}

footer a:hover {
    color: #1BBF15;
}

a:hover {
    color: #00ACFF;

}

.extrapaddings {
    padding: 20px;
}

.container {
    background-color: #1BBF15;
    color: white;
}

#hidetitle {
    display: none;
}

#hidetext {
    display: none;
}

#backhomeimg {
    display: none;
}

#icon {
    display: none;
}

@media only screen and (min-width: 800px) {

    html {
        padding-top: 100px;
        background-image: url(images/retro-bg.jpg)
    }

    #centerblock {
        border: 3px solid #0D2D8C;
        background-color: lightgray;
        max-width: 800px;
        height: auto;
        margin: auto;
    }

    figure img {
        max-width: 400px;
        height: auto;
        float: right;
        margin-right: 1rem;
        margin-bottom: 1rem;
    }

    figure figcaption {
        display: none;
    }

    table {
        max-width: 300px;
        height: auto;
    }

    #hidetext {
        display: inline;
    }

    #hidebackhometext {
        display: none;
    }

    #hidetitle {
        display: inline;
    }

    #tablefloat {
        float: left;
    }

    #icon {
        display: block;
        border: 3px solid #0D2D8C;
        background-color: lightgray;
        position: absolute;
        top: 20px;
        left: 20px;
    }
}
