html, body {
    height: 100%;
    /* background: linear-gradient(to right bottom, rgb(83, 177, 176) 0%, rgb(69, 156, 154) 100%);
    background-repeat: no-repeat;
    background-attachment: fixed; */
    background-color: rgb(255, 255, 255);
}

body {
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: space-between;
    margin: 0;
    font-family: sans-serif;
}

div.top {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
}

a.link {
    display: block;
    text-align: center;
    background: white;
    color: rgb(69, 156, 154);
    color: hsl(352, 63%, 75%);
    width: 350px;
    padding-top: 5pt;
    padding-bottom: 5pt;
    border: 2pt solid white;
    border-radius: 10pt;
    text-decoration: none;
    transition: 0.3s;
    font-size: larger;
    margin: 7.5pt 5pt;
}

a.button1 {
    display: block;
    text-align: center;
    background: rgb(255, 76, 139);
    color: rgb(250, 250, 250);
    width: 350px;
    padding-top: 5pt;
    padding-bottom: 5pt;
    border: pt solid rgb(75, 72, 72);
    border-radius: 10pt;
    text-decoration: none;
    transition: 0.3s;
    font-size: larger;
    margin: 7.5pt 5pt;
}
a.button1:hover {
    color: rgb(253, 212, 226);
    font-weight: bold;
}
a.button2 {
    display: block;
    text-align: center;
    background: rgb(251, 142, 162);
    color: rgb(250, 250, 250);
    width: 350px;
    padding-top: 5pt;
    padding-bottom: 5pt;
    border: 0pt solid rgb(75, 72, 72);
    border-radius: 10pt;
    text-decoration: none;
    transition: 0.3s;
    font-size: larger;
    margin: 7.5pt 5pt;
}
a.button2:hover {
    color: rgb(254, 223, 228);
    font-weight: bold;
}

a.button3 {
    display: block;
    text-align: center;
    background: rgb(251 132 15);
    color: rgb(250, 250, 250);
    width: 350px;
    padding-top: 5pt;
    padding-bottom: 5pt;
    border: 0pt solid rgb(75, 72, 72);
    border-radius: 10pt;
    text-decoration: none;
    transition: 0.3s;
    font-size: larger;
    margin: 7.5pt 5pt;
}
a.button3:hover {
    color: rgb(254 225 197);
    font-weight: bold;
}
a.button4 {
    display: block;
    text-align: center;
    background: rgb(253 189 20);
    color: rgb(250, 250, 250);
    width: 350px;
    padding-top: 5pt;
    padding-bottom: 5pt;
    border: 0pt solid rgb(75, 72, 72);
    border-radius: 10pt;
    text-decoration: none;
    transition: 0.3s;
    font-size: larger;
    margin: 7.5pt 5pt;
}
a.button4:hover {
    color: rgb(254 240 202);
    font-weight: bold;
}
a.button5 {
    display: block;
    text-align: center;
    background: rgb(108 182 61);
    color: rgb(250, 250, 250);
    width: 350px;
    padding-top: 5pt;
    padding-bottom: 5pt;
    border: 0pt solid rgb(75, 72, 72);
    border-radius: 10pt;
    text-decoration: none;
    transition: 0.3s;
    font-size: larger;
    margin: 7.5pt 5pt;
}
a.button5:hover {
    color: rgb(230 250 216);
    font-weight: bold;
}
a.button6 {
    display: block;
    text-align: center;
    background: rgb(55 204 230);
    color: rgb(250, 250, 250);
    width: 350px;
    padding-top: 5pt;
    padding-bottom: 5pt;
    border: 0pt solid rgb(75, 72, 72);
    border-radius: 10pt;
    text-decoration: none;
    transition: 0.3s;
    font-size: larger;
    margin: 7.5pt 5pt;
}
a.button6:hover {
    color: rgb(219 249 254);
    font-weight: bold;
}
a.link:hover {
    background: none;
    color: white;
}

div.links {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: auto;
}

header {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 5pt;
    color: rgb(42, 35, 39);
}

header img {
    margin: 2pt;
    width: 400px;
    border: 5;
    border-color: black;
}

footer {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.footer-row {
    display: flex;
    flex-direction: row;
    gap: 10pt;
    align-items: center;
    margin-bottom: 10pt;
}

footer a.instagram {
    color: rgb(42, 35, 39);
    border: 2px solid white;
    border-radius: 50%;
    text-decoration: none;
    display: block;
    font-size: x-large;
    line-height: 35px;
    width: 35px;
    height: 35px;
    text-align: center;
}

footer a.instagram i {
    text-align: center;
    width: 100%;
}

footer a.disclaimer {
    color: rgb(42, 35, 39);
    text-decoration: none;
    transition: 0.3s;
    line-height: 35px;
    display: block;

}

footer a.disclaimer:hover {
    text-decoration: underline;
}

footer img {
    width: 200px;
}

h2 {
    margin-top: 0;
}

h1 {
    margin-bottom: 0.2em;
}

.ants {
    width: 100%;
}

.smith {
    position: absolute;
    left: 100%;
    top: 30%;
    width: 50%;
}

@media only screen and (max-width: 600px) {
    a.link {
        font-size: medium;
        margin: 5pt;
    }

    header img {
        width: 300px;
    }

    footer img {
        width: 200px;
    }

    .smith {
        width: 20%;
        top: 10pt;
        left: calc(50% + 60px);
    }
}