/* Style Sheet */

body{
    margin : 0;
    
    background-color : lightblue;
}

a{
    padding : 3px;
    
    color : blue;
    text-decoration : none;
    border-radius : 20px;
}a:hover, #topnav a:hover, #bottomnav a:hover{
    background-color : gray;
    color : azure;
}a:active, #topnav a:active, #bottomnav a:active{
    background-color : dimgray;
}

.break{
    text-align : center;
    
    font-size : 48px;
    font-weight : 900;
}

@media screen and (min-width : 780px){

    header{
        background-color : white;
    }
    
    /*Top Style Start*/

    #top{
        width : 100%;
        height : 100px;

        position : relative;

        font-family : Arial, sans-serif;
    }

    #toptitle{
        height : 54px;
        
        margin : 0;
        
        position : absolute;
        left : 4%;
        top : 23px;

        font-size : 48px;
    }

    #topnav{
        height : 42px;
        
        position : absolute;
        right : 12%;
        top : 29px;

        font-size : 36px;
    }#topnav a{ color : black; }
    
    /*Top Style End*/
    
    /*Intro Style Start*/

    #intro{
        width : 100%;
        height : 512px;
        
        position : relative;

        background-image : url("CoverALOAL.jpeg");
        background-size : 1698px;
        background-position : center;
        background-position-y : -1100px;
    }

    #introalign{
        position : absolute;
        width : 100%;
        top : 15%;

        text-align : center;
        text-shadow : 0 0 10px blue;
        
        font-size : 48px;
        font-family : Georgia, serif;
    }

    #introtitle{
        color : rgba(220, 109, 26, 0.88);
    }

    #intronav a{
        background-color : black;
        color : rebeccapurple;
        
        /*font-family : Arial, sans-serif;*/
    }#intronav a:hover{ color : dimgray; }#intronav a:active{ background-color : #242424; }
    
    /*Intro Style End*/

    main{
        background-color : lightblue;

        text-align : center;
        
        font-size : 32px;
        font-family : Georgia, serif;
    }

    #hello{
        margin : 0 10% 0 10%;
        padding : 5px;

        background-color : white;
        border : outset 10px lightgray;
        /*border-radius : 30px;*/
        
        text-align : center;
    }#hello b{
        font-size : 36px;
    }#hello a{
        color : blue;
        text-decoration : underline;
    }#hello a:hover{ text-decoration : none; }
    
    /*Content Style Start*/

    .content{
        display : flex;
        flex-direction : row;
        flex-wrap : wrap;

        margin-left : auto;
        margin-right : auto;
    }

    .writings{
        width : 700px;

        margin : auto;
    }

    .writings img{
        display : block;
        margin-left : auto;
        margin-right : auto;
    }

    .writings p{
        margin : 0 30px;
        font-size : medium;
    }.writings p b{
        font-size : larger;
    }.writings p em{
        font-style : normal;
        text-shadow : 0 0 10px gray;
    }
    
    .writings a{
        display : block;
        margin : 20px 0;
        
        color : blue;
        font-size : large;
    }
    
    .characters{
        width : 750px;
        
        margin : auto;
    }
    
    .drawings{
        display : flex;
        flex-direction : row;
        flex-wrap : wrap;
    }.drawings img{
        display : block;
        margin : auto;
    }

    .updatelog{
        width : 700px;

        margin-left : auto;
        margin-right : auto;
        margin-top : auto;
        margin-bottom : auto;

        background-color : lightgray;
        border : inset 10px black;
    }.updatelog p{
        margin-left : 30px;
        margin-right : 30px;
    }
    
    /*Content Style End*/

    #aboutme{
        margin : 0 10% 0 10%;
        padding : 5px;

        background-color : deepskyblue;
        border : outset 10px darkblue;
        /*border-radius : 30px;*/
        
        text-align : center;
    }

    footer{
        height : 100px;
        
        position : relative;
        
        background-color : gray;
        text-align : center;
    }

    #return{
        display : block;
        margin-top : 5px;
        
        background-color : azure;
        border : outset 5px black;
        
        color : black;
        font-weight : bold;
    }

    #bottomnav{
        margin-top : 15px;
        margin-bottom : 15px;
        
        color : rebeccapurple;
    } #bottomnav a{ color : rebeccapurple; }

    #copyright{
        margin : 0 auto;
        width : 100%;
        position : absolute;
        bottom : 0;
        
        color : rgba(0, 0, 0, 0.25)
    }
    
}



