/* fonts */
@font-face {
  font-family: 'nihonium';
  src: local('assets/fonts/Nihonium113.ttf') format('ttf');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "kirupaPixel";
  src: url('/fonts/born2bsportyv2-webfont.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

.accordion-button {
  font-size: 2rem;
}

.content-title {
  font-size: 2.4rem;
}

.content-text {
  /*font-size: 1.25rem;*/
  font-size: 20px;
  font-weight: 100;
}

body {
  margin: 0;
  overflow: hidden;
}

div::-webkit-scrollbar {
  width: 5px;
}

div::-webkit-scrollbar-thumb {
  background-color: rgb(6, 39, 3);
  border-radius: 5px;
  opacity: 0.2;
}

div::-webkit-scrollbar-track {
  background-color: transparent;
}

.webgl {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  outline: none;
  overflow: hidden;
}

.carousel-inner {
  position: relative;
  width: 75%;
  overflow: hidden;
  margin: 0 auto;
}

.carousel-control-prev-icon, .carousel-control-next-icon {
  background-color: rgb(6, 39, 3);
}

.about-body {
  top: 5%;
  position: relative;
}

.about-details {
  font-family: "Verdana";
  position: relative;
  min-width: 200px;
  width: 75%;
  margin: 0 auto;
}

.sl {
  color: rgb(6, 39, 3);
}

.sl.li:hover {
  color: rgb(0, 100, 131);
}

.sl.fb:hover {
  color: rgb(0, 26, 255);
}

.sl.ig:hover {
  color: rgb(255, 0, 64);
}

.sl.gh:hover {
  color: rgb(10, 121, 0);
}

.resume-container {
  max-height: 100%;
  overflow: auto;
}

.resume-text {
  font-family: "Verdana";
  font-size: 0.9rem; 
}

#footer {
  top: 98.5% !important;
}

#canvasarea {
  overflow: hidden;
}

.movingPanel {
  background: transparent;
  color: #011601;
  font-family: "Jersey 15", 'nihonium113-regular', 'Helvetica Neue', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif, serif;
  font-weight: 400;
  font-style: normal;
  scrollbar-width: thin;
  scrollbar-color: transparent;
}

#resume, #about, #downloads, #projects {
  position: absolute;
  opacity: 0;
  display: none;
}

#homeMenu {
  display: none;
  position: absolute;
  opacity: 100;
  z-index: -1;
}

@keyframes opacityWeave {
  0% { opacity: 1;}
  50% { opacity: 0.10;}
  100% { opacity: 1;}
}

.home-card {
  opacity: 0;
  background-color: transparent;
  color: rgb(165, 226, 136);
  height: auto;
  margin: 0px auto;
  font-family: "Verdana";
  font-size: 0.8rem;
  position: relative;
}

.card, .card-body, .accordion-collapse {
  background-color: rgb(165, 226, 136);
}

.accordion {
  --bs-accordion-border-color: rgb(21, 44, 10);
  --bs-accordion-active-color: rgb(245, 255, 241);
  --bs-accordion-active-bg: rgb(21, 44, 10);
  --bs-accordion-btn-color: rgb(21, 44, 10);
  --bs-accordion-bg: rgb(230, 252, 212);
}

/* Orientation settings */
@media screen and (orientation: landscape) {
  #homeMenu, #resume, #about, #downloads {
    width: 720px;
    height: 90%;
    
  }
  #projects {
    width: 1024px;
    height: 75%;
    margin: -2% auto 0;
  }

  .home-card {
    padding: 0.5rem;
    width: 80%;
    top: 20%;
    left: 6%;
  }

  .about-details {
    font-size: 0.8rem;
    padding: 0 1rem;
  }
}

@media screen and (orientation: portrait) {
  #homeMenu, #resume, #about, #downloads, #projects{
    width: 80%;
    height: 640px;
    top: 0%;
    margin: -20% auto;
  }
  
  .home-card {
    padding: 0.1rem;
    font-size: 0.7rem;
    width: 100%;
    top: 30%;
    left: 3%;
  }

  .about-details {
    font-size: 0.7rem;
    padding: 0 0.75rem;
  }

  .download-details, .project-intro {
    font-family: "Verdana";
    font-size: 0.8rem;
  }
}

/* Grid Item for div intros or outros*/
.gridflash-container {
  display: grid;
  flex-wrap: wrap;
  gap: 0px;
  justify-items: center;
}

.gridflash-part {
  background-color: rgb(255, 0, 0);
}

.bg_downloads {
  opacity: 0.5;
  position: absolute;
  width: 80%;
  height: 80%;
  box-sizing: content-box;
  pointer-events: none;
}

.bg_downloads_img {
  width: auto;
  height: 100%;
  left: 83%;
  position: relative;
}

@media screen and (max-width: 850px) {
  .bg_downloads_img {
    left: 72%;
    height: 40%;
  }
}

/* project tabs expand info */
.project_tab_hidden {
  display: none;
}

.project_placeholder {
  min-height: 52vh;
  height: 100vw;
  opacity: 0;
}

.project_subject {
  max-height: 500px;
  overflow-y: auto;
  box-sizing: content-box;
}

.project_details {
  max-height: 400px;
  padding: 0 10px 0 0;
  margin: 0 0 10px;
  font-family: "Verdana";
  font-size: 0.9rem;
}

/* Add media queries for different screen sizes */
@media screen and (max-width: 768px) {
  .project_details {
    font-size: 0.8rem;
  }
}

@media screen and (max-width: 480px) {
  .project_details {
    font-size: 0.75rem;
  }
}

/* buttons */
.bt_expand_down {
  width: 60px;
  height: 60px;
  right: 0%;
  top: 0%;
  margin: 10px;
  position: absolute;
  background-image: url("/assets/css/buttons/expand_down.png");
  background-size: 100%;
  background-repeat: no-repeat;
  background-origin: content-box;
}

.bt_expand_down:hover {
  background-image: url("/assets/css/buttons/expand_down_hover.png");
  background-size: 100%;
  background-repeat: no-repeat;
  background-origin: content-box;
}

.bt_expand_down:active {
  background-image: url("/assets/css/buttons/expand_down_clicked.png");
  background-size: 100%;
  background-repeat: no-repeat;
  background-origin: content-box;
}