/* ========================= */
/* ОБЩИЕ НАСТРОЙКИ СТРАНИЦЫ */
/* ========================= */

body{

margin:0; /* УБИРАЕТ ОТСТУПЫ ПО КРАЯМ СТРАНИЦЫ */

background:#111; /* ЦВЕТ ФОНА СТРАНИЦЫ (МОЖНО МЕНЯТЬ) */

color:white; /* ЦВЕТ ТЕКСТА */

font-family:Arial; /* ШРИФТ САЙТА */

}



/* ========================= */
/* БУРГЕР КНОПКА */
/* ========================= */

.burger{

position:fixed;

top:20px; /* ВОТ ТУТ МЕНЯТЬ ВЫСОТУ ЗАКЛАДКИ */

left:0; /* НЕ МЕНЯТЬ — ЭТО ПРИЖИМАЕТ К КРАЮ ЭКРАНА */

width:60px; /* ШИРИНА ЗАКЛАДКИ */

height:50px; /* ВЫСОТА ЗАКЛАДКИ */

background:#1a1a1a; /* ЦВЕТ ФОНА ЗАКЛАДКИ */

border-radius:0 12px 12px 0; 
/* 
ЗАКРУГЛЕНИЕ УГЛОВ
МЕНЯТЬ МОЖНО ТОЛЬКО ЧИСЛО 12
*/

display:flex;

flex-direction:column;

justify-content:center;

align-items:center;

cursor:pointer;

z-index:1000;

box-shadow:0 0 10px rgba(0,0,0,0.5);
/* ЛЕГКАЯ ТЕНЬ */

}



/* ПОЛОСКИ БУРГЕРА */

.burger div{

width:24px; /* ДЛИНА ПОЛОСОК */

height:3px; /* ТОЛЩИНА ПОЛОСОК */

background:white; /* ЦВЕТ ПОЛОСОК */

margin:3px; /* РАССТОЯНИЕ МЕЖДУ НИМИ */

}


/* ========================= */
/* БОКОВОЕ МЕНЮ */
/* ========================= */

.menu {
    position: fixed;
    top: 0;
    left: -250px; /* ВОТ ТУТ МЕНЯТЬ НЕ НУЖНО — это стартовая позиция */
    width: 250px;
    height: 100%;
    background: #1a1a1a;
    padding-top: 80px;
    transition: 0.3s;
    z-index: 999; /* добавь, чтобы меню было поверх картинки */
}



/* ПУНКТЫ МЕНЮ */

.menu p{

padding:15px 25px; /* РАЗМЕР ОБЛАСТИ КЛИКА */

margin:0;

cursor:pointer;

}



/* ЭФФЕКТ НАВЕДЕНИЯ */

.menu p:hover{

background:#333;

}



/* ========================= */
/* ОСНОВНОЙ ЭКРАН */
/* ========================= */

.main{
/* убираем height:100vh; */
position:relative; /* важно для абсолютных точек */
}

/* ========================= */
/* КАРТИНКА АЙСБЕРГА */
/* ========================= */

.iceberg{

width:100%; /* Ширина = ширине экрана */

height:auto; /* ВОТ ТУТ МЕНЯТЬ — высота под картинку, чтобы скроллилось вниз */

display:block;

}

/* ========================= */
/* КЛИКАБЕЛЬНЫЕ ТОЧКИ НА АЙСБЕРГЕ */
/* ========================= */

.point{
position:absolute; /* Важно для позиционирования поверх айсберга */
background: rgba(0, 0, 0, 0.7); /* Темно-синий полупрозрачный */
padding:8px 12px; /* ВОТ ТУТ МОЖНО МЕНЯТЬ РАЗМЕР ПРЯМОУГОЛЬНИКА */
color:white; /* Цвет текста */
font-weight:bold; /* Жирный текст */
border-radius:6px; /* Закругление углов */
text-decoration:none; /* Убираем подчёркивание */
transition:0.2s; /* Плавный переход при наведении */
cursor:pointer; /* Курсор при наведении */
z-index:10; /* Чтобы точка была поверх картинки */
}

/* ЭФФЕКТ ПРИ НАВЕДЕНИИ */
.point:hover{
background: rgba(0, 0, 0, 1); /* Темнее при наведении */
color:white; /* Цвет текста можно оставить белым */
}