/*PHONES*/
@media screen and (max-width : 780px){

    header{
        background-color : white;
    }

    #top{
        width : 100%;
        height : 75px;
        
        position : relative;
        
        font-family : Helvetica, sans-serif;
    }

    #toptitle{
        margin : 0;
        height : 32px;

        position : absolute;
        left : 10px;
        top : 24px;
        
        font-size : 27px;
    }

    #topnav{
        height : 20px;

        position : absolute;
        right : 18px;
        top : 28px;
        
        font-size : 20px;
    }#topnav a{ color : black; }

    #intro{
        height : 300px;
        margin : 0;
        position : relative;

        background-image : url("CoverALOAL.jpeg");
        background-size : cover;
        background-repeat : norepeat;
        background-position : center;

    }

    #introalign{
        position : absolute;

        width : 100%;
        top : 15%;
        
        text-align : center;
        text-shadow : 0 0 10px blue;
        
        font-size : 32px;
        font-family : Times, serif;
    }

    #introtitle{
        color : rgba(220, 109, 26, 0.88);
    }

    #intronav a{
        background-color : black;
        color : rebeccapurple;
        
        /*font-family : Arial, sans-serif;*/
    }#intronav a:hover{ color : dimgray; }#intronav a:active{ background-color : #242424; }
    
    .break{
        font-size : 20px;
    }

    main{
        background-color : lightblue;

        text-align : center;
        
        font-size : 16px;
        font-family : Georgia, serif;
    }

    #hello{
        margin : 0 10% 0 10%;
        padding : 5px;

        background-color : white;
        border : outset 10px lightgray;
        /*border-radius : 30px;*/
        
        text-align : center;
    }#hello b{
        font-size : 20px;
    }#hello a{
        color : blue;
        text-decoration : underline;
    }#hello a:hover{ text-decoration : none; }
    
    /*Content Style Start*/

    #content{
        display : flex;
        flex-direction : row;
        flex-wrap : wrap;

        margin-left : auto;
        margin-right : auto;
    }

    #writings{
        width : 100%;

        margin : auto;
    }

    #writings img{
        width : 426px;
        display : block;
        margin-left : auto;
        margin-right : auto;
    }

    #writings p{
        margin : 0 30px;
        font-size : medium;
    }#writings p b{
        font-size : larger;
    }#writings p em{
        font-style : normal;
        text-shadow : 0 0 10px gray;
    }
    
    #writings a{
        display : block;
        margin : 20px 0;
        
        color : blue;
        font-size : large;
    }

    .updatelog{
        width : 80%;

        margin-left : auto;
        margin-right : auto;
        margin-top : auto;
        margin-bottom : auto;

        background-color : lightgray;
        border : inset 10px black;
    }.updatelog p{
        margin-left : 30px;
        margin-right : 30px;
    }
    
    /*Content Style End*/

    #aboutme{
        margin : 20px 10% 0 10%;
        padding : 5px;

        background-color : deepskyblue;
        border : outset 10px darkblue;
        /*border-radius : 30px;*/
        
        text-align : center;
    }

    footer{
        height : 100px;
        
        position : relative;
        
        background-color : gray;
        text-align : center;
    }

    #return{
        display : block;
        margin-top : 5px;
        
        background-color : azure;
        border : outset 5px black;
        
        color : black;
        font-weight : bold;
    }

    #bottomnav{
        margin-top : 15px;
        margin-bottom : 15px;
        
        color : rebeccapurple;
    } #bottomnav a{ color : rebeccapurple; }

    #copyright{
        margin : 0 auto;
        width : 100%;
        position : absolute;
        bottom : 0;
        
        color : rgba(0, 0, 0, 0.25)
    }
    
}