/* Pentru tot documentul se pune "*" */
* {
  box-sizing: border-box;
  margin: 0;
  padding-bottom: 0px;
  padding-right: 0px;
  padding-left: 0px;
  padding-top: 0px;
}

body {
  background-color: #f8f8db;
}

h1 {
  color: rgb(233 71 71);
  text-align: center;
}

h2 {
  padding-left: 3vw;
}

h3 {
  padding-left: 2vw;
}

p {
  font-family: 'Times New Roman', Times, serif;
  color: rgb(28 26 26);
  text-indent: 25px;
  text-align: justify;
  padding: 0.4vw 1.5vw;
}

.list {
   display: block;
}

.list_item {
  margin-bottom: 4px;
  padding-left: 35px;
}

/* *************** Head ************* */
header {
  position: fixed;
  top: 0;
  background-color: rgb(32, 35, 50);
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 51px;
  width: 100%;
  padding: 0px 1vw; /*Primu numar e prentru sus si jos, celelalt e prentru parti */
  z-index: 1000;
}
/* end *************** Head ************* */


.container {
  display: flex;
  flex-direction: column;
  user-select: none;
  cursor: default;
}

li, a, button {
  font-family: 'Lucida Sans', sans-serif;
  font-weight: 400;
  font-size: 17px;
  color: azure;
  text-decoration: none;
}


/* *************** Bara de navigare *************** */
.nav_top_links {
  list-style: none;
  padding-inline: 20px;
}
 
.phy_nice_logo {
  width: 100px;
  height: 35px;
  display: flex;
  align-items: center;
}

.phy_nice_logo:hover {
  transform: scale(1.2);
  transition: all 0.3s ease 0s;
}

.interesing_nav_top {
  display: flex;
  overflow-x: auto;
  white-space: nowrap; /*Nu muta textu' pe linia urmatoare*/
  cursor: default;
  user-select: none;
}

.nav_top_links li {
  display: inline-block;
  padding: 0vw 0.5vw;
}

.nav_top_links li a {
  transition: all 0.3s ease 0s;
  display: inline-block;
}

.nav_top_links li a:hover {
  color: rgba(245, 14, 145, 0.9);
  text-shadow: 0px 0px 20px rgba(245, 14, 145, 0.9);
  transform: translateY(-3px); /* se muta textu' */
}

.nav_top_btn {
  padding: 0.27vw 1vw;
  background-color: rgb(202, 4, 83);
  border: 2px solid rgb(202, 4, 83);
  font-size: 17px;
  border-radius: 27px;
  cursor: pointer;
  transition: all 0.3s ease 0s;
}

.nav_top_btn:hover {
  background-color: rgba(202, 4, 83);
  transform: scale(1.05);
}
/* end *************** Bara de navigare *************** */


/* *************** Pentru bara de navigare laterala *************** */
.nav_side {
  position: sticky;
  top: 51px;
  display: flex;
  width: 20%;
  height: auto;
  max-height: calc(100vh - 51px);
  flex-direction: column;
  background-color: #303644;
  border-radius: 0px 0px 10px 0px;
  cursor: default;
  user-select: none;
  z-index: 1;
  overflow-y: auto;
  scrollbar-width: none;
}

.content_table {
  font-family: 'Lucida Sans', sans-serif;
  font-size: 20px;
  color: rgb(255, 255, 255);
  text-decoration: none;
  padding: 0.5vw 1vw;
}

.content_table:hover {
  text-shadow: 0px 0px 20px rgba(151, 238, 65, 0.9);
}

.nav_side_links {
  display: block;
  padding-top: 0px;
  padding-left: 0px;
}

.nav_side_links_lay1 {
  display: hidden;
  margin-bottom: 10px;
  margin-top: -5px;
}

.nav_side_links_lay2 {
  display: hidden;
  margin-bottom: 5px;
  margin-top: 0px;
}

.interesing_nav_side {
  flex-direction: column;
  align-items: center;
  padding-top: 15px;
  padding-right: 0px;
  text-decoration: none;
  text-align: justify;
} 

.nav_side_links a {
  padding: 0.2vh 0.4vw;
  transition: all 0.3s ease 0s;
  font-size: 15px;
}

.nav_side_links_lay1 a {
  padding-left: 10px;
  margin-bottom: 2px;
  margin-top: 1px;
  transition: all 0.3s ease 0s;
  font-size: 13px;
}

.nav_side_links_lay2 a {
  padding-left: 20px;
  margin-bottom: 0px;
  margin-top: 0px;
  transition: all 0.3s ease 0s;
  font-size: 11px;
}

.nav_side_links a:hover {
  box-shadow: 0px 0px 10px rgba(250, 8, 121, 0.5);
  transition: all 0.3s ease 0s;
  transform: scale(1.04);
  background-color: rgba(250, 8, 121, 0.18);
}

.casuta {
  display: block;
  margin-bottom: 10px;
}

.active_section {
  box-shadow: 0px 0px 10px rgba(65, 209, 238, 0.5);
  transform: scale(1.03);
  background-color: rgba(65, 209, 238, 0.18);
}

.active_page {
  box-shadow: 0px 0px 10px rgba(4, 105, 228, 0.5);
  transform: scale(1.015);
  background-color: rgba(4, 105, 228, 0.18);
}
/* end *************** Pentru bara de navigare laterala *************** */


