@font-face {
  font-family: pixel;
  src: url(fonts/PixelForge.otf);
}

@font-face {
  font-family: inked;
  src: url(fonts/inkedgod.ttf);
}




body {

    background-image: url("images/layout/4.png");
    background-repeat: repeat;

}


.page {
    font-family: inked;
    font-size: 150px;

    position: fixed;
    z-index: 11;

    top: 300px;
    left: 650px;

    text-shadow:
        4px 4px 0 #fff,
        2px 0 0 #fff,
        0 2px 0 #fff,
        -1px 0 0 #fff,
        0 -1px 0 #fff;
}



.titulo {
    font-family: pixel;
    font-size: x-large;
    z-index: 1;
    position: relative;
    top: -5px;
}





.site {

    border: 5px solid #e5d9eb;

    width: 1200px;

    margin: 200px auto;

    padding: 15px;

    background-image: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.4)), url("images/layout/1.png");

    display: flex;

    flex-direction: column;

    gap: 15px;

    transform: scale(0.55);

    border-radius: 400px 5px 400px 5px;

}


.back {
    background-image: url(images/layout/1.png);
    padding: 15px;
    border: 3px solid #e5d9eb;
    border-radius: 15px;
    width: 300px;
    display: flex;
    flex-direction: row;
}

.border {
    background-image: url(images/layout/3.jpg);
    border: 3px solid #e5d9eb;
    border-radius: 400px 5px 400px 5px;
    padding: 70px;
    padding-left: 200px;
}


.caixa {
    position:relative;
    padding: 20px;
    text-align: center;
    z-index: 0;
    box-sizing: border-box; 
    width: 300px;
    padding-left: 0px;
    padding-right: 0px;
}

.caixa::before {
    content: "";
    position: absolute;
    inset: 0;
    border: 15px solid;
    border-image: url("https://static.tumblr.com/yn7vk7p/DfHmp40xm/bo-ha26.gif") 8 fill round;
    filter: hue-rotate(250deg);
    pointer-events: none;
    z-index: -1;
}






.roxo {
    text-align: center;
}

.roxo > * {
    filter: brightness(0.5) sepia(1) hue-rotate(245deg) saturate(100%) contrast(120%);
    transition: filter 0.3s ease;
}

.roxo > *:hover {
    filter: none;
}







.carrossel {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.item {
    text-align: center;
}

.item img {
    display: block;
    width: 150px;
    height: 150px;
    object-fit: cover;
}

.item a {
    display: block;
    margin-top: 5px;
}

.seta {
    cursor: pointer;
    border: none;
    background: none;
    font-size: 30px;
}