@import url('https://fonts.googleapis.com/css2?family=Twinkle+Star&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inconsolata:wght@300;400&family=Rokkitt&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Homemade+Apple&display=swap');

@font-face {
    font-family: 'romana_scriptregular';
    src: url('/assets/romanascript-regular-webfont.woff2') format('woff2'),
        url('/assets/romanascript-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

html {
    background-image: url("../img/backgrounds/grimoireCover.gif");
    background-size: cover;

}

body:after {
    animation: grain 8s steps(10) infinite;
    background-image: url("../img/backgrounds/grimoireCover.gif");
    background-size: cover;
    height: 300%;
    left: -50%;
    opacity: 0.15;
    position: fixed;
    scale: 100%;
    top: -110%;
    width: 300%;
    pointer-events: none;
}

#main-container {
    max-width: 50%;
    margin: 0 auto;
    background-color: #460707;
    padding: 5px;
    border: 1px solid #1A0101;
}

.flex {
    display: flex;
    flex-direction: row;
}

/*this is where your positioning goes*/
#content {
    margin-right: 30%;
    margin-left: 30%;
    margin-bottom: 5px;
    margin-top: 70px;
    padding: 5px;
    height: 540px;
    width: 600px;
    text-align: center;
    background-color: rgba(234, 221, 209, 0.082);
    border-radius: 100px;
    outline-style: double;
    outline-width: 10px;
    outline-color: #6080a5;
    outline-offset: 6px;
    border: #8f6d7e;
    border-style: dotted;
    border-block-width: 5px;
    border-block-style: double;
}

.content-wrap {
    margin-top: 1px;
}

#pageTitle {
    font-family: 'romana_scriptregular';
    color: #c296ac;
    font-size: 60px;
    text-align: center;
    margin: 25px;
    font-weight: bold;
    margin-top: 45px;
}

#pageLink {
    font-family: 'Rokkitt';
    color: rgb(189, 156, 182);
    font-size: 40px;
    text-align: center;
    margin: 25px;
    font-weight: normal;
    font-style: italic;
}

@keyframes grain {

    0%,
    100% {
        transform: translate(0, 0)
    }

    10% {
        transform: translate(-5%, -10%)
    }

    20% {
        transform: translate(-15%, 5%)
    }

    30% {
        transform: translate(7%, -25%)
    }

    40% {
        transform: translate(-5%, 25%)
    }

    50% {
        transform: translate(-15%, 10%)
    }

    60% {
        transform: translate(15%, 0%)
    }

    70% {
        transform: translate(0%, 15%)
    }

    80% {
        transform: translate(3%, 35%)
    }

    90% {
        transform: translate(-10%, 10%)
    }
}