@font-face {
    font-family: 'OMORI-2';
    src: url(../fonts/OMORI_GAME2.ttf);
}

body {
    background-color: #a168f9;
    font-family: 'OMORI-2';
    cursor: url("./../img/cursor.cur"), auto;
}

.rwbody {
    background-color: #E7C29D;
    font-family: 'OMORI-2';
}

html, body {
    margin: 0;
    padding: 0;
}

p, ul, ol {
    font-size: 30px;
    line-height: 30px;
}

ul, ol{
    padding: 0;
    list-style-position: inside;
}

a{
    color: rgb(246,192,248)
}

a.linkb{
    color: rgb(254,251,255)
}

a:hover{
    color: rgb(158, 197, 226)
}

a.linkb:hover{
    color: rgb(202, 139, 221)
}
a:active{
    color: rgb(202, 139, 221)
}

a:visited{
    color: rgb(187, 194, 199)
}
a.linkb:visited{
    color: #000000;
}

p.caption{
    font-size: 16px;
    color: rgb(158, 197, 226);
    font-style: oblique;
}

p.basilcaption{
    font-size: 16px;
    color: #F3F3F3;
    font-style: oblique;
}

header {
    text-align: center;
    background-color: #c8a4e9;
    padding: 20px;
    background: url('./../img/omori-starry-background.png') repeat 0 0;
    background-repeat: round;
    animation: animate-bg 30s infinite linear normal;
    animation-fill-mode: forwards; /* Makes it so animation doesn't jump back to beginning. */
    background-size: auto 130%;
}

.realworld {
    text-align: center;
    background-color: #c8a4e9;
    padding: 20px;
    background: url('./../img/rw-background.jpg') repeat 0 0;
    background-repeat: round;
    animation: animate-bg 30s infinite linear normal;
    animation-fill-mode: forwards; /* Makes it so animation doesn't jump back to beginning. */
    background-size: auto 130%;
}

@keyframes animate-bg {
    from {background-position: 0 0;}
    to {background-position: 2560px 1080px;}
}

header .pfp {
    width: 300px;
    height: 250px;
    border: 20px solid #9ec5e2;
    border-radius: 35%;
    background-image: url('./../img/omori-mirror-friends.webp');
    background-repeat: no-repeat;
    background-position: center center; /* X Y value */
    background-size: cover;
    margin: 0 auto;
}

header .pfp.basil {
    background-image: url('./../img/Basil-Sunny.webp');
    background-position: center center; /* X Y value */
    background-size: cover;
    border-color: #FFEEC0;
}

header h1 {
    font-size: 60px;
    letter-spacing: 8px;
    margin: 10px 0 20px 0;
    display: inline;
    background-color: aliceblue;
}

h2 {
    font-size: 46px;
}

@media (max-width: 600px) {
    h2 {
        font-size: 40px;
    }
}

main {
    max-width: 800px;
    margin: 0 auto;
    padding: 0 20px;
}

main img {
    max-width: 100%;
}

/* footer */
footer{
    background-color: rgb(200,164,233);
    padding: 40px;
    text-align: center;
}

.footerb{
    background-color: #FFEEC0;
    padding: 40px;
    text-align: center;
}

footer .content{
    max-width: 800px;
    margin: 0 auto;
}

@media (max-width: 600px) {
    footer p{
        font-size: 16px;
    }
}