@font-face {
  font-family: 'Futura';
  src: local('Futura'),
       url('/static/futurasv/Futura Std Book.ttf') format("truetype");
}  

/* Hide scrollbars */
body {
  overflow-x: hidden;
}

::-webkit-scrollbar {
  width: 0px;
  background: transparent; /* make scrollbar transparent */
}

.tree_pot {
  display: flex;
  width: 90%;
  justify-content: center;
  align-items: flex-end;
}

svg {
  width: 100%;
  overflow: hidden;
}

/* Hide all posts, let javascript reveal them in animation */
#Posts > g > g > circle {
  /* visibility: hidden; */
  transition: fill 0.3s ease;
} 


/* Using !important to override svg inline properties - necessary as svg otherwise overrides css stylings if defined */
#Posts > g > g > circle:hover {
  fill: #f07167 !important;
}

/* #Posts > g { */
  /* visibility: hidden; */
/* } */

#Posts > g > g > text {
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.5s ease;
}

/* Setting transition of all id's that contain ViewButton */
[id^="ViewButton"] {
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.5s ease;
}

#Posts > g #thumbnail {
  opacity: 0;
  transition: opacity 0.5s ease;
}

/* style="fill:rgb(63,177,255); */
/* #Posts g  circle:hover {
  fill: #0081a7;
} */

.reveal {
  position: absolute;
  height: 100vh;
  width: 100%;
  top: 0;
  left: 0;
  z-index: -1;
}

/* Scrolling */

.scroll-container {
  display: flex;
  height: 100%;
  transition: transform 0.5s ease-in-out;
  /* transform: translateY(-145px); */
}

.section {
  position: relative;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 3em;
  color: rgb(0, 0, 0);
}

/* The actual popup */
.popup {
  visibility: hidden;
  position: fixed;
  z-index: 10;
  width: 80vw;
  height: 80vh;
  text-align: center;
  border-radius: 6px;
  color: #fff;
  background-color: #5E9BE1;
  padding: 8px 0;
  top: 5%;
  left: 10%;
  /* right: 10%; */
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
}

.popup .button-container {
  display: flex;
  width: 100%;
  padding-left: 20px;
  justify-content: flex-end;
  box-sizing: border-box;
}


.popup button {
  /* width: 100px;
  width: 100px; */
  height: 60px;
  line-height: 0%;
  font-size: 100px;
  color: #fff;
  background-color: #5E9BE1;
  border: none;
}

#section1 {
  background-color: #ffffff;
}

#section2 {
  background-color: #ffffff;
}

#section3 {
  background-color: #ffffff;
}
   
.popup .popup-content {
  display: flex;
  width: 100%;
  height: 100%;   
  padding-top: 3%;
  padding-left: 2.5%;
  padding-right: 2.5%;
  padding-bottom: 5%;
}
.popup-content > p {
  text-align: left;
  font-size: 20px;
  width: 40%;
}

.popup-content > div {
  width: 55%;
}

/* Mobile */
@media (max-width: 750px) {
  
  .scroll-container {
      width: 300vw; /* 3 times the width of the viewport */
  }
  .section {
      flex: 0 0 100vw; /* Each section takes up the full width of the viewport */
  }

  /* .section .popup {
      width: 100%;
  } */

  .popup .popup-content {
      flex-direction: column;
      width: 100%;
      height: 100%;   
      padding-top: 0%;
      padding-left: 2.5%;
      padding-right: 2.5%;
      padding-bottom: 5%;
  }
  .popup-content > p {
      font-size: 20px;
      width: 100%;
      height: 20%;
  }
  
  .popup-content > div {
      width: 95%;
      height: 80%;
  }
  
}

/* Computer */
@media (min-width: 750px) {
  
  .section {
      flex: 1 0 33vw; /* Each section takes up a third of the viewport */
  }
  .scroll-container {
      width: 100vw; /* 100% viewport */
  }

      
  .popup .popup-content {
      display: flex;
      width: 100%;
      height: 100%;   
      padding-top: 3%;
      padding-left: 2.5%;
      padding-right: 2.5%;
      padding-bottom: 5%;
  }
  .popup-content > p {
      text-align: left;
      font-size: 20px;
      width: 40%;
  }
  
  .popup-content > div {
      width: 55%;
  }
}