/* MOBILE */
#main {

    width: auto;
    height: auto;
    padding: 20px;

    overflow: auto;
    word-wrap: break-word;

    border: 2px dotted;
    border-color: #412f9c;
    border-radius: 4%;
    background-color: #f6f8ff;
}
#topnav {
    p {
        font-family: coolvetica;
        font-size: 18px;
    }
    a {
        color: #675ca1;
    }
    a:hover {
        color: #9188c0
    }

    width: auto;
    height: auto;

    margin: 10px;

    border: 4px double;
    border-color: #525755;
    background-color: white;
}

body {
    background-image: url(/shrines/nerosporus/img/background.png);
    background-size: 550px;
}
/* DESKTOP */
@media (min-width: 700px) {
    #main {
        width: 30%;
        height: 80%;
        padding: 20px;

        margin: 20px;
        margin-left: auto;
        margin-right: auto;

        overflow: scroll;
        word-wrap: break-word;

        border: 2px dotted;
        border-color: #412f9c;
        border-radius: 4%;
        background-color: #f6f8ff;
        h1 {
            font-family: coolvetica;
            color: #675ca1;
            font-size: 30px;
        }
        p {
            font-family: roboto;
            color: #491d63;
        }
    }
    #topnav {
        p {
            font-family: coolvetica;
            font-size: 25px;
        }
        a {
            color: #675ca1;
        }
        a:hover {
            color: #9188c0
        }

        width: auto;
        height: auto;

        margin: 10px;

        border: 4px double;
        border-color: #525755;
        background-color: white;

    }
}

@font-face {
    font-family: 'Coolvetica';
    src: url('/fonts/Coolvetica Rg.otf');
}

@font-face {
    font-family: 'Roboto';
    src: url('/fonts/Roboto-Regular.ttf');
}