/*IMPO FONTS*/

@import url('https://fonts.googleapis.com/css2?family=Source+Code+Pro:wght@200&display=swap');

body {  
  font-family: 'Source Code Pro', monospace;
  margin: 0;
  background-color: #fff; /* Set a background color for the body */
  line-height: 1.6; /* Improve line height for better readability */
  color: #000;
  text-align: center;
  justify-content: center;
  /* img size is 50x50 */
  background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAIAAACRXR/mAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAIGNIUk0AAHolAACAgwAA+f8AAIDpAAB1MAAA6mAAADqYAAAXb5JfxUYAAABnSURBVHja7M5RDYAwDEXRDgmvEocnlrQS2SwUFST9uEfBGWs9c97nbGtDcquqiKhOImLs/UpuzVzWEi1atGjRokWLFi1atGjRokWLFi1atGjRokWLFi1af7Ukz8xWp8z8AAAA//8DAJ4LoEAAlL1nAAAAAElFTkSuQmCC") repeat 0 0;
  -webkit-animation: bg-scrolling-reverse 0.92s infinite;
  /* Safari 4+ */
  -moz-animation: bg-scrolling-reverse 0.92s infinite;
  /* Fx 5+ */
  -o-animation: bg-scrolling-reverse 0.92s infinite;
  /* Opera 12+ */
  animation: bg-scrolling-reverse 0.92s infinite;
  /* IE 10+ */
  -webkit-animation-timing-function: linear;
  -moz-animation-timing-function: linear;
  -o-animation-timing-function: linear;
  animation-timing-function: linear;
  display: flex;
  flex-direction: column; /*side by side and column makes it to the bottom (done for the footer)*/
  min-height: 100vh;
}

ul {
  list-style: none; /* Remove the default list-style */
  padding: 0; /* Remove any default padding */
}

body::before {
  font-size: 8rem;
  font-weight: 100;
  font-style: normal;
}

header {
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0) 100%);
  padding-top: 15px;
  color: #fff;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  width: 100%;
  z-index: 1;
  overflow: hidden;
  top: 0px;
}

/* PHOTO AT THE BEGINNING */
.photo {
  position: relative;
  width: 100%;
  max-width: 100%;
  height: auto;
  overflow: hidden;
}

.photo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-bottom: 3px solid #161616;
  color: white;
}

#profile-image {
  width: 20px;
  height: 120px;
  max-width: 100%;
  object-fit: contain;
  border-bottom: 3px solid #161616;
  color: white;
}

.feed-item {
  text-align: center;
  margin-top: 40px;
  margin-bottom: 40px;
  margin-right: 5%;
  margin-left: 5%;
}

.app-item-bord {
  width: 100%;
  max-width: 100%;
  height: auto;
  background-color: rgba(191, 191, 191, 0.5);
  object-fit: contain; /* Use 'contain' to ensure the entire image is within the container */
  border: 25px solid rgba(191, 191, 191, 0.5); /* Add a semi-transparent border to simulate glass */
  box-shadow: 0 0 50px rgba(0, 0, 0, 0.5); /* Add a semi-transparent blurred shadow */
  border-radius: 25px; /* Add border-radius for rounded corners to the image */
  box-sizing: border-box; /*takes into consideration border*/
  text-align: center;
  margin-top: 40px;
  margin-bottom: 40px;
}

.content-item-bord {
  max-width: 1700px;
  margin: 40px auto 70px; /* Center the div horizontally and apply margin top and bottom */
  height: auto;
  background-color: rgba(191, 191, 191, 0.7);
  border: 25px solid rgba(191, 191, 191, 0.1);
  box-shadow: 0 0 50px rgba(0, 0, 0, 0.5);
  border-radius: 25px;
  box-sizing: border-box;
  text-align: center; /* Keep text-align center if you have text content inside */
  display: flex; /* Add flex display to the content-item-bord div */
}

.profile-image {
  max-width: 100px; /* Set the maximum width for the image */
  height: auto; /* Maintain aspect ratio */
  border-radius: 25px 0 0 25px; /* Rounded corners only on the left side */
}

