@font-face {
    font-family: 'Roboto';
    src: url('../fonts/Roboto-Regular.ttf') format('truetype');
}

body {
    font-family: 'Roboto', sans-serif;
    background: #e5e5e5;
}

.container {
    display: flex;
    justify-content: center;
    width: 100%;
    box-sizing: border-box;
}

.content-column {
    width: 80%;
    box-sizing: border-box;
    padding: 25px;
    background: white;
    border: 2px solid #336690;
    border-radius: 6px;
    box-shadow: 0px 15px 35px 5px rgba(0, 0, 0, 0.525);
}

#face {
    float: right; 
    margin: 0 0 15px 15px;
    border: 2px solid #000000; 
    border-radius: 6px; 
    box-shadow: 0px 15px 35px 5px rgba(0, 0, 0, 0.525);
    width: auto;
    max-width: 40%;
    height: auto;
}

.video-wrapper {
    float: left;
    width: 315px;
    max-width: 45%;
    aspect-ratio: 315 / 560;
    
    border: 2px solid #000;
    border-radius: 6px;
    box-shadow: 0px 15px 35px 5px rgba(0, 0, 0, 0.525);
    
    margin: 0 15px 15px 0;
    overflow: hidden;
}

#video {
    width: 100%;
    height: 100%;
    border: none;
}


.wrap-text {
    word-wrap: normal;
    overflow-wrap: normal;
}

/* Media query for mobile devices */
@media (max-width: 768px) {
    .container {
        flex-direction: column; /* Changes layout to a single column on mobile */
        padding: 0 10px; /* Adds padding to the left and right */
        align-items: stretch; /* Stretches children to fill the container */
    }

    .content-column {
        width: auto; /* Allows the column to adjust based on the container's width */
        max-width: 100%; /* Prevents the column from exceeding the container's width */
        padding: 10px; /* Adjusts padding for a smaller screen */
    }
}