* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body, html {
    overflow: scroll; /* Залишаємо можливість гортати */
    height: 100%; /* Забезпечує, щоб сторінка займала всю висоту */
    margin: 0;
}

/* Для приховування скролбару на всіх браузерах */
::-webkit-scrollbar {
    display: none; /* Приховує скролбар в Chrome, Safari, Opera */
}

.image-container {
    height: 100vh; /* This makes the container full height of the viewport */
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative; /* To position buttons on top of the image */
}

img {
    height: 100%;
    width: auto; /* Keeps the image aspect ratio intact */
    object-fit: cover; /* Ensures the image covers the container without stretching */
}

.buttons {
    position: absolute; /* Positioning the buttons on top of the image */
    top: 5%; /* Centering vertically */
    left: 10%; /* Centering horizontally */
    transform: translate(-50%, -50%); /* Exact centering */
    display: flex;
    gap: 10px;
}



h1{
    /* Positioning the buttons on top of the image */
    
    display: flex;
    margin-left: 40px;
    font-family: 'Rock Salt', cursive;
}


a {
    text-decoration: none; /* Видаляє підкреслення */
    color: white; /* Змінює колір тексту на білий */
}

button {
    padding: 10px 20px;  /* Встановлюємо відступи */
    font-size: 16px;      /* Розмір тексту */
    cursor: pointer;     /* Курсор при наведенні */
    border-radius: 5px;  /* Заокруглені кути */
    font-family: 'Rock Salt', cursive;  /* Шрифт */
    width: 200px;         /* Ширина кнопки */
    height: 50px;         /* Висота кнопки */
    transition: background-color 0.3s ease, color 0.3s ease; /* Плавна зміна кольору */
}
.buttons.main-buttons {
    position: absolute; /* Абсолютне позиціонування */
    top: 20px;          /* Відступ від верхнього краю */
    left: 50%;          /* Відступ від лівого краю */
    transform: translateX(-50%); /* Центрує контейнер кнопок по горизонталі */
    display: flex;      /* Виставляє кнопки в ряд */
    gap: 20px;          /* Відстань між кнопками */
}

.telegram {
    background-color: #0088cc; /* Колір фону для Telegram */
}

.telegram a {
    color: white; /* Текст на кнопці буде білим */
}

.x {
    background-color: black; /* Колір фону для X/Twitter */
}

.x a {
    color: white; /* Текст на кнопці буде білим */
}

.buy {
    background-color: #00ff04; /* Колір фону для Buy */
}

.buy a {
    color: black; /* Текст на кнопці буде чорним */
}

button:hover {
    background-color: #555; /* Змінює колір фону на темніший при наведенні */
    color: #fff; /* Залишає білий колір тексту */
}

/* Ефект при наведенні на кнопку Telegram */
.telegram:hover {
    background-color: #006699; /* Темніший колір фону для Telegram */
}

/* Ефект при наведенні на кнопку X/Twitter */
.x:hover {
    background-color: #363836; /* Темніший колір фону для X/Twitter */
}

/* Ефект при наведенні на кнопку Buy */
.buy:hover {
    background-color: #02a604; /* Темніший колір фону для Buy */
}