.content-text {
  flex: 1; /* Allow the content-text to take remaining space */
  padding: 20px; /* Add padding for spacing between the image and text */
}

.text-item-bord {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  max-width: 100%;
  height: auto;
  background-color: rgba(191, 191, 191, 0.6);
  object-fit: contain; /* Use 'contain' to ensure the entire image is within the container */
  border: 25px solid rgba(191, 191, 191, 0.1); /* Add a semi-transparent border to simulate glass */
  box-shadow: 0 0 50px rgba(0, 0, 0, 0.5); /* Add a semi-transparent blurred shadow */
  border-radius: 25px; /* Add border-radius for rounded corners to the image */
  box-sizing: border-box; /*takes into consideration border*/
  text-align: center;
}

.feed-item img {
  width: 100%;
  max-width: 700px;
  height: auto;
  object-fit: contain; /* Use 'contain' to ensure the entire image is within the container */
  background-color: rgba(191, 191, 191, 0.5);
  border: 25px solid rgba(191, 191, 191, 0.5); /* Add a semi-transparent border to simulate glass */
  box-shadow: 0 0 50px rgba(0, 0, 0, 0.5); /* Add a semi-transparent blurred shadow */
  border-radius: 25px; /* Add border-radius for rounded corners to the image */
  box-sizing: border-box; /*takes into consideration border*/
}

.feed-item video {
  width: 100%;
  max-width: 700px;
  height: auto;
  object-fit: contain; /* Use 'contain' to ensure the entire image is within the container */
  display: block;
  margin: 0 auto;
  background-color: rgba(191, 191, 191, 0.5);
  border: 25px solid rgba(191, 191, 191, 0.5); /* Add a semi-transparent border to simulate glass */
  box-shadow: 0 0 50px rgba(0, 0, 0, 0.5); /* Add a semi-transparent blurred shadow */
  border-radius: 25px; /* Add border-radius for rounded corners to the image */
  box-sizing: border-box; /*takes into consideration border*/
}

.photo img {
  position: relative;
}
.photo img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.menu-trigger {
    cursor: pointer;
    color: #fff;
    font-size: 24px;
  }

.menu {
    display: block; /* Set initial display to block */
    background-color: transparent;
    padding: 14px;
    margin: 0;
    transition: opacity 0.3s ease, max-height 0.3s ease;
    max-height: 0;
    overflow: hidden;
    position: absolute;
    z-index: 1;
    left: 50%;
    top: 5;
    transform: translateX(-50%);
    opacity: 0;
}

