html{
   overscroll-behavior: none; 
}

.mainDIV {
   /* width: 800px; */
   width: 90%;
   margin-left: auto;
   margin-right: auto;
   font-family: Arial, Helvetica, sans-serif;

}
   label {
      font-size: 1em;
      text-align:right;
   }

/* Шапка */
.top {
   background-image: url('../img/bkgTop.jpg');
   width: 100%;
   height: 330px;
   border-radius: 10px 10px 0 0;
}

/* Контент в шапке */
.top_content {
   background-color: #FDC9A9;
   width: 100%;
   height: 20px;
   border-radius: 10px 10px 0 0;
   color: #BF8A69;


}

.usernametext {
   padding-right: 10px;
   padding-top: 0px;
   text-align: right;
   color:#542b12;
   margin-top: 5px; 
}

/* Основной блок контента в главном окне */
.main {
   /* background-color:#fddecb; */
   background-color: #f9caae;


   background-image: url("../img/bkgMain.jpg");
   background-repeat: repeat-x;
   margin: 0px;
   height: max-content;

}

/* Главный блок еонтента в разделе тестов */
.main_content {
   background-color: #FDC9A9;
   background-image: url("../img/bgk_quiz.jpg");
   background-blend-mode: lighten;
   background-repeat: no-repeat;
   margin: 0px;
   padding-top: 0px;
   height: max-content;
   display: flex;
   justify-content: center;
   align-items: center;


}

/* Блок с тестом */
.testcontainer {
   display: flex;
   /* justify-content: space-around; */
   justify-content: center;
   /* Или другое значение, в зависимости от желаемого расположения */
   /* align-items: center; */

}
.resultname {
    background-color: azure;
   margin: 5px;
   padding: 10px;
   border-radius: 15px;
}



/* Блок с вопросом */
.questblock {
   background-color: azure;
   margin: 5px;
   padding: 10px;
   border-radius: 15px;
}
.questblock img{
    width:200px;
}

/* Блок теса с вопросом и ответами */
.questmain {
   display: flex;
   flex-direction: column;
   justify-content: space-around;
   align-items: center;
   margin-left: 5px;
   margin-right: 5px;
}

/* Блок с ответами */
.container {
   background-color: #fddecb;
   text-align: center;
   /* margin: 0px; */
   /* padding: 10px; */


}

.form-group {
   width: 100%;
   display: flex;
   justify-content: right;
   align-items: center;
}

/* Подвал */
.foot {
   background-color: #BF8A69;
   background-image: url("../img/footBkgTop.jpg");
   background-repeat: repeat-x;
   padding: 10px;
   padding-top: 40px;
   margin: 0px;
   border-radius: 0 0 10px 10px;

   /* Shadow */
   -webkit-box-shadow: 8px 7px 5px -5px rgba(34, 60, 80, 0.6);
   -moz-box-shadow: 8px 7px 5px -5px rgba(34, 60, 80, 0.6);
   box-shadow: 8px 7px 5px -5px rgba(34, 60, 80, 0.6);
}

body {
   background-image: url('../img/bkg600pxWht.png');
}

/* Меню. В основном для главного экрана */
.menu {
   margin-bottom: 0px;
   display: flex;
   justify-content: center;
   /* flex-direction: column; */

}

/* кнопки меню */
.btn {
   /* width: 100px; */
   width: 150px;
   height: 200px;
   margin: 10px;
   background-color: white;
   border-radius: 10px;
   padding: 10px;
   padding-bottom: 30px;
   margin-top: 20px;
   cursor: pointer;

   /* Shadow */
   -webkit-box-shadow: 0px 5px 10px 2px rgba(34, 60, 80, 0.2);
   /* -webkit-box-shadow: 0px 5px 10px 2px rgba(248, 28, 28, 0.2);  */
   -moz-box-shadow: 0px 5px 10px 2px rgba(34, 60, 80, 0.2);
   /* -moz-box-shadow: 0px 5px 10px 2px rgba(14, 6, 246, 0.2);  */
   box-shadow: 0px 5px 10px 2px rgba(34, 60, 80, 0.2);
   /* box-shadow: 0px 5px 10px 2px rgb(242, 74, 2); */
}

.btn  p {
   text-align: center;
   font-family: Arial, Helvetica, sans-serif;

}

.btn  p, img {
   margin: 0;
   padding: 0;
    width: 100%;


}
/* Блок с результатами (доп)*/
.blockrezult {
     /* width: 100px; */
   width: 150px;
   /* height: 200px; */
   margin: 10px;
   background-color: white;
   border-radius: 10px;
   padding: 10px;
   padding-bottom: 30px;
   margin-top: 20px;
   cursor: pointer;
   display: flex;
   justify-content: center;

   /* Shadow */
   -webkit-box-shadow: 0px 5px 10px 2px rgba(34, 60, 80, 0.2);
   -moz-box-shadow: 0px 5px 10px 2px rgba(34, 60, 80, 0.2);
   box-shadow: 0px 5px 10px 2px rgba(34, 60, 80, 0.2);
}
.blockrezult img{
    width:30%;
   /*  height: intrinsic; */
}
.blockrezult  p {
   text-align: center;
   font-family: Arial, Helvetica, sans-serif;

}

