* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body, html {
  height: 100%;
  font-family: 'Geo', sans-serif;
}

.shadow {
  text-shadow: 2px 2px 5px rgba(0,0,0,1);
}

/*inizio barra superiore*/

.navbar{
  width: 100%;
  height: 73px;
  z-index: 9;
  position: fixed;
  padding: 0;
  top: 0;
  transition: background 0.3s ease, transform 0.3s ease;
}

.navbar.transparent{
  background: transparent; 
  color: whitesmoke;
}

.navbar.scrolled-light{
  background: rgba(18,18,18,1);
  color: #111;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.navbar.scrolled-dark{
  background: #181818;
  color: whitesmoke;
  box-shadow: 0 2px 10px rgba(0,0,0,0.3);
}

.navbar.hide{
  transform: translateY(-100%);
}

p.bar {
  position: fixed;
  top: 15px;
  width: 100%;
  height: 50px;
  background: rgba(0,0,0,0);
  color: whitesmoke;
  font-size: 40px;
  text-align: center;
  z-index: 9;
  transform-origin: top center;
  display: block;
}

#logo{
  width: 130px;
  z-index: 10;
  right: 0%;
  top: 5px;
  position: fixed;
  transform-origin: top right;
}

#logoB{
  position: fixed;
  width: 120px;
  z-index: 10;
  left: -20px;
  top: -25px;
}

.bar{
  transition: 0.5s ease;
}

/*inizio barra laterale*/

#bgbar{
  width: 100%;
  height: 100%;
  position: fixed;
  z-index: 0;
  background: transparent;
  transition: 0.5s ease;
  padding: 90px 30px 30px;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}

.sidenav {
  width: 0px;
  height: 100%;
  position: relative;
  background-color: rgb(39,39,39);
  border: 7px solid whitesmoke;
  transition: 0.5s ease;
  display: flex;
} 

.bghome {
  width: 100%;
  height: 100%;
  position: relative;
  padding: 5vh 0; 
  transition: 0.5s ease; 
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
  overflow: auto;
}

.sidenav a {
  text-decoration: none;
  padding: 1.5vh 2vw;
  font-size: max(39px, 3vw);
  color: rgb(135,135,135);
  transition: 0.5s;
  text-align: center;
  height: 100%;
  min-width: fit-content;
}

.sidenav a:hover {
  color: #f1f1f1;
  transition: 0.2s;
}

.sideR {
  width: 0;
  top: 0;
  right: 0;
}

.sideR a {
  align-content: center;
  padding: 4vh;
}

#pageP a {
  font-size: max(35px, 3vw) !important;
}

#arrow{
  transform: rotate(180deg);
  left: 20px;
  top: 115px;
  z-index: 9;
  width: 40px;
  transition: 0.5s ease; 
}

/*fine barra laterale*/

.container {
  display: flex;
  height: 100vh;
  width: 100%;
  overflow: hidden;
}

.half {
  flex: 1;
  position: relative;
  transition: flex 1.2s ease 0.1s;
  overflow: hidden;
}

.half::before {
  content: "";
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transition: opacity 0.5s ease;
  z-index: 1;
  opacity: 1;
}
  
.half::after {
  content: "";
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0); /* trasparente di default */
  transition: background-color 0.4s ease;
  z-index: 2;
}

#left::before {
  background-image: url('https://news.harvard.edu/wp-content/uploads/2022/11/081022_Harvard_Forest_54.jpg');               
}

#right::before {
  background-image: url('https://www.agri-zoo.com/media/wysiwyg/efd698464a0708dbfbdff69b0d868d90.jpg');
}

#center::before{
  background-image: url('https://static-www.cavallomagazine.it/wp-content/2023/06/WhatsApp-Image-2023-06-25-at-08.57.13.jpeg');
}

/* Espansione e opacità solo durante hover */
.container:hover .half {
  flex: 1;
}

.container:hover .half:hover {
  flex: 4;
}

.container:hover .half:not(:hover)::after {
  background-color: rgba(0, 0, 0, 0.6);
}

.half:not(:hover) .overlay-text {
  font-size: 40px;
}

.half:hover .button {
  color: rgba(245,245,245,1);
  top: 62%;
  pointer-events: auto;
  transition-delay: 1s;
}

.button:hover{
  font-weight: bold;
  transition-delay: 0s;
}

.overlay-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 3;
  color: white;
  font-size: 70px;
  text-align: center;
  padding: 0 20px;
  border: 4px solid white;
  text-shadow: 0 0 5px black;
  display: flex;
  transition: 1.2s ease;
}

.button {
  position: absolute;
  transform: translate(-50%, -50%);
  top: -20%;
  left: 50%;
  margin-top: 20px;
  color:  rgba(255, 255, 255, 0);
  text-align: center;
  text-decoration: none;
  font-size: 30px;
  z-index: 3;
  transition: color 1s linear;
  pointer-events: none;
}

/* Responsive layout mobile */

@media (max-aspect-ratio: 16/9), (max-width: 768px) {
  .container{
    flex-direction: column;
  }
  .half{
    height: 50vh;
  }
  .half:not(:hover) #db{
    top: 60%;
  }
  .logoN{
    display: none;
  }
}

@media (max-width:750px) {
  .sidenav a{
    font-size: 8vw;
  }
}

@media (max-width:680px) {
  .bar{
    transform: scale(0.8);
    transform-origin: center;
  }
  .titolo{
    display: none;
  }
}