.menu a {
  text-decoration: none;
  background: linear-gradient(to right,#0F2538, #4c864b, rgb(60, 225, 225),#fff);
  background-size: 200% 200%;
  animation: rainbow 2s ease-in-out infinite;
  background-clip: text;
  -webkit-background-clip:text;
  color: #fff;
  font-weight: bold;
  font-size: 30px; /* Set the initial font size */
  transition: font-size 0.3s ease; /* Add a smooth transition effect for font size */
}

.menu a:hover {
  color: rgba(0,0,0,0);
  transform: scale(1.1);
  font-size: 36px; /* Increase the font size on hover */
}

.menu.active {
    max-height: 200px;
    opacity: 1;
    
}

.menu ul {
    list-style: none; /* Remove default list styling */
    padding: 0; /* Remove default padding */
    margin: 0; /* Remove default margin to align items properly */
    text-align: center; /* Center the items */
}

.menu li {
    margin: 15px 0;
    font-size: 24px;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 1.0s ease, transform 1.0s ease;
    display: inline-block;
    margin-right: 36px; /* Adjust the delay and spacing for the second li */
    transition-delay: 0.2s; /* Delay the transition for the second li */
}

.menu.active li {
    opacity: 1;
    transform: translateY(0);
    margin-right: 40px; /* Initial spacing */
    transition: opacity 1.0s ease, transform 1.0s ease, margin-right 1.0s ease; /* Add transition for margin-right */
    display: inline-block;
    transition-delay: 0.2s; /* Delay the transition for the second li */
}

.menu-trigger.active {
    font-weight: bold;
}

.buttonmenu {
  margin-top: 20px;
  margin-bottom: 120px;
}

.container a {
    color: #000; /* Set the color to black */
    display: inline-block; /* Display links as inline-block elements */
    padding: 10px 20px; /* Add padding to create a button-like appearance */
    background-color: #fff; /* Set the background color */
    border: 2px solid #000; /* Add a border */
    margin-bottom: 10px; /* Add margin between buttons */
    text-align: center; /* Center text within the button */
    font-size: 18px; /* Set the font size */
    text-transform: uppercase; /* Convert text to uppercase */
    transition: all 0.5s ease; /* Add a smooth transition effect */
}

.container a:hover {
    background-color: #000; /* Change background color on hover */
    color: #fff; /* Change text color on hover */
}

  .title-overlay {
    width: 100%;
  }
  .gradient-text{
    font-weight: bold;
    position: absolute;
    transition: all .5s ease;
    background: linear-gradient(to right, #0F2538, #4c864b, rgb(60, 225, 225), #fff);
    background-size: 200% 200%;
    animation: rainbow 2s ease-in-out infinite;
    background-clip: text;
    -webkit-background-clip:text;
    color: #fff;
    font-size: 70pt;
    width: auto;
    top: 60%;
    left: 5%;
  }
  
  .gradient-text:hover{
    color:rgba(0,0,0,0);
  }
  
  .gradient-text2 {
    display: none;
    font-weight: bold;
    justify-content: center;
    text-align: center;
    position: relative;
    transition: all .5s ease;
    background: linear-gradient(to right, #0F2538, #4c864b, rgb(60, 225, 225), #fff);
    background-size: 200% 200%;
    animation: rainbow 2s ease-in-out infinite;
    background-clip: text;
    -webkit-background-clip:text;
    color:rgba(0,0,0,0);
    font-size: 18pt;
    width: auto;
    top: 60%;
  }

/*MENU HAMBURGER ICON*/
  
  #nav-icon1 {
    width: 60px;
    height: 45px;
    position: relative;
    margin: 50px auto;
    left: 0;
    -webkit-transition: .5s ease-in-out;
    -moz-transition: .5s ease-in-out;
    -o-transition: .5s ease-in-out;
    transition: .5s ease-in-out;
    cursor: pointer;
}
#nav-icon1:hover {
  transform: scale(1.2);
}

#nav-icon1.open {
    width: 75px; /* Adjust to match the icon size */
    height: 45px; /* Adjust to match the icon size */
    left: calc(50% - 100px); /* Adjust the value accordingly */
}

#nav-icon1:hover span {
  background: linear-gradient(to left, #0F2538, #4c864b, rgb(60, 225, 225)); /* Change the color to white on hover */
  transition: all .5s ease;
  background-size: 200% 200%;
  animation: rainbow 2s ease-in-out infinite;
}
  
#nav-icon1 span {
    display: block;
    position: absolute;
    height: 9px;
    width: 100%;
    background: #fff;
    border-radius: 9px;
    opacity: 1;
    left: 0;
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-transition: .25s ease-in-out;
    -moz-transition: .25s ease-in-out;
    -o-transition: .25s ease-in-out;
    transition: .25s ease-in-out;
}