/* Кнопки для ответов теста на соотношения */
.btncompareansw {
   width: 100px;
   height: 100px; /* Потом попробовать обойтись без фиксированной высоты*/
   margin: 10px;
   /* background-color: rgb(206, 245, 217); */
   background-color: white;

   border-radius: 10px;
   padding: 10px;
   padding-bottom: 30px;
   margin-top: 20px;
   cursor: pointer;

   text-align: left;
   font-family: Arial, Helvetica, sans-serif;

   /* Shadow */
   -webkit-box-shadow: 0px 5px 10px 2px rgba(34, 60, 80, 0.2);
   -moz-box-shadow: 0px 5px 10px 2px rgba(34, 60, 80, 0.2);
   box-shadow: 0px 5px 10px 2px rgba(34, 60, 80, 0.2);
   /* -webkit-box-shadow: 0px 5px 10px 2px rgba(246, 4, 4, 0.2); 
    -moz-box-shadow: 0px 5px 10px 2px rgba(80, 34, 34, 0.2); 
    box-shadow: 0px 5px 10px 2px rgb(255, 0, 0); */
    transition: all 0.3s;
    
}
.btncompareansw::before {
   background: radial-gradient(circle, #fff 20%, transparent 20%); /* Radial gradient for glossy effect */
   transition: all 0.3s;
   transform: translate(-50%, -50%) scale(0);
   transform: scale(1);
}

.btncompareansw:hover::before {
   /* transform: translate(-50%, -50%) scale(1); */
   transform: scale(0);
 }

.btncompare {
   width: 100px;
   height: 100px; /* Потом попробовать обойтись без фиксированной высоты*/
   margin: 10px;
   background-color: rgb(179, 226, 249);
   border-radius: 10px;
   padding: 10px;
   padding-bottom: 30px;
   margin-top: 20px;
   /* cursor: pointer; */

   text-align: left;
   font-family: Arial, Helvetica, sans-serif;
   
   font-size: 1em; /* Задайте начальный размер шрифта в единицах viewport width */
   max-width: 100%; /* Гарантирует, что текст не выйдет за пределы ширины экрана */

   overflow: auto;
   /* Shadow */
   -webkit-box-shadow: 0px 5px 10px 2px rgba(34, 60, 80, 0.2);
   -moz-box-shadow: 0px 5px 10px 2px rgba(34, 60, 80, 0.2);
   box-shadow: 0px 5px 10px 2px rgba(34, 60, 80, 0.2);
}

.btngoanswer {
   border-radius: 10px;
   /* background-color: rgb(31, 203, 233); */

   background-color: rgb(163, 228, 207);
   padding: 5px;
   width: 200px;
   margin-top: 5px;
   /* font-size: 14pt; */
   overflow: auto;

   text-align: center;

   /* Shadow */
   -webkit-box-shadow: 0px 5px 10px 2px rgba(34, 60, 80, 0.2);
   -moz-box-shadow: 0px 5px 10px 2px rgba(34, 60, 80, 0.2);
   box-shadow: 0px 5px 10px 2px rgba(34, 60, 80, 0.2);

}

.foot p {

   color: #e9eff4;
   text-align: center;

}

.footMenu {
   width: 100%;
   display: flex;
}

.foot a {
   color: #542b12;
   margin-left: auto;
   margin-right: auto;
}

/* Адаптивная верства */
/* Параметры для ПК */
@media (min-width: 416px) {

   .mainDIV {
      width: 90%;
   }

   .container {
      background-color: #fddecb;
      width: 70%;
      text-align: center;
      margin: 0px;
      padding: 10px;
      display: grid;
      justify-content: space-around;

   }

}



/* Параметры для мобильника */
@media (max-width:415px) {
   .top {
      background-image: url('../img/bkgTop320-2.png');
      background-repeat: no-repeat;
      height: 150px;
      background-color: #f9caae;

   }

   .main {
      background-color: #f9caae;

      background-image: url("../img/bkgMain320.png");
   }
 

   .mainDIV {
      width: 90%;

   }

   .menu {
      margin-bottom: 0px;
      display: flex;
      flex-direction: column;
      /* justify-content: center; */
      align-items: center;
   }

   .btn {
      /* width: 80%; */
      font-size: 16pt;

   }

   .btncompare {
      /* width:40%; */
      /* font: size 1em; */
      /* background-color: cadetblue; */
   }
   .main_content {
      width: 100%;
      background-color: #f9caae;

   }
   .resultname p{
    font-weight:bold;
    font-family:Arial;
    font-size:1em;
    text-align: center;
    color:red;
    }
}