@media screen and (max-height: 650px) {
    header {
        position: static;
    }
    article {
        margin-top: 0px;
    }
}

@media screen and (max-width: 850px) {
    header {
        position: static;
    }

    article {
        margin-top: 0px;
        padding-left: 40px;
        padding-right: 40px;
        background-position: 50% 0px;
    }

    .name {
        display: none;
    }

    .platform {
        display: none;
    }

    .logo {
        float: left;
        margin-top: 2px;
        margin-left: 15px;
    }

    .beetleship {
        left: 10%;
    }

    .octopus {
        left: auto;
        right: 10%;
    }

    h1 {
        font-size: 20px;
    }

    hr {
        width: 70%;
    }

    li {
        display: block;
        margin-left: auto;
        margin-right: auto;
        width: 270px;
    }

}

@media screen and (max-width: 600px) {
    
    .logo {
        display: none;
    }

}