body {
        font-family: cooper,"Segoe UI",Arial,sans-serif;
        background-color:black;
    }
    .name{
        color: white;
        position:fixed;
        left:5px;
        bottom:5px;
        z-index:10;
    }
    .imgshow{
        display:inline-block;
        background-size: cover;
        background-position: 50% 50%;
        position: fixed;
        width: 100%;
        height: 100%;
        top: 0px;
        left: 0px;
        z-index: -10;
        animation: imageAnimationIn 3s linear 0s;
    }
    .imghide{
        background-size: cover;
        background-position: 50% 50%;
        position: fixed;
        width: 100%;
        height: 100%;
        top: 0px;
        left: 0px;
        z-index: -20;
        animation: imageAnimationOut 3s linear 0s;
    }
    .imgnone{
        display:none;
    }
    #nav{
        position: fixed;
        top: 50%;
        left: 0px;
        width:100%
    }
    #left{
        float:left;
        margin-left:1%;
        font-size:150%;
    }
    #right{
        float:right;
        margin-right:1%;
        font-size:150%;
    }
    #title{
        margin-top:5%;
        text-align:center;
        color:yellow;
        font-size:300%;
        z-index: 10;
        animation: imageAnimationIn 3s linear 0s;
    }
    #imgurl{
        position:fixed;
        right: 0;
        bottom: 0;
        z-index:10;
    }
    @keyframes imageAnimationIn { 
        0% {
            opacity: 0;
            animation-timing-function: ease-in;
        }
        100% {
            opacity: 1;
        }
    }
    @keyframes imageAnimationOut { 
        0% {
            opacity: 1;
            animation-timing-function: ease-in;
        }
        100% {
            opacity: 0;
            animation-timing-function: ease-out;
            display:none;
        }
    }