body {
    background-image: url('assets/404/background.jpg'); /* Sets a background image for the page */
    background-attachment: fixed;
    background-repeat: repeat;
    overflow-x: hidden;
    overflow-y: hidden;
}

h1 {
    margin-top: -30px;
    align-content: center;
    font-size: 40px;
    font-family: "Jacquard 24", system-ui;
    font-weight: 400;
    font-style: normal;
    padding: 8px;
    background-color: #EEDFC0;
}

p {
    align-content: center;
    font-size: 24px;
    font-family: "Jacquard 24", system-ui;
    font-weight: 400;
    font-style: normal;
    padding: 4px;
    background-color: #EEDFC0;
}

/**LAYOUT HOLDS PORTAL AND TEXT**/
.layout {
    height: 100dvh; /* Example: set a height for the parent */
    width: 100dvw;
    position: absolute;
    }

.text {
    padding: none;
    width: inherit;
    z-index: -200;
}

.layout .text {
    display: grid;
    place-items: center; /* Centers content both horizontally and vertically */
    height: 160px; /* Example height for the div */
}

/**PORTAL**/
.portal_wrapper{
    height: fit-content; /* Example: set a height for the parent */
    width: 450px;
    position: relative;
    padding: -100px;
    margin: 20px auto;
    translate: -3% -10%;
}

.portal_frame{
    width: 400px;
    height: auto;
    z-index: 100;
}

.swirl {
    position: absolute; 
    z-index: -100;
    width: 264px;
    height: 330px;
    border-radius: 400px / 600px;
    translate: 26% 40%;
}

.furby_door {
    position:absolute;
    z-index: 150;
    width: 294px;
    height: 368px;
    translate: 70% 60%;
}

.furby {
    position: relative;
    width: 54px;
    translate: -110% 2%;
    z-index: -50
 }


 @media screen and (max-width: 600px) {

    body {
       overflow-x: hidden;
       overflow-y: hidden;
       position: absolute;
       scroll-behavior: none;
       height: 100dvh; /* Example: set a height for the parent */
       width: 100dvw;
    }

    .text {
        width: 400px;
        margin-left: 12px;
    }

 }