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

body{

    background:#ece3d2;
    color:#2d2a26;

    font-family:"EB Garamond",serif;
    font-size:1.4rem;
    font-weight:100;

    display:flex;
    justify-content:center;
    align-items:center;

    min-height:100vh;

    padding:50px;

    opacity: 0;

    transform: translateY(12px);

    animation: titlePage 1.4s ease forwards;
}

@keyframes titlePage {

    from {

        opacity:0;

        transform:translateY(12px);
    }

    to {

        opacity:1;

        transform:translateY(0);
    }

}

/* Paper */

.titlepage{

    background:#faf6ee;

    background-image: url('borderhome.svg');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;

    width:min(900px,100%);

    box-shadow:
        0 0 40px rgba(0,0,0,.15);

    padding:55px;
}

.page{

    background:#faf6ee;

    width:min(900px,100%);

    box-shadow:
        0 0 40px rgba(0,0,0,.15);

    padding:35px;
}

/* Printed border */

.border{
    border:0px;

    padding:60px 40px;

    text-align:center;

    position:relative;
}

.pg{

    border:3px double #8d7550;
}

/* Images */

img{
    width:30%;

    max-width:100px;

    height:auto;
}

/* Ornaments */

.ornament{

    margin:18px 0;
}


/* Name */

h1{

    font-family:"Special Elite",serif;

    font-size:4.2rem;

    font-weight:500;

    color:#3c2e28;

    text-transform:uppercase;

    letter-spacing:10px;

    margin-bottom:20px;

    opacity:60%;
}

/* Subtitle */

h2{

    font-family:"Special Elite",serif;

    letter-spacing:4px;

    font-size:1.6rem;

    color:#5C2D2D;

    text-transform:uppercase;

    margin:35px 0;

    opacity:70%;
}

/* Website */

h3{

    font-family:"Special Elite",serif;

    letter-spacing:4px;

    font-size:2rem;

    text-transform:uppercase;

    margin:35px 0;

    opacity:70%;
}

h4{

    font-size:1.6rem;

    font-weight:400;

    line-height:1.4;

    margin-bottom:10px;
}

h5{
    font-family:"UnifrakturMaguntia",serif;

    font-size:2rem;

    font-weight:400;

    line-height:1.0;

    margin-bottom:40px;

    opacity:85%;
}

h5 span{

    font-size:1.4rem;

    font-style:italic;
}
/* Decorative rules */

.rule {
    /* Uses 80% of the screen on small displays, but caps at 240px on large screens */
    width: 80%;
    max-width: 240px;
    height: 1px;
    background: #000000;
    margin: 30px auto;
}

.short {
    /* Overrides the maximum cap for shorter lines while keeping the 80% responsive width */
    max-width: 170px;
}


/* Links */

a{

    color:#3c2e28;

    text-decoration:none;

    font-size:1.3rem;

    letter-spacing:2px;

    transition:.25s;
}

a:hover{

    color:#8d7550;

    letter-spacing:4px;
}

/* Navigation */

nav{

    display:flex;

    flex-direction:column;

    gap:18px;

    margin:45px 0;
}

nav a{

    color:#3c2e28;

    text-decoration:none;

    font-size:1.8rem;

    letter-spacing:2px;

    transition:.25s;
}

nav a:hover{

    color:#8d7550;

    letter-spacing:4px;
}

.navpg a{

    font-size:1.3rem;
}

/* Quote */

blockquote{

    font-style:italic;

    font-size:1.4rem;

    margin:45px 0;

    color:#5c4538;
}

/* Footer */

footer{

    margin-top:40px;

    font-size:1rem;

    letter-spacing:3px;

    color:#6a5b4a;

    line-height:2;
}

/* Responsive */

@media (max-width:700px){

    body{
        padding:10px;
    }

    .page{
        width:96vw;
        padding:15px;
    }

    .border{
        padding:35px 15px;
    }

    h1{

        font-size:2.6rem;

        letter-spacing:5px;
    }

    h2{

        font-size:1.3rem;
    }

    h3{

        font-size:1.5rem;
    }

    h4{

        font-size:1.3rem;
    }

    h5{

        font-size:1.5rem;
    }

    nav a{

        font-size:1.4rem;
    }

}