body {
    background-image: url(../graphics/wallpaper.png);
    background-size: 200px;
    background-color: #f4facf;
    
    position: relative; /* importaaaaaaaaant in order for child(lace)'s position absolute to work u need to indicate */
}

/* body::before {
    content: '';
    position: absolute; Position it relative to the body
    top: 20px;
    left: 0;
    width: 100%;
    height: 90px;

    background-image: url('../graphics/lace12.gif');
    background-repeat: repeat-x;
    background-size: contain;
    
    
    Place the lace behind the main content
    z-index: -1;
} */

.titlebox {

    text-align: center;

    border-radius: 5px;
    border: 1px solid #00e5ff;
    
    /* background-image: url('../graphics/wallpaper.png'); */
    /* background-size: 100px; */

    background-color: #4de1ec5f;

    padding: 20px;
    box-sizing: border-box;

    box-shadow: 3px 3px white inset, -1px -1px #d6d6d4 inset, 0.5px 0.5px #fecd2f, 5px 5px #dda0dd;
}

#title {
    display:flex;
    justify-content: center;

    align-items: center;
    
}

.titlebox img {

    height: 100px;
    
}

#bubble {
    display: block;
    padding: 20px;

    text-align: center;

}

.funnybox {
    display: block;

    border-radius: 5px;
    border: 1px solid #fecd2f;
    
    background-color: #fef8e7;
    background-image: url();

    padding: 20px 20px 0px 20px;
    box-sizing: border-box;

    box-shadow: 3px 3px white inset, -1px -1px #d6d6d4 inset, 0.5px 0.5px #fecd2f, 5px 5px #dda0dd;
}

table, th, td {
    text-align: left;
    padding: 2%;

    border: 1px black dashed;
}

table th {
    text-align: right;
}


table {
    border-collapse: collapse;
    width: 100%;

}

.fotomascota {
    width: 30%;
    padding: 30px;
}

.evilmeter {
    display: flex;
    
    align-items: center;
    justify-content: center;

    gap: 5%;
}

.evilmetermeter {
    display: flex;

    width: 60%;
    gap: 5px;

}

.posIndex {
    flex: 1;

    aspect-ratio: 1/1;
    border-radius: 5px;    
    border: 2px rgb(231, 219, 185) inset;
}

.box11 { 
    margin: 1em 0; /* Change center alignment from 0 to auto */ 
    width: 100%;
    text-align: center;

    font: bold 20px comic neue;
    color: rgb(190, 33, 72);
}
    
.u01 { 
    background: url(../graphics/nametag/f-ue.gif ) repeat-x; 
    height: 45px; 
    margin: 0 50px }

.s01 { 
    background: url(../graphics/nametag/f-sita.gif ) repeat-x; 
    height: 13px; 
    margin: 0 50px
}
    
.box-top { 
    background-image: url(../graphics/nametag/f-kado1.gif ), url(../graphics/nametag/f-kado2.gif ); 
    background-position: top left,top right; 
    background-repeat: no-repeat,no-repeat; 
    height: 45px
}
    
.box-center { 
    background-image: url(../graphics/nametag/f-migi.gif ), url(../graphics/nametag/f-hidari.gif ),url(../graphics/nametag/f-naka.gif ); 
    background-position: top right,top left,top center; 
    background-repeat: repeat-y,repeat-y,repeat; 
    padding: 0 20px
}
    
.box-bottom { 
    background-image: url(../graphics/nametag/f-kado3.gif ), url(../graphics/nametag/f-kado4.gif ); 
    background-position: top left,top right; 
    background-repeat: no-repeat,no-repeat; 
    height: 13px
}

.box01 { 
    background: url(../graphics/blueborder.gif);
    box-shadow: 0 1px 3px #000; /* shadow */ 
    box-sizing: border-box;
    margin: 1em 0; /* center align, change 0 to auto */ 
    border-radius: 10px;
    padding: 20px; 
    width: 100%; /* width */
}

.box-inner { 
    background: url(../graphics/back02.gif); 
    box-shadow: 0 1px 3px #000; /* shadow */ 
    border-radius: 10px;
    padding: 10px;    
} 


.m1 {
    position: relative;

    border-radius: 5px;
    border: 1px solid #ff72e1;
    
    background-image: url('../graphics/paper.gif');

    background-color: rgb(247, 247, 247);
    height: auto;
    padding: 100px;

    box-sizing: border-box;

    box-shadow: 3px 3px white inset, -1px -1px #d6d6d4 inset, 0.5px 0.5px #fecd2f, 5px 5px #dda0dd;
}

.divider {
    display: flex;

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

    width: 100%;
    max-width: 100%;
    flex-wrap: nowrap;

    margin: 5%;
}

.divider img {
    max-width: 33.33%; /* Each image can take up a third of the container's width */
    height: auto; /* Maintains the image's aspect ratio */
}

#lace1 {
    content: '';
    position: absolute;

    top: 0;
    left: 0;
    width: 100%;
    height: 80px;

    background-repeat: repeat-x;
    background-size: contain;

}

#lace2 {
    content: '';
    position: absolute;

    bottom: 0;
    left: 0;
    width: 100%;
    height: 80px;

    background-repeat: repeat-x;
    background-size: contain;

}

.petNames {
    text-align: center;
    
    font-family: "Borel", cursive;
    font-weight: 500;
    font-style: normal;

    font-size: 3vw;

    margin: 0;
    margin-bottom: -20px;

    text-decoration: underline dotted;
    
    color: rgb(190, 33, 72);
    

}

strong {
    font-size: 1.7vw;
    text-shadow: 1px 1px 1px #0d3556;
    color:rgb(10, 200, 213);
}

p {
    color: rgb(162, 0, 68);
}

.symbol {
width: 15px;
}