/* Базовые стили для компьютера */
.game-board {
    width: 500px;
    margin: 20px auto;
    font-size: 16px;
}
 body {
    background-color: #ffebcd;  /* другой цвет */
    background-image: url('fon.jpg');
}
/* Обычная ссылка */
a {
    color: #191970;  
}

/* При наведении */
a:hover {
    color: #000000;  
}
/* Активная (в момент клика) */
a:active {
    color: #4682B4;  
}
.my-image {
    margin-top: 130px;      /* Отступ сверху */
    margin-bottom: 0px;   /* Отступ снизу */
    margin-left: -1175px;    /* Отступ слева */
    margin-right: 0px;    /* Отступ справа */
}
.image-container {
    position: relative;  /* Контейнер для привязки */
}

.raised-image {
    position: relative;
    top: -90px;          /* Поднимает на 30px вверх */
    /* Или используй отрицательный bottom */
    bottom: 90px;        /* Тоже поднимает */
}
.normal-width {
    width: 100%;
    max-width: 800px;    /* Ограничиваем ширину */
}
body {
    background-image: url('fon.jpg');
    background-attachment: fixed;  /* Фиксирует фон */
    background-size: cover;        /* Растягивает на весь экран */
    background-position: center;   /* Центрирует */
    background-repeat: no-repeat;  /* Не повторять */
}
body {
  text-align: leftward;
  color: black;
  font-family: "Times New Roman";
}

.image-button {
    position: absolute;
    left: -17px;     /* Отступ слева */
    top: 310px;      /* Отступ сверху */
}

.image-button img {
    width: 300px;    /* Размер картинки */
    height: auto;
}
.image-button {
    display: inline-block;
    transition: transform 0.3s ease;  /* Плавность анимации */
}

.image-button:hover {
    transform: scale(1.1);  /* Увеличение на 20% */
}
.image-button2 {
    position: absolute;
    left: 37px;     /* Отступ слева */
    top: 490px;      /* Отступ сверху */
}

.image-button2 img {
    width: 250px;    /* Размер картинки */
    height: auto;
}
.image-button2 {
    display: inline-block;
    transition: all 0.3s ease;
}

.image-button2:hover {
   background-color: #8B0000; 
    transform: translateY(-3px);  /* Поднимается */
}
.image-button3 {
    position: absolute;
    left: 37px;     /* Отступ слева */
    top: 615px;      /* Отступ сверху */
}

.image-button3 img {
    width: 250px;    /* Размер картинки */
    height: auto;
}
.image-button3 {
    display: inline-block;
    transition: all 0.3s ease;
}

.image-button3:hover {
   background-color: #8B0000; 
    transform: translateY(-3px);  /* Поднимается */
}
.image-button4 {
    position: absolute;
    left: 37px;     /* Отступ слева */
    top: 740px;      /* Отступ сверху */
}

.image-button4 img {
    width: 250px;    /* Размер картинки */
    height: auto;
}
.image-button4 {
    display: inline-block;
    transition: all 0.3s ease;
}

.image-button4:hover {
   background-color: #8B0000; 
    transform: translateY(-3px);  /* Поднимается */
}
.image-button5 {
    position: absolute;
    left: 37px;     /* Отступ слева */
    top: 855px;      /* Отступ сверху */
}

.image-button5 img {
    width: 250px;    /* Размер картинки */
    height: auto;
}
.image-button5 {
    display: inline-block;
    transition: all 0.3s ease;
}

.image-button5:hover {
   background-color: #8B0000; 
    transform: translateY(-3px);  /* Поднимается */
}

.my-image2 {
    /* Размер */
    width: 450px;        /* Нужная ширина */
    height: auto;        /* Высота подстроится */
    
    /* Позиция */
    display: block;      /* Чтобы работали отступы */
    margin-top: -950px;    /* Отступ сверху */
    margin-bottom: 0px; /* Отступ снизу */
    margin-left: 1050px;  /* Отступ слева */
    
    /* Или если хочешь по центру */
    /* margin-left: auto;
    margin-right: auto; */
    
    /* Красота */
    border-radius: 10px; /* Закругленные углы */
}
.my-image3 {
    /* Размер */
    width: 200px;        /* Нужная ширина */
    height: auto;        /* Высота подстроится */
    
    /* Позиция */
    display: block;      /* Чтобы работали отступы */
    margin-top: -510px;    /* Отступ сверху */
    margin-bottom: 0px; /* Отступ снизу */
    margin-left: 820px;  /* Отступ слева */
}
.my-image4 {
    /* Размер */
    width: 200px;        /* Нужная ширина */
    height: auto;        /* Высота подстроится */
    
    /* Позиция */
    display: block;      /* Чтобы работали отступы */
    margin-top: 340px;    /* Отступ сверху */
    margin-bottom: 0px; /* Отступ снизу */
    margin-left: 1270px;  /* Отступ слева */
}
.my-image5 {
    /* Размер */
    width: 650px;        /* Нужная ширина */
    height: auto;        /* Высота подстроится */
    
    /* Позиция */
    display: block;      /* Чтобы работали отступы */
    margin-top: -500px;    /* Отступ сверху */
    margin-bottom: 0px; /* Отступ снизу */
    margin-left: 376px;  /* Отступ слева */
}
.my-image6 {
    /* Размер */
    width: 610px;        /* Нужная ширина */
    height: 30;        
    
    /* Позиция */
    display: block;      /* Чтобы работали отступы */
    margin-top: -500px;    /* Отступ сверху */
    margin-bottom: 0px; /* Отступ снизу */
    margin-left: 388px;  /* Отступ слева */
}

.text-block {
    position: relative;
    top: -410px;     /* Сдвиг сверху */
    left: -70px;    /* Сдвиг слева */
    right: 0px;    /* Сдвиг справа */
    bottom: 0px;   /* Сдвиг снизу */
}

.sos {
    /* Простой размер */
    width: 300px;        /* Ширина */
    height: auto;        /* Высота подстроится */
   
   margin-top: 0px;    /* Отступ сверху */
    margin-bottom: 0px;  /* Отступ снизу */
    margin-left: -400px;   /* Отступ слева */
}
.sos {
    position: relative;  /* Разрешает двигать картинку */
    top: -890px;          /* Отрицательное значение тянет вверх */
}