/* Общие настройки страницы */
body {
    margin: 0;
    padding: 0;
    height: 100vh;
    overflow: hidden;
    
    background-color: #ffffff; 
    background-image: url('background.jpg'); 
    background-size: 50%; /* Ваша настройка уменьшенного фона */
    background-position: center;     
    background-repeat: no-repeat;    
    
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* Сетка для расположения всех элементов */
.container {
    display: grid;
    /* Две колонки (лево/право) и две строки (верх под часы/погоду, низ под телефон) */
    grid-template-columns: 1fr 1fr; 
    grid-template-rows: 1fr auto; 
    height: 100vh;
    padding: 50px; 
    box-sizing: border-box;
}

/* Настройки часов (Слева вверху) */
#clock {
    grid-column: 1;
    grid-row: 1;
    justify-self: start; 
    align-self: start;   
    
    font-size: 8vw;      
    font-weight: 900;                
    color: #1c1c1e; 
    letter-spacing: -0.05em;         
    user-select: none;               
    text-shadow: 0 2px 10px rgba(255, 255, 255, 0.8); 
}

/* Настройки погоды (Справа вверху) */
#weather {
    grid-column: 2;
    grid-row: 1;
    justify-self: end;  
    align-self: start;  
    text-align: right;  
    
    color: #1c1c1e; 
    user-select: none;
    text-shadow: 0 2px 10px rgba(255, 255, 255, 0.8);
}

#weather .temp {
    font-size: 7vw;     
    font-weight: 800;
    line-height: 1;
}

#weather .status {
    font-size: 1.8vw;     
    font-weight: 600;
    margin-top: 5px;
    text-transform: capitalize;
}

#weather .city {
    font-size: 1.3vw;   
    font-weight: bold;
    opacity: 0.6;
    margin-top: 2px;
}

/* НАСТРОЙКИ ТЕЛЕФОНА (По центру внизу) */
#phone-box {
    grid-column: 1 / span 2; /* Растягиваем блок на обе колонки */
    grid-row: 2;             /* Помещаем в самую нижнюю строку */
    justify-self: center;    /* Центрируем по горизонтали */
    align-self: end;         /* Прижимаем к самому низу */
    margin-bottom: 20px;     /* Небольшой отступ от самого края экрана */
}

#phone-box a {
    font-size: 3vw;          /* Крупный, читаемый размер */
    font-weight: 700;
    color: #1c1c1e;          /* Такой же темный цвет, как у часов */
    text-decoration: none;   /* Убираем стандартное синее подчеркивание ссылки */
    letter-spacing: 0.05em;
    text-shadow: 0 2px 10px rgba(255, 255, 255, 0.8);
    transition: opacity 0.2s ease;
}

/* Эффект при наведении мышки на телефон */
#phone-box a:hover {
    opacity: 0.7;
}

/* Адаптивность для экранов смартфонов */
@media (max-width: 768px) {
    .container {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto; /* На мобильных три блока идут друг за другом */
        grid-gap: 30px;
        padding: 30px 20px;
    }
    #clock, #weather, #phone-box {
        grid-column: 1;
        justify-self: center;
        text-align: center;
    }
    #clock { grid-row: 1; font-size: 16vw; }
    #weather { grid-row: 2; }
    #phone-box { grid-row: 3; align-self: center; }
    
    #weather .temp { font-size: 14vw; }
    #weather .status { font-size: 5vw; }
    #weather .city { font-size: 4vw; }
    #phone-box a { font-size: 6vw; } /* На смартфонах делаем телефон крупнее */
}