@font-face
    font-family: 'Gotham'
    src: url('../fonts/Gotham-Font/Gotham-Bold.otf')

*
    margin: 0
    padding: 0

body
    font-family: 'Gotham', sans-serif
    text-transform: uppercase
    background-color: black

.socials
    font-size: 3vh
    left: 0
    line-height: 4vh
    letter-spacing: 15px
    position: absolute
    text-align: center
    top: 25%
    width: 100%
    text-transform: uppercase

    a
        text-decoration: none
        color: #ffffff

    #Etsy a:hover
        color: #F5B5D6
    #Twitter a:hover
        color: #82E9F2
    #Instagram a:hover
        color: #F0EDB7
    #Twitch a:hover
        color: #979FEE
    #Discord a:hover
        color: #A7E7BD

.links
    display: inline-block

a
    display: flex
    justify-content: space-between

.logo
    width: auto
    height: 15vh
    filter: invert(1)

.credits
    position: absolute
    left: 50%
    right: 25%
    bottom: 30px
    margin-left: -50px

.creator
    font-size: 2.5vh
    color: white
    text-align: center
    display: table-caption
    padding: 1vh
    position: absolute
    top: 95%

.creator a
    text-decoration: none
    margin: 0
    padding: 0
    color: #ff58d567

.creator a:hover
    color: #ff08c167

.them
    width: auto
    height: 16vh
    margin-left: -20px

.floating
    animation-name: floating
    animation-duration: 3s
    animation-iteration-count: infinite
    animation-timing-function: ease-in-out

@keyframes floating
    from
        transform: translate(0, 0px)
    65%
        transform: translate(0, 10px)
    to
        transform: translate(0, -0px)
