@media only screen and (max-width: 9999px) {
    .p1 {
        font-family: 'Orbitron', sans-serif;
        font-size: 120px;
        text-align: center;
        padding: 0px 30px 0px 30px;
        line-height: 0px;
    }

    .p2 {
        font-family: 'Open Sans Condensed', sans-serif;
        font-size: 80px;
        text-align: center;
        padding: 10px;
        line-height: 0px;
        margin-top: 60px;
        margin-bottom: 60px;
    }

    .powered_by {
        font-family: 'Ubuntu Condensed', sans-serif;
        font-size: 16px;
        text-align: center;
        padding: 10px 0 10px 0;
    }

    .login_block {
        display: flex;
        flex-direction: column-reverse;
        font-family: 'Ubuntu Condensed', sans-serif;
        margin: 0 10% 0 10%;
        opacity: 1;
    }

        .login_block > span {
            transition: all .5s;
            transform-origin: top left;
            font-size: 20pt;
            opacity: .5;
        }

        .login_block > input[placeholder=" "]:not(:focus):placeholder-shown + span {
            transform: translateY(1em) scale(1);
            pointer-events: none;
        }

    .login_option_button {
        width: 100%;
    }

        .login_option_button:hover {
            cursor: pointer;
        }

    .login_input {
        background-color: rgba(0, 0, 0, 0);
        color: white;
        border-width: 0 0 1px 0;
        outline: none;
        transition: height 1s;
        -webkit-transition: height 1s;
        font-size: 15px;
        height: 25px;
    }

    .login_button {
        background-color: transparent;
        border: solid;
        border-width: 1px;
        font-family: 'Ubuntu Condensed', sans-serif;
        font-size: 20pt;
        height: 50px;
        width: 80%;
        margin: 30px 10% 30px 10%;
        font-weight: bold;
        color: #83aaaa;
    }

    .social_icon {
        color: #f5f5f5;
        transition: all .2s;
        transform: scale(2);
        margin: 0 5% 0 5%;
    }

        .social_icon:hover {
            cursor: pointer;
            color: coral;
            filter: drop-shadow(0 0 20px #000000);
            -webkit-transform: rotate(10deg) scale(2.5); /* Chrome 4+, Op 15+, Saf 3.1, iOS Saf 3.2+ */
            -moz-transform: rotate(10deg) scale(2.5); /* Fx 3.5-15 */
            -ms-transform: rotate(10deg) scale(2.5); /* IE 9 */
            -o-transform: rotate(10deg) scale(2.5); /* Op 10.5-12 */
            transform: rotate(10deg) scale(2.5); /* Fx 16+, IE 10+ */
        }
}

/*@media only screen and (max-width: 992px) and (orientation: landscape) {
    .p1 {
        font-family: 'Orbitron', sans-serif;
        font-size: 100px;
        text-align: center;
        padding: 0px 30px 0px 30px;
        line-height: 0px;
    }

    .p2 {
        font-family: 'Open Sans Condensed', sans-serif;
        font-size: 60px;
        text-align: center;
        padding: 10px;
        line-height: 0px;
    }

    .powered_by {
        font-family: 'Ubuntu Condensed', sans-serif;
        font-size: 16px;
        text-align: center;
        padding: 10px 0 10px 0;
    }
}

@media only screen and (max-width: 768px) and (orientation: landscape) {
    .p1 {
        font-family: 'Orbitron', sans-serif;
        font-size: 90px;
        text-align: center;
        padding: 0px 30px 0px 30px;
        line-height: 0px;
    }

    .p2 {
        font-family: 'Open Sans Condensed', sans-serif;
        font-size: 50px;
        text-align: center;
        padding: 10px;
        line-height: 0px;
    }

    .powered_by {
        font-family: 'Ubuntu Condensed', sans-serif;
        font-size: 16px;
        text-align: center;
        padding: 10px 0 10px 0;
    }
}

@media only screen and (max-width: 576px) and (orientation: landscape) {
    .p1 {
        font-family: 'Orbitron', sans-serif;
        font-size: 80px;
        text-align: center;
        padding: 0px 30px 0px 30px;
        line-height: 0px;
    }

    .p2 {
        font-family: 'Open Sans Condensed', sans-serif;
        font-size: 40px;
        text-align: center;
        padding: 10px;
        line-height: 0px;
    }

    .powered_by {
        font-family: 'Ubuntu Condensed', sans-serif;
        font-size: 16px;
        text-align: center;
        padding: 10px 0 10px 0;
    }
}*/

@media (pointer:none), (pointer:coarse) {
    .p1 {
        font-family: 'Orbitron', sans-serif;
        font-size: 200px;
        text-align: center;
        padding: 0px 30px 0px 30px;
        line-height: 0px;
    }

    .p2 {
        font-family: 'Open Sans Condensed', sans-serif;
        font-size: 160px;
        text-align: center;
        padding: 10px;
        line-height: 60px;
    }

    .powered_by {
        font-family: 'Ubuntu Condensed', sans-serif;
        font-size: 40px;
        text-align: center;
        padding: 10px 0 10px 0;
    }

    .login_block {
        display: flex;
        flex-direction: column-reverse;
        font-family: 'Ubuntu Condensed', sans-serif;
        margin: 0px 10% 0 10%;
        opacity: 1;
    }

        .login_block > span {
            transition: all .5s;
            transform-origin: top left;
            font-size: 40pt;
            opacity: .5;
        }

        .login_block > input[placeholder=" "]:not(:focus):placeholder-shown + span {
            transform: translateY(1em) scale(1);
            pointer-events: none;
        }

    .login_input {
        background-color: rgba(0, 0, 0, 0);
        color: white;
        border-width: 0 0 1px 0;
        outline: none;
        transition: height 1s;
        -webkit-transition: height 1s;
        font-size: 45px;
        height: 55px;
    }

    .login_button {
        background-color: transparent;
        border: solid;
        border-width: 1px;
        font-family: 'Ubuntu Condensed', sans-serif;
        font-size: 40pt;
        height: 100px;
        width: 80%;
        margin: 30px 10% 30px 10%;
        font-weight: bold;
        color: #83aaaa;
    }

    .social_icon {
        color: #f5f5f5;
        transition: all .2s;
        transform: scale(5);
        margin: 30px 6% 0 6%;
    }

        .social_icon:hover {
            cursor: pointer;
            color: coral;
            filter: drop-shadow(0 0 10px #000000);
            -webkit-transform: rotate(10deg) scale(5.5); /* Chrome 4+, Op 15+, Saf 3.1, iOS Saf 3.2+ */
            -moz-transform: rotate(10deg) scale(5.5); /* Fx 3.5-15 */
            -ms-transform: rotate(10deg) scale(5.5); /* IE 9 */
            -o-transform: rotate(10deg) scale(5.5); /* Op 10.5-12 */
            transform: rotate(10deg) scale(5.5); /* Fx 16+, IE 10+ */
        }
}
