@import url('header.css');
@import url('footer.css');
@import url('sectors.css');


* {margin: 0; padding: 0;}
p {font-family: "Lora"}
a {text-decoration: none;}

body {height: 100%;}

.zagolovki {text-align: center; font-size: 17px; font-weight: bold; padding: 5px 0 5px 0}


#content {width: 1250px; height: 100vh; position: relative; margin: 0 auto 0 auto; z-index: 50}

#block_fona {width: 1250px; margin-left: auto; margin-right: auto; z-index: 10}
#fon {width: 1250px; height: 100%; position: fixed; box-shadow: 0 0 5px; background-color: #FDFFF5; z-index: 10}

#leviy_block {width: 250px; float: left; z-index: 100}
#praviy_block {width: 1000px; float: right; z-index: 50}

#content_levogo_blocka {position: fixed; z-index: 100; width: 250px; height: 100%; background-image: url(../../../../resource/img/fonlev.jpg);
  display: grid; grid-template-columns: 250px; grid-template-rows: 40px 39px 1fr 30px 33px; grid-row-gap: 5px}
.leviy_content {margin: 0 5px 0 5px; background-color: rgba(255, 252, 246, 0.91); border-style: solid; border-color: #ffffff; border-width: 1px;}
.leviy_content:hover {background-color: rgba(255, 252, 246, 0.97);}


#materinskiy_takson {text-align: center; color: black;}
#materinskiy_takson:hover #higher_takson_name_name {transform: scale(1.1); transition: 0.5s; text-shadow: 4px 4px 3px #a2d4df;}
#higher_takson_name_name {font-size: 19px; font-weight: bold}
#takson_link {color: rgb(0, 0, 0);}

#rodstvenniki {padding: 5px 5px 5px 11px; overflow-y: auto; }
#spisok_rodstvennikov {white-space: nowrap;}

.text_rodstvennikov_1 {color: #7e0f12; font-size: 13.1px;}
.text_rodstvennikov_2 {color: #c33124; font-size: 12.9px;}
.text_rodstvennikov_3 {color: #c33124; font-size: 12.9px;}
.text_rodstvennikov_4 {font-size: 14.1px;}

.text_rodstvennikov_5 {color: #7e0f12; font-size: 17.5px; padding-top: 5px; padding-bottom: 2px}
.text_rodstvennikov_6 {color: #c33124; font-size: 17px; padding-top: 3px; padding-bottom: 3px}
.text_rodstvennikov_7 {color: #c33124; font-size: 17px; padding-top: 3px; padding-bottom: 3px}
.text_rodstvennikov_8 {font-size: 16px; padding-top: 3px; padding-bottom: 3px}

.text_rodstvennikov_vidi {position: relative; bottom: 5px; transform: translateY(31px); font-style: italic}

.link_rodstvennikov {font-size: 16px; color: rgb(0, 0, 0);}
.link_rodstvennikov:hover {font-size: 16px; display: inline-block; transform: scale(1.05); transition: 0.1s; text-shadow: 4px 4px 3px #a2d4df; border-bottom: dashed; border-width: 1px;}
#rodstvenniki::-webkit-scrollbar {width: 8px; height: 7px; background-color: #CFD4E8; border-radius: 10px;}
#rodstvenniki::-webkit-scrollbar-thumb {border-radius: 10px; background: linear-gradient(180deg, #00c6fb, #005bea);}
#rodstvenniki::-webkit-scrollbar-track {box-shadow: inset 0 0 6px rgba(0,0,0,0.2); -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.2); border-radius: 10px; background-color: #f4f4f2;}

#vidov_v_katologe {text-align: center; padding-top: 3px}

#content_pravogo_blocka {width: 1000px; z-index: 50; position: relative; top: 45px; height: auto;
  display: grid; grid-template-columns: 1000px; grid-row-gap: 5px; padding-bottom: 50px}
.plaviy_content {width: 970px; margin: 0 5px 0 5px; padding: 5px 10px 2px 10px; border-top-style: solid; border-color: #cd975b; border-width: 1px;}

#systematika {font-size: 15px; text-align: justify}

#nazvanie {top: 50; position: relative}
#taxon {display: inline; font-weight: bold; font-size: 21px}
#name {display: inline; font-size: 22px; color: #f80039}
#text_identifikatorov {padding-top: 7px}
.link_identifikatorov {color: #fe9001;}
.link_identifikatorov:hover {font-weight: bold;}

#redactor {padding-bottom: 39px ; text-align: center; height: 70px}
.redactorsslk {display: inline-block; text-decoration: none; font-size: 19px; text-align: center; color: black}
.redactorsslk:hover {transition: 0.3s; text-shadow: 4px 4px 3px #a2d4df; transform: scale(1.1);}

/* описание */
#text_opisanya {text-align: justify; font-family: "Lora"; font-size: 19px; color: #202122}

#classification {width: 920px; padding-left: 55px}

/* ячейки видов */
.species_species {width: 25%; height: 330px; float: left; text-align: center;}
.species_images {object-fit: contain; width: 90%; max-height: 90%; top: 50%; transform: translate(0, -55%); position: relative; z-index: 100; transition: 0.5s; box-shadow: 0 0 3px}
.species_images:hover {transform: scale(1.03, 1.03) translateY(-55%);}


#redactorsslk1 {position: absolute; right: 10px; top: 5px; margin-top: 2px; margin-right: 3px; width: 21px; height: 21px; border-radius: 50%; box-shadow: 0px 0px 3px; background-color: #a4bbbf; display: flex; justify-content: center; align-items: center; text-decoration: none; color: black}
#redactorsslk2 {position: absolute; right: 40px; top: 5px; margin-top: 2px; margin-right: 3px; width: 21px; height: 21px; border-radius: 50%; box-shadow: 0px 0px 3px; background-color: #a59ea8; display: flex; justify-content: center; align-items: center; text-decoration: none; color: black}
#redactorsslk1:hover {box-shadow: 0px 0px 4px;}
#redactorsslk2:hover {box-shadow: 0px 0px 4px;}
#tooltip1 {display: none; width: 195px; height: 17px; position: absolute; top: 25px; right: 10px; background-color: rgba(0, 0, 0, 0.8); color: white; padding: 5px; border-radius: 3px;  font-family: "Lora"; font-size: 12px; text-align: center;}
#tooltip2 {display: none; width: 195px; height: 17px; position: absolute; top: 25px; right: 10px; background-color: rgba(0, 0, 0, 0.8); color: white; padding: 5px; border-radius: 3px;  font-family: "Lora"; font-size: 12px; text-align: center;}
#redactorsslk1:hover #tooltip1 {display: block;}
#redactorsslk2:hover #tooltip2 {display: block;}