@import url('https://fonts.googleapis.com/css2?family=Inter:wght@200;300;400;700&display=swap');

body {
    font-family: Arial, sans-serif;
    background: #1a1a1a;
    color: white;
}

.container {
    width: 100%;
    height: 100vh;
    /* IE9 não suporta Flexbox - usar alternativa */
    display: block;
    position: relative;
    background: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url('../../assets/backgrounds/background-home.png');
    background-size: cover;
    background-position: center;
}


.welcome-message {
    position: absolute;
    /* justify-content não funciona sem flexbox - remover */
    width: 350px;
    height: 74px;
    top: 32px;
    left: 79px;
    font-size: 24px;
    margin-bottom: 10px;
    opacity: 1;
}

.welcome-message>* {
    display: block;
    margin-bottom: 8px;
}

.welcome-text {
    font-family: 'Inter', sans-serif;
    font-size: 20px;
    font-weight: 200;
    line-height: 100%;
}

.guest-name {
    font-family: 'Inter', sans-serif;
    font-size: 36px;
    font-weight: 400;
    line-height: 100%;
}

.weather-info {
    font-family: 'Inter', sans-serif;
    position: absolute;
    /* justify-content não funciona sem flexbox - remover */
    text-align: right;
    width: 188px;
    height: 127px;
    top: 32px;
    left: 1013px;
}

.weather-info>* {
    display: block;
    margin-bottom: 8px;
}

.weather-info-temperature {
    display: block;
    /* Adicionar clearfix para IE9 */
    zoom: 1;
}

.weather-info-temperature>* {
    display: inline-block;
    *display: inline;
    /* hack para IE7/8 */
    *zoom: 1;
    /* hack para IE7/8 */
    vertical-align: middle;
    margin-right: 8px;
}

.weather-info-temperature>*:last-child {
    margin-right: 0;
}

.temperature {
    font-size: 36px;
    font-weight: 400;
    line-height: 100%;
}

.time {
    font-size: 36px;
    font-weight: 400;
    line-height: 100%;
}

.time span {
    font-weight: 200;
    text-transform: uppercase;
}

.date {
    font-size: 20px;
    font-weight: 300;
    line-height: 100%;
}

/* Responsive tweaks for larger screens (monitors and TVs) */
@media (min-width: 1366px) and (max-width: 1919px) {
    .welcome-message {
        left: 100px;
        top: 36px;
        width: 380px;
        font-size: 26px;
    }

    .welcome-text {
        font-size: 22px;
    }

    .guest-name {
        font-size: 42px;
    }

    .weather-info {
        left: calc(100% - 260px);
        width: 200px;
    }

    .temperature,
    .time {
        font-size: 42px;
    }

    .date {
        font-size: 22px;
    }
}

@media (min-width: 1920px) {

    /* TV / very large monitors */
    .container {
        background-size: cover;
    }

    .welcome-message {
        left: 120px;
        top: 48px;
        width: 420px;
        font-size: 28px;
    }

    .welcome-text {
        font-size: 24px;
    }

    .guest-name {
        font-size: 48px;
    }

    .weather-info {
        left: calc(100% - 300px);
        width: 220px;
    }

    .temperature,
    .time {
        font-size: 48px;
    }

    .date {
        font-size: 24px;
    }
}