@font-face {
    font-family: 'JosefinSans';
    src: url('fonts/josefin-sans/JosefinSans-SemiBold.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

body, html {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    font-family: Arial, sans-serif;
    background-color: #FFFEF7; /* Set your desired background color here */
    font-family: 'JosefinSans', sans-serif; /* Apply custom font here */
    font-size: 32px; /* Set the base font size here */
}

.container {
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: transform 0.5s ease;
    background-color: #FFFEF7; /* Ensure the same background color as the body */
}

.hidden {
    display: none;
}

.centered-image {
    max-width: 100%;
    max-height: 100%;
    user-select: none;
    -webkit-user-drag: none;
    -moz-user-drag: none;
    -o-user-drag: none;
    user-drag: none;
}

.content {
    text-align: center; /* Center the text block */
    user-select: none;
    width: 60%; /* Set the width of the text block */
    margin: 0 auto; /* Center the text block horizontally */
}

.content p {
    text-align: left; /* Align the text within the text block to the left */
}




.arrow {
    border: solid black;
    border-width: 0 5px 5px 0;
    display: inline-block;
    padding: 15px;
    position: absolute;
    cursor: pointer;
    font-size: 2rem;
    top: 50%;
    transform: translateY(-50%);

}

.left {
    left: 10px;
    transform: rotate(135deg);
    -webkit-transform: rotate(135deg);
}

.right {
    transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
    right: 10px;
}

.no-transition {
    transition: none !important;
}

span.us::after {
    content: "r";
}

span.dom b {
    display: none;
}

span.a::after {
    content: "@";
}

span.co::after {
    content: "com";
}