#nav-icon1 span:nth-child(1) {
    top: 0px;
  }
  
  #nav-icon1 span:nth-child(2),
  #nav-icon1 span:nth-child(3) {
    top: 18px;
  }
  
  #nav-icon1 span:nth-child(4) {
    top: 36px;
  }
  
  #nav-icon1.open span:nth-child(1) {
    top: 18px;
    width: 0%;
    left: 50%;
  }
  
  #nav-icon1.open span:nth-child(2) {
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
  }
  
  #nav-icon1.open span:nth-child(3) {
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
  }
  
  #nav-icon1.open span:nth-child(4) {
    top: 18px;
    width: 0%;
    left: 50%;
  }

  /*WINDOW UNDERNEATH THE CHEERPJ*/
  #display {
    background-color: black; /* Set a contrasting background color */
    justify-content: center;
    align-items: center;
    width: 800px;
    height: 800px;
    /* Add other necessary styles */
}
  #appcontent {
    align-items: center;
    justify-content: center;
  }
  #appbody {
    align-items: center;
    justify-content: center;
  }

  #backButton {
    background-color: transparent; /* Set the background color to transparent */
    color: #000; /* Set the text color to black */
    padding: 10px 20px; /* Add padding to create a button-like appearance */
    border: 2px solid #000; /* Add a border */
    text-align: center; /* Center text within the button */
    font-size: 18px; /* Set the font size */
    text-transform: uppercase; /* Convert text to uppercase */
    margin-right: 4%;
    border-radius: 20px; /* Set border-radius for rounded corners */
    position: relative; /* Make position relative to allow absolute positioning of pseudo-element */
    overflow: hidden; /* Hide overflow to prevent shadow from overflowing */
    margin: 10px;

    /* Add shadow effect */
    transition: all 0.3s ease; /* Add a smooth transition effect */
    box-shadow: 0 0 0 rgba(0, 0, 0, 0); /* Initial shadow */
}

#backButton:hover {
    box-shadow: 0 0 50px rgba(0, 0, 0, 0.5); /* Add a semi-transparent blurred shadow */
    transform: scale(1.2); /* Scale the button by 10% when hovered over */

}

/*when the screen is resized*/
@media (max-width: 1500px) {
  #nav-icon1 {
      width: 60px; /* Adjust the width for smaller screens */
      height: 60px; /* Adjust the height for smaller screens */
      /* ... other styles ... */
  }

  .menu a{
      font-size: 20px; /* Adjust the font size for smaller screens */
      /* ... other styles ... */
  }
  .menu a:hover {
    transform: scale(1.1);
    font-size: 25px; /* Increase the font size on hover */
  }

  #nav-icon1.open {
    width: 60px; /* Adjust to match the icon size */  
    left: calc(50% - 100px); /* Adjust the value accordingly */
}

.gradient-text {
  top: 60%;
  left: 5%;
  font-size: 50pt;
}
}

@media (max-width: 930px) {

  .title-overlay {
    display: none;
  }
  
  .gradient-text2 {
    display: block;
  }
}

@media (max-width: 700px) {

  .title-overlay {
    display: none;
  }

  .gradient-text2 {
    display: block;
    font-size: 12pt;
  }

  .menu {
    top: 17%;
    left: 35%;
  }

  .menu li {
    box-sizing: border-box;
    padding: 5px;
    margin: 0px
  }

  .menu.active li {
    margin-right: 0px; /* Initial spacing */
}

}


/*text gradient animated*/
@keyframes rainbow { 
  0%{background-position:left}
  50%{background-position:right}
  100%{background-position:left}
}

/*BACKGROUND TILES*/
@import url(https://fonts.googleapis.com/css?family=Exo:100);
/* Background data (Original source: https://subtlepatterns.com/grid-me/) */
/* Animations */
@-webkit-keyframes bg-scrolling-reverse {
  100% {
    background-position: 50px 50px;
  }
}
@-moz-keyframes bg-scrolling-reverse {
  100% {
    background-position: 50px 50px;
  }
}
@-o-keyframes bg-scrolling-reverse {
  100% {
    background-position: 50px 50px;
  }
}
@keyframes bg-scrolling-reverse {
  100% {
    background-position: 50px 50px;
  }
}
@-webkit-keyframes bg-scrolling {
  0% {
    background-position: 50px 50px;
  }
}
@-moz-keyframes bg-scrolling {
  0% {
    background-position: 50px 50px;
  }
}
@-o-keyframes bg-scrolling {
  0% {
    background-position: 50px 50px;
  }
}
@keyframes bg-scrolling {
  0% {
    background-position: 50px 50px;
  }
}
/*footer*/

.footer {
  position: relative;
  width: auto;
  background: #0F2538;
  min-height: 100px;
  padding: 20px 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  margin-top: auto; /*stick to the bottom of the screen */
}

.social-icon {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 10px 0;
  flex-wrap: wrap;
}

.social-icon__item {
  list-style: none;
}

.social-icon__link {
  font-size: 2rem;
  color: #fff;
  margin: 0 10px;
  display: inline-block;
  transition: 0.5s;
}
.social-icon__link:hover {
  transform: translateY(-10px);
}

.footer p {
  color: #fff;
  margin: 15px 0 10px 0;
  font-size: 1rem;
  font-weight: 300;
}

.wave {
  position: absolute;
  top: -100px;
  left: 0;
  width: 100%;
  height: 100px;
  background: url("images/wavesfooterbg.png");
  background-size: 1000px 100px;
}

.wave#wave1 {
  z-index: 1000;
  opacity: 1;
  bottom: 0;
  animation: animateWaves 4s linear infinite;
}

