/* Main stylesheet */

* {
    margin: 5px;
    padding: 0;
    box-sizing: border-box; 
}

/* style for background image */
body {
    background-repeat: no-repeat;
}

/* style for main text on page */
h1 {
    font-size: 5.0em;
    color: gold;
    font-weight: lighter;
    text-decoration: none;
    font-family: 'Satisfy', cursive;
}

p {
    color: black;
    font-family: 'Courgette', cursive;
    float: right;
    position: absolute;
    left: 58%;
    top: 5%;
    font-size: 1.6em;
}

/* container holding menu links */
.w3-container {
    display: block;
    margin-top: 250px;
    text-align: center;
}


/* Start menu links styling */
.top a {
    text-decoration: overline;
    text-decoration-color: gold;
    color: black;
    font-size: 2.5em;
    font-weight: bold;
    position: absolute;
    left: 65%;
    top: 35%;
    
}

.bottom a {
    text-decoration: overline;
    text-decoration-color: gold;
    color: black;
    font-size: 2.5em;
    font-weight: bold;
    position: absolute;
    left: 68%;
    top: 55%;
}

/* End menu styling */

/* Media query styling */
@media screen and (max-width: 992px) {
    body {
        background-size: auto;
        background-color: black;
        position: absolute;
    }
    
    h1 {
        margin-left: 5px;
        margin-bottom: 5px;
        font-size: 4.0em;
        padding-bottom: 20px;
        padding-left: 5px;
    }

    

    p {
        position: absolute;
        top: 35%;
        left: 2%;
        color: azure;
        font-size: 1.6em;
    }

    .bottom {
        position: absolute;
        top: 165%;
    }

    .top a {
        position: absolute;
            top: 120%;
            left: 0%;
            -ms-transform: translate(-0%, -120%);
            transform: translate(-0%, -120%);
            font-size: 2.3em;
            color: gold;
            text-decoration-color: black;
    }
    
    .bottom a {
        position: absolute;
            top: 135%;
            left: 0%;
            -ms-transform: translate(-0%, -135%);
            transform: translate(-0%, -135%);
            font-size: 2.3em;
            color: gold;
            text-decoration-color: black;
    }
}

    @media scteen and (max-width: 1024px) {
        h1 {
            margin-left: 5px;
            margin-bottom: 5px;
            font-size: 4.0em;
            padding-bottom: 20px;
            padding-left: 5px;
        }
    
        
    
        p {
            position: absolute;
            top: 35%;
            left: 2%;
            color: azure;
            font-size: 1.6em;
        }
    
        .bottom {
            position: absolute;
            top: 165%;
        }
    
        .top a {
            position: absolute;
                top: 120%;
                left: 0%;
                -ms-transform: translate(-0%, -120%);
                transform: translate(-0%, -120%);
                font-size: 2.3em;
                color: gold;
                text-decoration-color: black;
        }
        
        .bottom a {
            position: absolute;
                top: 135%;
                left: 75%;
                -ms-transform: translate(-75%, -135%);
                transform: translate(-75%, -135%);
                font-size: 2.3em;
                color: gold;
                text-decoration-color: black;
        }
    }
    

    @media screen and (max-width: 600px) {
        
        h1 {
            font-size: 5em;
        }

        p {
            position: absolute;
            top: 35%;
            left: 2%;
            color: azure;
        }

        .bottom {
            position: absolute;
            top: 130%;
        }
        
        .top a {
            position: absolute;
            top: 55%;
            left: 0%;
            -ms-transform: translate(-0%, -55%);
            transform: translate(-0%, -55%);
            font-size: 2.3em;
            color: gold;
            text-decoration-color: black;
        
        }

        .bottom a {
            position: absolute;
            top: 120%;
            left: 0%;
            -ms-transform: translate(-0%, -0%);
            transform: translate(-0%, -0%);
            font-size: 2.3em;
            color: gold;
            text-decoration-color: black;
        }
    }

    @media screen and (max-width: 480px) {
        
        
        h1 {
            font-size: 2.5em;
        }

        p {
            position: absolute;
            top: 25%;
            left: 0%;
            color: azure;
            font-size: 1.0em;
        }

        .top a {
            position: absolute;
            left: 0%;
            top: 85%;
            -ms-transform: translate(-0%, -85%);
            transform: translate(-0%, -85%);
            font-size: 1.5em;
        }

        .bottom a {
            position: absolute;
            left: 0%;
            top: 125%;
            -ms-transform: translate(-0%, -125%);
            transform: translate(-0%, -125%);
            font-size: 1.5em;
        }

        .bottom {
            position: absolute;
            top: 115%;
        }
    }

        @media screen and (max-width: 540px) {
            h1 {
                font-size: 2.5em;
            }
    
            p {
                position: absolute;
                top: 25%;
                left: 0%;
                color: azure;
                font-size: 1.0em;
            }
    
            .top a {
                position: absolute;
                left: 0%;
                top: 85%;
                -ms-transform: translate(-0%, -85%);
                transform: translate(-0%, -85%);
                font-size: 1.5em;
            }
    
            .bottom a {
                position: absolute;
                left: 0%;
                top: 125%;
                -ms-transform: translate(-0%, -125%);
                transform: translate(-0%, -125%);
                font-size: 1.5em;
            }
    
            .bottom {
                position: absolute;
                top: 115%;
            }
        }
        /* End Stylesheet */