/* *************** Buton meniu ****************/
.menu_btn {
  display: none;
  cursor: pointer;
}

.bar1, .bar2, .bar3 {
  width: 25px;
  height: 3px;
  background-color: #333;
  margin: 6px 0;
  transition: 0.4s;
}

.change .bar1 {
  transform: translate(0, 9px) rotate(-45deg);
  background-color: azure;
}

.change .bar2 {opacity: 0;}

.change .bar3 {
  transform: translate(0, -9px) rotate(45deg);
  background-color: azure;
}
/* end *************** Buton meniu *************** */


/* *************** Buton navigare *************** */
.content_nav {
  position: sticky;
  top: 51px;
  display: flex;
  justify-content: center;
  cursor: default;
  user-select: none;
  padding-top: 10px;
  width: 100%;
}

.nav_btns {
  display: flex;
  justify-content: space-between;
  padding-bottom: 15px;
  width: 100%;
  font-family: 'Lucida Sans', sans-serif;
  font-size: 15px;
  color: rgb(255, 255, 255);
}

.nav_btn1, .nav_btn2 {
  padding: 5px 20px;
  background-color: rgba(223, 100, 13, 0.9);
}

.nav_btn1 {
  border-radius: 15px 5px 15px 5px;
}

.nav_btn2 {
  margin-left: 10px;
  border-radius: 5px 15px 5px 15px;
}

.nav_btn1:hover, .nav_btn2:hover {
  background-color: rgba(223, 100, 13, 0.6);
  transition: all 0.3s ease 0s;
  transform: scale(1.04);
}
/* end *************** Buton navigare *************** */


/* *************** Continutul paginii ************* */
.content {
  padding-top: 0px;
  padding-inline: 20px;
  width: 80%;
}

.iframe_content {
  width: 100%;
  height: calc(100vh - 51px);
  border: none;
}

.main {
  display: flex;
  align-items: flex-start;
  margin-top: 51px;
  scroll-margin-top: 51px;
}

.main_no_sidebar {
  display: flex;
  flex-direction: column;
  text-align: justify;
  margin-top: 51px;
  scroll-margin-top: 51px;
}
/* end *************** Continutul paginii ************* */


/* ************** Publicatii ************** */
.grid {
  width: 100%;
  margin-top: 15px;
  display: flex;
  user-select: none;
  cursor: default;
  flex-wrap: wrap;
  justify-content: center;
  margin-bottom: 20px;
}

.slot {
  flex-direction: column;
  display: flex;
  position: relative;
  border: 1.5px solid #aeaaaa;
  border-radius: 10px;
  width: 200px;
  text-align: center;
  box-shadow: 0 4px 10px rgba(255, 10, 10, 0.4);
  aspect-ratio: 3/4;
  margin-inline: 15px;
  margin-block: 7px;
  background-color: #538ea9d2;
}

.img_place {
  margin: 15px;
  display: flex;
  position: relative;
  border: 1px solid rgb(103, 99, 99);
  height: 200px;
  aspect-ratio: 3/4;
  border-radius: 5px 5px 5px 5px;
  z-index: 3;
  overflow: hidden;
}

.img_place img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  z-index: 1;
}

.img_title {
  flex-direction: column;
  width: 100%;
  display: flex;
  margin-bottom: 10px;
  text-align: center;
  font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
  font-size: 18px;
  color: azure;
}

.slot:hover {
  transition: all 0.3s ease 0s;
  transform: scale(1.05);
  background-color: #7acdf7;
}
/* ************** Publicatii ************** */


/* ************** Footer ************ */
footer {
  position: relative;
  bottom: 0px;
  margin-bottom: 0px;
  background-color: rgb(102, 10, 20);
  display: flex;
  justify-content: center;
  align-items: center;
  margin: auto;
  height: 180px;
  user-select: none;
  cursor: default;
}

.foot-title {
  color: azure;
  text-decoration: underline;
  text-decoration-style: solid;
  text-align: center;
}

.footer_link {
  display: flex;
  flex-direction: column;
  padding: 4px;
  text-align: left;
  bottom: 0px;
  width: fit-content;
}
/* end *************** Footer ************* */

/*Sterge caracteristica de float */
/*section::after {
  content: "";
  display: table;
  clear: both;
} !Poate mai ai nevoie de asta*/


/* Daca ecranul are o latime de maxim 750px, atunci 
section si article vor avea latimea de 100% si inaltimea auto */
@media (max-width: 750px) {
  .content {
    width: 100%;
    height: auto;
  }

  .main {
    flex-direction: column;
  }

/* Buton meniu */
.nav_side {
  position: fixed;
  top: 95px;
  left: 0px;
  max-height: calc(100vh - 51px);
  height: auto;
  transform: translateX(-100%); 
  z-index: 1000;
  padding-left: 10px;
  padding-right: 10px;
  max-width: 65%;
  width: auto;
  border-radius: 0 10px 10px 0;
}

.nav_side.active {
  transform: translateX(0);
}

.menu_btn {
  display: block;
  justify-content: space-between;
  padding-inline: 3px;
  margin-right: 17px;
  margin-left: -15px;
  border-radius: 3px 3px 0px 0px;
}

.menu_btn.active {
  background-color: #303644;
  transition: all 0.3s ease 0s;
}
/* end Buton meniu */
}