*{box-sizing: border-box;}

@media all and (max-width: 360px)
{
    .content_wrapper{
        position:absolute;
        width:100%;
        height:700px;
        left:0px;
        top:0px;
        margin:0 auto;
        padding:0 auto;
    }
        .screen_top_split{
            position:relative;
            width:100%;
            height:60%;
            top:0px;
            background: linear-gradient(0deg, rgba(190,193,194,1) 0%, rgba(238,238,249,1) 36%, rgba(199,199,209,1) 100%);     
            user-select: none;
        }
        #mobile_menu{
            position:absolute;
            width:35px;
            height:35px; 
            margin-top:20px;
            margin-left:85%;
            /*border:1px solid #ffffff;*/
            /*border-radius:5px;*/
            user-select:none;
            z-index:2;
            opacity: 1;
        }
            #mobile_menu:hover{
                cursor:pointer;
            }
            #mobile_menu li{
                position:relative;
                display:block;
                width:26px;
                height:3px;
                margin:0 auto;
                margin-top:6px;
                border-radius:3px;
                background-color:#ffffff;
                text-decoration: none;
                user-select:none;
            } 
        #menu_options{
            display:none;
        }
            #menu_option_list0{
                display:none;
            }
            #menu_option_list1{
                display:none;
            }
            #menu_option_list2{
                display:none;
            }
        #git_hub_profile{
            position:relative;
            margin:0 auto;
            width:100%;
            height:50px;
            top:10px;
            color: #ffffff;
            font-family:Tahoma, Georgia, Verdana, sans-serif;
            text-align:center;
            user-select:none;
        }
            #git_hub_profile a{
                font-size:1em;
                text-decoration: none;
                user-select:none;
                text-align:center;
                color:#ffffff;
            }
        #img_placeholder{
            position:relative;
            margin:0 auto;
            width:180px;
            height:170px;
            top:50px;
            border: 2px solid #ffffff;
            border-radius:50%;
            overflow: hidden;
            user-select: none;
        }
            #img_placeholder img{
                width:180px;
                height:170px;
                user-select: none;
            }
        h2{
            position:relative;
            margin:0 auto;
            top:90px;
            text-align:center;
            font-family:Georgia, Geneva, Tahoma, sans-serif;
            font-weight:bold;
            font-size:1.9em;
            color: #ffffff;    
            user-select:none;
        }
    .screen_bottom_split{
        position:relative;
        margin:0 auto;
        width:100%;
        height:40%;
        top:-1px;
        background:rgba(190,193,194,1);
        user-select: none;
    }
    #menu{
        display:none;
    }
        #menu li{
            display: none; 
        }   
    #menu_options{
        display:none;
        
    }
        #menu_option_list0{
            display:none;
        }
        #menu_option_list1{
            display:none;
        }
        #menu_option_list2{
            display:none;
        }
        .screen_bottom_split p{
            position:relative;
            width:95%;
            top:30px;
            margin:0 auto;
            height:30%;
            font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
            font-weight: bold;
            font-size: 1.1em;
            color: floralwhite;
            user-select:none;
            text-align:center;
        }
}
@media all and (min-width: 361px) and (max-width: 420px){
    .content_wrapper{
        position:absolute;
        width:100%;
        height:820px;
        left:0px;
        top:0px;
        margin:0 auto;
        padding:0 auto;
    }
        .screen_top_split{
            position:relative;
            width:100%;
            height:60%;
            top:0px;
            background: linear-gradient(0deg, rgba(190,193,194,1) 0%, rgba(238,238,249,1) 36%, rgba(199,199,209,1) 100%);     
            user-select: none;
        }
        #mobile_menu{
            position:absolute;
            width:35px;
            height:35px; 
            margin-top:20px;
            margin-left:85%;
            /*border:1px solid #ffffff;*/
            /*border-radius:5px;*/
            user-select:none;
            z-index:2;
            opacity: 1;
        }
            #mobile_menu:hover{
                cursor:pointer;
            }
            #mobile_menu li{
                position:relative;
                display:block;
                width:26px;
                height:3px;
                margin:0 auto;
                margin-top:6px;
                border-radius:3px;
                background-color:#ffffff;
                text-decoration: none;
                user-select:none;
            } 
        #menu_options{
            display:none;
        }
            #menu_option_list0{
                display:none;
            }
            #menu_option_list1{
                display:none;
            }
            #menu_option_list2{
                display:none;
            }
        #git_hub_profile{
            position:relative;
            margin:0 auto;
            width:100%;
            height:50px;
            top:10px;
            color: #ffffff;
            font-family:Tahoma, Georgia, Verdana, sans-serif;
            text-align:center;
            user-select:none;
        }
            #git_hub_profile a{
                font-size: 1.2em;
                text-decoration: none;
                user-select:none;
                text-align:center;
                color:#ffffff;
            }
        #img_placeholder{
            position:relative;
            margin:0 auto;
            width:190px;
            height:180px;
            top:50px;
            border: 2px solid #ffffff;
            border-radius:50%;
            overflow: hidden;
            user-select: none;
        }
            #img_placeholder img{
                width:190px;
                height:180px;
                user-select: none;
            }
        h2{
            position:relative;
            margin:0 auto;
            top:90px;
            text-align:center;
            font-family:Georgia, Geneva, Tahoma, sans-serif;
            font-weight:bold;
            font-size:2.1em;
            color: #ffffff;    
            user-select:none;
        }
    .screen_bottom_split{
        position:relative;
        margin:0 auto;
        width:100%;
        height:40%;
        top:-1px;
        background:rgba(190,193,194,1);
        user-select: none;
    }
    #menu{
        display:none;
    }
        #menu li{
            display: none; 
        }   
    #menu_options{
        display:none;
        
    }
        #menu_option_list0{
            display:none;
        }
        #menu_option_list1{
            display:none;
        }
        #menu_option_list2{
            display:none;
        }
        .screen_bottom_split p{
            position:relative;
            width:95%;
            top:-30px;
            margin:0 auto;
            height:30%;
            font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
            font-weight: bold;
            font-size: 1.3em;
            color: floralwhite;
            user-select:none;
            text-align:center;
        }

}
@media all and (min-width: 769px){
    .content_wrapper{
        position:absolute;
        width:100%;
        height:100%;
        left:0;
        top:0;
        margin:0 auto;
        padding:0 auto;
        background-color: aquamarine;
    }
    /*page splits heights measured in per cent as using tv, will change
        when include media queries */
        .screen_top_split{
            position:relative;
            margin: 0 auto;
            width:100%;
            height:48%;
            background: linear-gradient(0deg, rgba(190,193,194,1) 0%, rgba(238,238,249,1) 36%, rgba(199,199,209,1) 100%);     
            user-select: none;
        }
            #git_hub_profile{
                position:relative;
                width:100%;
                height:50px;
                top:50px;
                color: #ffffff;
                font-family:Tahoma, Georgia, Verdana, sans-serif;
                margin:0 auto;
                text-align:center;
                user-select:none;
            }
                #git_hub_profile a{
                    text-decoration: none;
                    user-select:none;
                    text-align:center;
                }
            #img_placeholder{
                position:relative;
                width:180px;
                height:170px;
                top:50px;
                border: 2px solid #ffffff;
                border-radius:50%;
                margin: 0 auto;
                overflow: hidden;
                user-select: none;
            }
                #img_placeholder img{
                    width:180px;
                    height:170px;
                    user-select: none;
                }
            h2{
                position:relative;
                padding-top:40px;
                text-align:center;
                font-family:Georgia, Geneva, Tahoma, sans-serif;
                font-weight:bold;
                font-size:1.7em;
                color: #ffffff;    
                user-select:none;
            }
        .screen_bottom_split{
            position:relative;
            margin: 0 auto;
            top:-1px;
            width:100%;
            height:52%;
            background:rgba(190,193,194,1);
            user-select: none;
        }
            #menu{
                position:relative;
                width:100%;
                height:30px;
                top:5px;
                margin:auto;
                text-align:center; 
                list-style-type: none;
                padding:0px;
                user-select: none;
            }
                #menu li{
                    position:relative;
                    display:inline-block;
                    margin: 0 auto;
                    width:120px;
                    height:30px;
                    top:-1px;
                    font-family:Tahoma, Georgia, Verdana, sans-serif;
                    font-size:.9em;
                    text-decoration: none;
                    padding-top:1px;
                    color:#ffffff;
                    user-select:none; 
                }
                    #menu li:hover{
                        cursor: pointer;
                        font-weight:bold;
                        border-top:1px solid #ffffff;
                    }   
            #menu_options{
                position:relative;
                margin:0 auto;
                top:2px;
                width:372px;
                height:100px;  
                padding:0;
                user-select: none;
                
            }
                #menu_option_list0{
                    display:none;
                    position:absolute;
                    width:123px;
                    height:98px;
                    margin-left:0;
                    background:rgba(190,193,194,1);
                    border:1px solid white;
                    z-index:1;
                    user-select:none;
                }
                #menu_option_list1{
                    display:none;
                    position:absolute;
                    width:123px;
                    height:98px;
                    margin-left:124px;   
                    background:rgba(190,193,194,1);          
                    border:1px solid white;
                    z-index:1;
                    user-select:none;
                }
                #menu_option_list2{
                    display:none;
                    position:absolute;
                    width:123px;
                    height:98px;
                    margin-left:248px;   
                    background:rgba(190,193,194,1);          
                    border:1px solid white;
                    z-index:1;
                    user-select:none;
                }
            p{
                position:relative;
                top:-50px;
                margin:0 auto;
                width:60%;
                height:30%;
                font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
                font-size: 1.1em;
                color: floralwhite;
                user-select:none;
            }
}