:root {
  --bg-color:#121217;
  --header-bg:#1B1B25;
  --text-color:#F5F5F5;
  --accent:#FFAA00;
  --divider:#2A2A38;
  --notification-bg:#22222B;
  --notification-shadow:rgba(0,0,0,0.7);
  --radius:12px;
  --transition:all 0.4s ease;
}

/* Основные стили */
body{
    margin:0;
    font-family:'Roboto',sans-serif;
    background-color:var(--bg-color);
    color:var(--text-color);
}

/* Хедер */
header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    background-color:var(--header-bg);
    padding:15px 30px;
}

.header-left{
    font-size:1.2rem;
    font-weight:600;
}

.header-right a, .header-right span{
    color:var(--text-color);
    margin-left:20px;
    text-decoration:none;
    font-weight:500;
    transition:var(--transition);
}

.header-right a:hover{
    color:var(--accent);
}

.divider{
    border:none;
    height:1px;
    background-color:var(--divider);
    margin:0;
}

main{
    padding:40px 30px;
}

/* Уведомление */
.notification{
    position:fixed;
    bottom:20px;
    right:20px;
    background-color:var(--notification-bg);
    color:var(--text-color);
    padding:20px 25px 25px 25px;
    border-radius:var(--radius);
    box-shadow:0 8px 25px var(--notification-shadow);
    max-width:320px;
    font-size:0.95rem;
    animation:fadeIn 0.6s ease;
    position: relative; /* для абсолютного позиционирования крестика внутри блока */
}

/* Крестик внутри уведомления, сверху слева */
.notification-close{
    position:absolute;
    top:10px;
    left:10px;
    width:24px;
    height:24px;
    border:none;
    border-radius:50%;
    background-color:#FF5555;
    color:#fff;
    font-weight:bold;
    font-size:16px;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    transition:all 0.3s ease;
}

.notification-close:hover{
    background-color:#FF2222;
    transform:scale(1.2);
}

/* Контент уведомления */
.notification-content{
    margin-top:5px; /* отступ от крестика сверху */
}

/* Анимация появления */
@keyframes fadeIn{
    from {opacity:0; transform:translateY(20px);}
    to {opacity:1; transform:translateY(0);}
}