@import url(normalize.css);
@import url(pc.css);
@import url(mobile.css);

/*body img {
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  z-index: 0;
  height: 100vh;
}*/

@@font-face {
  font-family: vollKorn;
  src: url(../fonts/Vollkorn-Regular.ttf);
}

*{
  box-sizing: border-box;
}

h1, h2, h3, h4{
  font-family: Helvetica, Verdana, sans-serif;
}

h2{
  font-size: 40px;
}

p, span, a{
  font-family: vollKorn, "Open Sans", sans-serif;
}

:root{
   --main_red: #e31e24;
}


/*стилизация как и разметка начинаются с mobile-first*/
/*отключаем ненужные в мобильной версии блоки*/

.main_container {
  display: flex;
  /*position: absolute;
  top: 0;*/
  height: 100vh;
  width: 100vw;
   /*задний фон определяется каждый в своем файле*/
  flex-direction: column;
}


/*описываем верхнюю часть контейнера которая содержит кнопки для получения доступа к видео и получения презентации по кнопками
описание: верхняя часть главного экрана, актуальна только для мобильной версии в ПК версии это будет основной контейнер для отображения кно*/
.up-btn-container{
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: start;
  gap: 2rem;
  align-items: center;
  padding: 3rem 0;
  margin-top: 0;
}

.links{
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 0.7rem;
}

.up-btn-container h1{
  display: inline-block;
  color: white;
  font-size: 8vmin;
  font-weight: bold;
  text-align: center;
  text-shadow: 0 0 10px black;
}

.up-btn-container button{
  display: flex;
  background-color: rgba(255, 255, 255, .15);
  color: white;
  font-size: 4vmin;
  font-weight: bold;
  width: 70vmin;   /*!!!!!!подумать по ширине, возможно под каждую ширину задать разхмер. при уменьшении ширины вылазит текст*/
  min-width: 60px;
  height: 18vmin;
  min-height: 2rem;
  overflow: hidden;
  margin: 10px;
  border: 4px solid white;
  border-radius: 7px;
  box-shadow: 0 0 3px 1px black;
  padding: 5px 7px;
  flex-flow: row;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}

.up-btn-container .mobile_only a{
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 100%;
  gap: 1rem;
  color: inherit;
  text-decoration: none;
}

.up-btn-container .mobile_only svg{
  flex: 1;
  max-height: 100%;
  max-width: 100%;
}

.up-btn-container .mobile_only span{
  flex: 3;
}

.up-btn-container button:active{
  box-shadow: 0 0 1px white;
  background-color: white;
}

.up-btn-container button:hover{
  background-color: white;
  color: black;
}

.up-btn-container img{
width: 25%;
display: inline-block;
height: 75%;
filter: drop-shadow(0 0 5px black);
}

.up-btn-container span{
  flex: 3;
  display: inline-block;
  text-shadow: 0 0 3px black;
  font-size: 1.125rem;
}

/*описываем нижнюю часть центрального экрана. у нас есть контейнер для открытия меню, и контейнер для двух кнопок*/


/*описание блока ключевых особенностей, идет за главным экраном перед описанием команды*/
.key_features_wrapper{
  margin: 50px auto 0;
  text-align: center;
  box-shadow: 0 0 4px #9B0202A1;
  padding: 10px 0;
  width: 92%;
}

.key_features_wrapper h4{
  padding: 0 10px;
  font-size: 1.15em;
}


.key_features_list div{
  margin: 10px 0;
}

.key_features_list .number{
  margin: 45px auto 20px;
  position: relative;
  left: -10px;
  background-color: #ffbf0080;
  border-radius: 5px;
  box-shadow: 0 0 7px #860505;
  width: 50px;
  height: 50px;
}

.key_features_list div div span {
  position: absolute;
  top: -8px;
  right: -18px;
  display: flex;
  font-size: 35px;
  font-weight: bold;
  color: #ff0000b8;
  background-color: #a87c7c4a;
  box-shadow: 0 0 12px #000000b3;
  text-shadow: 0 0 1px black;
  border-radius: 5px;
  width: 55px;
  height: 50px;
  justify-content: center;
  align-items: center;
}

.key_features_list p{
  text-align: justify;
  padding: 0 10px;
  line-height: 1.2em;
}

/*Описание блока команда - "Команда БДК"*/

.team_wrapper{
 display: flex;
 flex-flow: column;
 width: 92%;
 justify-content: center;
 align-items: center;
 margin: 10px auto;
}


.team_wrapper_img_description img{
  display: block;
  width: 100%;
  border-radius: 5px 5px 0 0;
}

.team_wrapper_img_description p{
  display: block;
  color: black;
  line-height: 1.2em;
  font-size: 1.2em;
  border-radius: 0 0 5px 5px;
  /*text-shadow: 0 0 1px white;*/
  text-align: justify;
  margin: 0;
  padding: 15px 10px;
  background-image: linear-gradient(transparent, rgba(255, 255, 255, 0.4)), url("../images/text-bg.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  background-color: #ff0000b8;
}


/*Описание блока прямых контактов*/
.dir_contact_wrapper{
  display: flex;
  flex-flow: column;
  justify-content: space-between;
  align-items: center;
  width: 92%;
  border-radius: 5px;
  margin: 15px auto;
  padding-top: 15px;
  box-shadow: 0 0 4px #9B0202A1;             /*повторяется переменная*/
}

.dir_contact_wrapper h2{
letter-spacing: 1.5px;
}


.dir_contact_wrapper .contact{
margin: 7vmin 0;
}

.dir_contact_wrapper .contact h4{
font-size: 1.5em;
}

.dir_contact_wrapper .contact *{
  margin: 10px auto;
  text-align: center;
}

.dir_contact_wrapper .contact img{
  display: block;
  width: 50%;
  border-radius: 50%;
  box-shadow:
}

.dir_contact_wrapper .contact p{
  font-style: italic;
}
/*стилизуем элементы списка: кнопки на социальные сети*/
.dir_contact_wrapper .contact ul{
  list-style: none;
  padding: 5px 0;
}

.dir_contact_wrapper .contact li a{
  display: block;
  text-decoration: none;
  width: 70%;
  padding: 15px 10px;
  color: white;
  font-weight: bold;
  font-size:1.2em;
  box-shadow: 0 0 3px black;
  background-color: #c80000;
  border: 3px solid transparent;
  border-radius: 4px;
  transition: all .6s;
}

.dir_contact_wrapper .contact li a:first-child{
  margin-bottom: 15px;
}

/*описание iframe в конце где карта проезда*/
#iframe_wrapper{
  width: 92%;
  margin: 0 auto;
  box-shadow: 0 0 4px #9B0202A1;
  margin-bottom: 15px;
}

body>h2{
  font-size: 20px;
  text-align: center;
  padding: 20px;
  margin-bottom: 0px;
}