/* Подключение шрифтов */

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

@font-face {
font-family: 'Montserrat';
src: url('fonts/Montserrat-Bold.ttf') format('truetype');
font-weight: 700;
}

@font-face {
font-family: 'Montserrat';
src: url('fonts/Montserrat-Light.ttf') format('truetype');
font-weight: 300;
}


/*
Основные стили страницы
- убираем отступы
- отключаем обычный скролл
- задаем космический фон
*/

html,body{
margin:0;
height:100%;
overflow:hidden;
font-family:'Montserrat',sans-serif;
background: radial-gradient(circle at top,#0b1a3a,#000000);
}


/*
Страница занимает 100% высоты экрана
Контент центрируется
*/

.page{
height:100vh;
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
text-align:center;
}


/* Заголовок */

.title{
font-size:clamp(25px,10vw,70px);
font-weight:700;
color:#e5f2ff;
letter-spacing:7px;
margin-bottom:30px;
}


/*
Анимация появления букв
Каждая буква появляется с задержкой
*/

.title span {
    opacity: 0;
    display: inline-block;
    transform: translateY(20px);
    --i: 0;
}

/* Добавляем анимацию только когда у родителя (.title) есть класс .active */
.title.active span {
    animation: fadeInUp 1.4s forwards;
    animation-delay: calc(var(--i) * 0.10s);
}

.title span:nth-child(1){--i:0;}
.title span:nth-child(2){--i:1;}
.title span:nth-child(3){--i:2;}
.title span:nth-child(4){--i:3;}
.title span:nth-child(5){--i:4;}
.title span:nth-child(6){--i:5;}
.title span:nth-child(7){--i:6;}


/* Анимация подъема текста */

@keyframes fadeInUp{
to{
opacity:1;
transform:translateY(0);
}
}


/* Ограничения для картинки */

img{
max-width:90vw;
max-height:90vh;
}


/* Подзаголовок */

.subtitle{
font-size:clamp(16px,4vw,25px);
font-weight:300;
color:#7aa7ff;
margin-top:30px;
}


/*
Скрываем checkbox
Он используется только как логический переключатель
*/

#toggleStars{
display:none;
}


/*
Контейнер звезд
position: fixed — звезды всегда остаются на месте
*/

.stars{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
pointer-events:none;
opacity:0;
transition:0.5s;
}


/*
Когда checkbox активен
звезды становятся видимыми
*/

#toggleStars:checked ~ .stars{
opacity:1;
}


/* Общие стили звезд */

.star{
position:absolute;
background:white;
border-radius:50%;
animation:twinkle linear infinite;
}


/* Анимация мерцания звезд */

@keyframes twinkle{
0%{opacity:0.1;}
50%{opacity:1;}
100%{opacity:0.1;}
}


/*
Позиции и размеры каждой звезды
Эффект мерцания
*/

.star:nth-child(1){top:10%;left:5%;width:2px;height:2px;animation-duration:2s;}
.star:nth-child(2){top:27%;left:15%;width:1px;height:1px;animation-duration:3s;}
.star:nth-child(3){top:14%;left:25%;width:2px;height:2px;animation-duration:4s;}
.star:nth-child(4){top:45%;left:35%;width:1px;height:1px;animation-duration:2.5s;}
.star:nth-child(5){top:90%;left:45%;width:3px;height:3px;animation-duration:5s;}
.star:nth-child(6){top:46%;left:55%;width:2px;height:2px;animation-duration:3.5s;}
.star:nth-child(7){top:70%;left:65%;width:1px;height:1px;animation-duration:4.5s;}
.star:nth-child(8){top:15%;left:40%;width:3px;height:3px;animation-duration:2s;}
.star:nth-child(9){top:20%;left:10%;width:2px;height:2px;animation-duration:3s;}
.star:nth-child(10){top:30%;left:23%;width:3px;height:3px;animation-duration:4s;}
.star:nth-child(11){top:48%;left:90%;width:2px;height:2px;animation-duration:2.5s;}
.star:nth-child(12){top:90%;left:5%;width:1px;height:1px;animation-duration:5s;}
.star:nth-child(13){top:70%;left:95%;width:2px;height:2px;animation-duration:3.5s;}
.star:nth-child(14){top:77%;left:61%;width:2px;height:2px;animation-duration:4.5s;}
.star:nth-child(15){top:75%;left:75%;width:2px;height:2px;animation-duration:3s;}
.star:nth-child(16){top:90%;left:85%;width:1px;height:1px;animation-duration:5s;}
.star:nth-child(17){top:20%;left:50%;width:2px;height:2px;animation-duration:2.8s;}
.star:nth-child(18){top:35%;left:70%;width:1px;height:1px;animation-duration:4.2s;}
.star:nth-child(19){top:60%;left:20%;width:2px;height:2px;animation-duration:3.7s;}
.star:nth-child(20){top:15%;left:80%;width:1px;height:1px;animation-duration:4.5s;}
.star:nth-child(21){top:75%;left:40%;width:2px;height:2px;animation-duration:3.3s;}
.star:nth-child(22){top:50%;left:5%;width:3px;height:3px;animation-duration:5s;}
.star:nth-child(23){top:20%;left:90%;width:1px;height:1px;animation-duration:2.2s;}
.star:nth-child(24){top:80%;left:14%;width:2px;height:2px;animation-duration:3.8s;}
.star:nth-child(25){top:85%;left:30%;width:1px;height:1px;animation-duration:4.8s;}
.star:nth-child(26){top:40%;left:80%;width:2px;height:2px;animation-duration:3.1s;}
.star:nth-child(27){top:10%;left:60%;width:1px;height:1px;animation-duration:2.5s;}