.wave#wave2 {
  z-index: 999;
  opacity: 0.5;
  bottom: 10px;
  animation: animate 4s linear infinite !important;
}

.wave#wave3 {
  z-index: 1000;
  opacity: 0.2;
  bottom: 15px;
  animation: animateWaves 3s linear infinite;
}

.wave#wave4 {
  z-index: 999;
  opacity: 0.7;
  bottom: 20px;
  animation: animate 3s linear infinite;
}

@keyframes animateWaves {
  0% {
    background-position-x: 1000px;
  }
  100% {
    background-positon-x: 0px;
  }
}

@keyframes animate {
  0% {
    background-position-x: -1000px;
  }
  100% {
    background-positon-x: 0px;
  }
}

.last-item {
  margin-bottom: 110px;
}

@media only screen and (min-width: 1300px) {
  .content-item-bord {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    text-align: left; /* Align text to the left when the screen is wider */
  }
}

@media only screen and (max-width: 1300px) {
  .content-item-bord {
    flex-direction: column-reverse;
    text-align: center; /* Center text when the screen is smaller */
  }
  .content-text {
    flex: 1; /* Allow the content-text to take remaining space */
    padding: 20px; /* Add padding for spacing between the image and text */
  }
  .content-item-bord {
  align-items: center;
  }
}

@media only screen and (max-width: 700px) {
  .content-text {
    flex: 1; /* Allow the content-text to take remaining space */
    padding: 20px; /* Add padding for spacing between the image and text */
    font-size: 10px;
  }
}

.scroll-to-top {
  position: fixed;
  top: 25%;
  right: 40%;
  z-index: 9999;
  display: none; /* Initially hidden */
  cursor: pointer;
  transition: opacity 0.5s ease; /* Apply smooth transition for opacity changes */
  animation: moveUpDown 0.8s infinite alternate;
}

.scroll-to-top span {
  font-size: 100px;
  color: rgb(76, 197, 227);
  animation: flash 0.4s infinite alternate; /* Apply vertical oscillation and flashing animations */
}

@keyframes moveUpDown {
  0% {
    transform: translateY(-20px); /* Move up */
  }
  100% {
    transform: translateY(20px); /* Move down */
  }
}

@keyframes flash {
  from {
      opacity: 1;
  }
  to {
      opacity: 0;
  }
}

@media (min-width: 1800px) {
  .scroll-to-top {
    position: fixed;
    top: 40%;
    right: 41%;
    z-index: 9999;
    display: none; /* Initially hidden */
    cursor: pointer;
  }

.scroll-to-top span {
  font-size: 150px;
  color: rgb(76, 197, 227);
  animation: flash 1s infinite alternate; /* Apply flashing animation */
}
}
@media (min-width: 2600px) {
  .scroll-to-top {
    position: fixed;
    top: 45%;
    right: 48%;
    z-index: 9999;
    display: none; /* Initially hidden */
    cursor: pointer;
  }

.scroll-to-top span {
  font-size: 250px;
  color: rgb(76, 197, 227);
  animation: flash 1s infinite alternate; /* Apply flashing animation */
}
}
@media (min-width: 3150px) {
  .scroll-to-top {
    position: fixed;
    top: 70%;
    right: 48%;
    z-index: 9999;
    display: none; /* Initially hidden */
    cursor: pointer;
  }

.scroll-to-top span {
  font-size: 250px;
  color: rgb(76, 197, 227);
  animation: flash 1s infinite alternate; /* Apply flashing animation */

  
}
}