.letter
{
    border: 1px solid black;
    width: 10%;

}




/**************************************************************************
*
*                                   NEW
*
*
*/

body
{
    margin: 0;
    padding: 0;
}

html
{
    background: url(bgbg.png) no-repeat center center fixed;
    width: 100%;
    height: 100%;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;


}

        .all-container
        {
        /*  Size    */
        width: 70%;
        /*  Margin    */
        margin: 0;
        margin-top: 35%;
        margin-left: 30%;
        /*  Padding    */
        padding: 0;
        /*  Border    */

        /*  Background    */
        background-color: transparent;
        /*  Font    */
        font-family: Michroma;
        font-size: 7.0vh;
        text-align: center;
        /*  Behaviour    */
        position: absolute;
        }


                .logo
                {
                    /*  Size    */
                    width: 100%;
                    /*  Font    */
                    font-size: 9vh;
                    color: rgb(169,3,41); /* Old browsers */
                    /*  Behaviour    */
                    float: right;

                }

                .key
                {
                    /*  Size    */
                    width: 100%;
                    /*  Font    */
                    font-size: 2.2vh;
                    color: black; /* Old browsers */
                    /*  Behaviour    */
                    float: right;
                }
                        .blink{
                            width: 1px;
                            font-family: cursive;
                            color: white;
                            font-size: 2.3vh;
                            text-align: left;
                            animation: blink 0.8s linear infinite;
                        }
                        @keyframes blink{
                            0%{opacity: 0;}
                            50%{opacity: .5;}
                            100%{opacity: 1;}
                        }


                .icons
                {
                    width: 100%;
                    display: flex;
                    text-align: center;
                }


                        .php7
                        {
                            width: 100px;
                            height: 40px;
                            bottom: 0;
                            background-image: url("7.png");
                            background-size: 100%;
                            background-repeat: no-repeat;
                            margin-left: auto;
                            margin-right: 0;
                        }


                        .l5
                        {
                            width: 40px;
                            height: 40px;
                            bottom: 0;
                            background-image: url("5.png");
                            background-size: 100%;
                            background-repeat: no-repeat;

                        }


                        .vcs
                        {
                            width: 40px;
                            height: 40px;
                            bottom: 0;
                            background-image: url("vcs.png");
                            background-size: 100%;
                            background-repeat: no-repeat;
                            margin-left: 5px;
                            margin-right: auto;
                        }
                .footer
                {
                    border: 1px solid black;
                    width: 100%;
                    position: fixed;
                    margin-bottom: 0;
                    bottom: 0;
                    background-color: black;
                    opacity: 0.7;
                    line-height: 20px;
                    text-align: center;
                    font-size: 3.0vh;
                    color: white;
                }


/*
*
*                               iPhone 5, 5s from 568px
*-----------------------------------------------------------------------------------------
*
*
*/
@media only screen  and (min-width : 568px) {

    .all-container {
        /*  Size    */
        width: 60%;
        /*  Margin    */
        margin-top: 10%;
        margin-left: 30%;
        /*  Padding    */
        padding: 0;
    }

    .key
    {
        font-size: 3vh;
    }

    .footer
    {
        font-size: 6vh;
    }
}

/*
*
*                               iPhone 7 from 667px
*-----------------------------------------------------------------------------------------
*
*
*/
@media only screen  and (min-width : 667px) {

    .all-container {
        /*  Size    */
        width: 60%;
        /*  Margin    */
        margin-top: 15%;
        margin-left: 30%;
        /*  Padding    */
        padding: 0;
    }

    .key
    {
        font-size: 3vh;
    }

    .footer
    {
        font-size: 4.0vh;
        line-height: 30px;
    }
}


/*
*
*                               iPhone 7+ from 736px
*-----------------------------------------------------------------------------------------
*
*
*/
        @media only screen  and (min-width : 736px) {

            .all-container {
                /*  Size    */
                width: 60%;
                /*  Margin    */
                margin-top: 30%;
                margin-left: 33%;
                /*  Padding    */
                padding: 0;
            }

            .key
            {
                font-size: 3vh;
            }

            .footer
            {
                font-size: 2.0vh;
                line-height: 30px;
            }
        }

/*
*
*                               iPads 7 from 600px
*-----------------------------------------------------------------------------------------
*
*
*/
@media only screen  and (min-width : 600px) {

    .all-container {
        /*  Size    */
        width: 60%;
        /*  Margin    */
        margin-top: 25%;
        margin-left: 30%;
        /*  Padding    */
        padding: 0;
    }

    .key
    {
        font-size: 3vh;
    }

    .footer
    {
        font-size: 3vh;
    }
}

/*
*
*                               iPads from 800px
*-----------------------------------------------------------------------------------------
*
*
*/
        @media only screen  and (min-width : 800px) {

            .all-container {
                /*  Size    */
                width: 60%;
                /*  Margin    */
                margin-top: 20%;
                margin-left: 33%;
                /*  Padding    */
                padding: 0;
            }

            .key
            {
                font-size: 3vh;
            }

            .footer
            {
                font-size: 6vh;
            }
        }


/*
*
*                               iPad 2, 3, mini from 1024px
*-----------------------------------------------------------------------------------------
*
*
*/
@media only screen  and (min-width : 1024px) {

    .all-container {
        /*  Size    */
        width: 60%;
        /*  Margin    */
        margin-top: 20%;
        margin-left: 33%;
        /*  Padding    */
        padding: 0;
    }

    .key
    {
        font-size: 3vh;
    }

    .footer
    {
        font-size: 2.0vh;
        line-height: 30px;
    }

}



/*
*
*                               Desktops and laptops from 1224px
*-----------------------------------------------------------------------------------------
*
*
*/
        @media only screen  and (min-width : 1224px) {
            .all-container {
                /*  Size    */
                width: 60%;
                /*  Margin    */
                margin: 0;
                margin-top: 20%;
                margin-left: 30%;
                /*  Padding    */
                padding: 0;
            }

            .key
            {
                font-size: 3vh;
            }

            .footer
            {
                font-size: 2.0vh;
                line-height: 30px;
            }
        }

/*
*
*                               Large screens from 1824px
*-----------------------------------------------------------------------------------------
*
*
*/
        @media only screen  and (min-width : 1824px) {

            .all-container {
                /*  Size    */
                width: 60%;
                /*  Margin    */
                margin: 0;
                margin-top: 15%;
                margin-left: 30%;
                /*  Padding    */
                padding: 0;
            }

            .key
            {
                font-size: 3vh;
            }

            .footer
            {
                font-size: 2.0vh;
                line-height: 30px;
            }


        }