/* width */
::-webkit-scrollbar {
    width: .6vw;
  }
  
  /* Track */
  ::-webkit-scrollbar-track {
    background: #f1f1f1;
  }
  
  /* Handle */
  ::-webkit-scrollbar-thumb {
    background: #888;
  }
  
  /* Handle on hover */
  ::-webkit-scrollbar-thumb:hover {
    background: #555;
  }


html{
    scroll-behavior: smooth;
}

body{
  background: url(../assets/svg/background.svg);
  background-size: 100%;
  background-repeat: no-repeat repeat;
  overflow-x: hidden;
}

.myPhoto{
    border-radius: 50%;
    border: 6px solid lightgray;
    box-shadow: 0 0 103px 7px rgb(0, 0, 0, .3);
    transition: 5s;
    transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
    transition-delay: .4s;
}

.myPhoto:hover{
  box-shadow: 0 0 103px 12px rgb(0, 0, 0, .8);
}

.page{
    height: 100vh;
}

.card-body {
  min-height: 300px;
  min-width: 300px;
  margin-right: 5px;
}

.next-toggle, .prev-toggle{
  position: absolute;
  width: 1vw;
  height: 1vh;
  top: 0;
  left: 0;
}

.arrow{
  background-color: transparent;
  width: 3vw;
  aspect-ratio: 1;
  border-bottom: none;
  border-left: none;
}

.arrow-left{
  transform: rotate(180deg);
}

.arrow-right{
  transform: rotate(45deg);
}

.myDiv{
  position: absolute;
  top: 0;
  left: 0;
  height: 20px;
  width: 20px;
}

#signature{
  stroke-dasharray: 972;
  stroke-dashoffset: 972;
  animation: sign 10s infinite;
  animation-timing-function: cubic-bezier(.13,.53,.45,.85);
  animation-delay: 1s;
  animation-fill-mode: forwards;
}

@keyframes sign {
  0%{
    stroke-dashoffset: 972;
  }
  50%{
    stroke-dashoffset: 0;
  }
  100%{
    stroke-dashoffset: 972;
  }
}

.hover-animation:hover{
  color: whitesmoke;
  background-color: rgb(14, 118, 168, .7);
  transition: .2s ease-in-out;
}

.gamejam-screen{
  background: linear-gradient(167deg, rgba(1,0,36,1) 0%, rgba(121,9,111,1) 49%, rgba(98,0,255,1) 100%);
  transition: 1s ease-out;  
}

.gamejam-screen:hover{
  color: black;
  background: linear-gradient(167deg, rgba(33,36,0,1) 0%, rgba(121,24,9,1) 36%, rgba(255,205,0,1) 100%);
}

.gamejam-page{
  background: linear-gradient(167deg, rgba(1,0,36,1) 0%, rgba(121,9,111,1) 49%, rgba(98,0,255,1) 100%);
  position: absolute;
  top: 8vh;
  left: 100vw;
  height: 92vh;
  width: 100vw;
  transition: .5s ease-in-out;
}

.gamejam-page.isActive{
  transform: translateX(-100vw);
  transition-timing-function: ease-in-out;
}

.portfolio{
  transform: translateX(-100vw);
  transition: .5s ease-in-out;
}

.portfolio.isActive{
  transform: translateX(0);
  transition-timing-function: ease-in-out;
}

.navbar{
  width: 100vw;
}

.game-icon{
  background-color: rgb(245, 245, 245, .4);
  border-radius: 5px;
  backdrop-filter: blur(20px);
  height: 70px;
  transition: .2s ease-in-out;
  aspect-ratio: 1;
}

.game-icon:hover{
  background-color: whitesmoke;
}



.sign-in-screen{
  opacity: 1;
  box-shadow: 0 0 53px 13px rgb(0, 0, 0, .4);
  transition: .2s ease-in-out;
}

.sign-in-screen:hover{
  box-shadow: 0 0 83px 37px rgb(0, 0, 0, .4);
}

.sign-in-screen.fade{
  opacity: 0;
}



.flip-picture {
  background-color: transparent;
  height: 61%;
  width: 100%;
  perspective: 1000px;
}

.flip-picture-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.8s;
  transition-delay: .6s;
  transform-style: preserve-3d;
}

.flip-picture:hover .flip-carpictured-inner {
  transform: rotateX(180deg);
}

.flip-picture-front, .flip-picture-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden; 
  backface-visibility: hidden;
}

.flip-picture-front {
  background-color: transparent;
  color: black;
}

.flip-picture-back {
  background-color: whitesmoke;
  transform: rotateX(180deg);
}

.warning-message-container{
  position: relative;
  opacity: 0;
  visibility: hidden;
  height: 0;
  transition: .2s ease-in-out;
}

.warning-message-container.isVisible{
  opacity: 1;
  height: 60px;
  visibility: visible;
  margin-top: 0px;
}


.textarea-container.isVisible{
  opacity: 1;
  visibility: visible;
}

.textarea-container{
  opacity: 0;
  visibility: hidden;
  transition: .4s ease-in-out;
}

.textarea-send-success{
  opacity: 0;
  visibility: hidden;
  transition: .4s ease-in-out;
}

.textarea-send-success.isVisible{
  opacity: 1;
  visibility: visible;
}

.recaptcha-col{
  background-color: whitesmoke;
  transition: .2s ease-in-out;
}

.recaptcha-col.isRed{
  background-color: rgb(157, 23, 23);
}