.background {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
}
#background{
  margin-left: 9%;
  height:70%;
  width:80%;
}
#stylesP{
  color: #000000;
  margin-top: 2%;
}
a{
  color: black;
}
a:hover{
  color: #000000;
  text-decoration: None;
}
/*test1.html*/
#data{
  margin-left: 5%;
}

/*telegram*/

#telegram {
  background-image: url("IMG/Telegram.png"); /* Замініть це на реальний шлях до вашого зображення */
  background-size: cover; /* Змінюємо розмір зображення */
  height: 60px;
  width: 60px;
  border-radius: 90px;
  border: none; /* Видалити рамку у кнопки */
/*  margin-left: -13%;*/
}

/* Стилі для натискання на кнопку */
#telegram:active {
  transform: translateY(1px);
}

#viber {
  background-image: url("IMG/viber.png"); /* Замініть це на реальний шлях до вашого зображення */
  background-size: cover; /* Змінюємо розмір зображення */
  height: 60px;
  width: 60px;
  border-radius: 90px;
  border: none; /* Видалити рамку у кнопки */
}

#whatsapp {
  background-image: url("IMG/whatsapp.png"); /* Замініть це на реальний шлях до вашого зображення */
  background-size: cover; /* Змінюємо розмір зображення */
  height: 60px;
  width: 60px;
  border-radius: 90px;
  border: none; /* Видалити рамку у кнопки */
}

/* Стилі для натискання на кнопку */
#viber:active {
  transform: translateY(1px);
}

@media only screen and (max-width: 900px) {
  /* Додати стилі для маленьких екранів */
  #telegram {
  background-image: url("IMG/Telegram.png"); /* Замініть це на реальний шлях до вашого зображення */
  background-size: cover; /* Змінюємо розмір зображення */
  height: 60px;
  width: 60px;
  border-radius: 90px;
  border: none; /* Видалити рамку у кнопки */
  margin-left: -13%;
}
  .background {
    background-image: url("IMG/BGG.png");
    background-repeat: no-repeat;
    background-position: center;
/*    background-size: cmarover;*/
    width: 99%;
    height: 50%;
    margin-left: -13%;
/*    padding: 0;*/
  }
  #stylesP{
    color: #000000;
    margin-top: 3%;
    font-size:1em;
  }
  #stylesP1{
    color: #000000;
    margin-top: 3%;
    font-size:0.5em;
  }
  #background{
    margin-left: 19%;
    height:40%;
    width:60%;
  }
}
/*li{
  list-style: none;
}*/
#option1{
  width: 1.2em;
  height: 1.2em;
}


.container {
 display: block;
 position: relative;
/* padding-left: 35px;*/
 margin-bottom: 12px;
 cursor: pointer;
 font-size: 22px;
 margin-left: 0;
 -webkit-user-select: none;
 -moz-user-select: none;
 -ms-user-select: none;
 user-select: none;
}


.container input {
 position: absolute;
 opacity: 0;
 cursor: pointer;
 height: 0;
 width: 0;
}

.checkmark {
 position: absolute;
 top: 0;
 left: 0;
 height: 24px;
 width: 24px;
 background-color: white;
 border: 1px solid black;
 border-radius: 5px;
}

.container:hover input~.checkmark {
 background-color: white;
}
.container input:checked~.checkmark {
 background-color: white;
 border: 1px solid black;
 border-radius: 5px;
}
.checkmark:after {
 content: "";
 position: absolute;
 display: none;
}
.container input:checked~.checkmark:after {
 display: block;
}
.container .checkmark:after {
 left: 41%;
 top: 5px;
 width: 5px;
 height: 10px;
 border: 1px solid green;
 border-width: 0 3px 3px 0;
 -webkit-transform: rotate(45deg);
 -ms-transform: rotate(45deg);
 transform: rotate(45deg);
}