@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@300&family=Tilt+Neon&display=swap');
@import url("https://fonts.googleapis.com/css2?family=Finger+Paint&display=swap");
  :root{
    --alephBlack: #0D1722;
    --alephBlue: #146580;
    --alephYellow: #F9C80E;
    --alephPink: #C94277;
    --alephGreen: #B0BBB0;
    --alephLavendar: #DCD3DE;
  }

  header{
    text-align: center;
    background-color: white;
    color: var(--alephBlack);
    font-size: 34px;
    padding: 2px;
  }

  .tagline{
    color: var(--alephBlue);
  }

  body{
    background-color: white;
    font-family: "Josefin Sans", "Monaco", "Lucida Console", "Courier New";
  }

  footer{
    position: relative;
    width: 100%;
    height: 100px;
    bottom: 0;
    text-align: center;
    color: alephBlack;
    font-size: 16px;
    font-family: "Josefin Sans", "Monaco", "Lucida Console", "Courier New";
    padding: 5px;
  }

  .container {
    height: 200px;
    position: relative;
    border: 1px solid alephBlack;
    background-color: var(--alephBlue);
  }

  .vertical-center {
    position: relative;
    margin: 24px 24px 24px 24px;
    top:50%;
    left:50%;
    transform: translate(-51%, +7.5%);
  }

  .thumbnail {
    background-position: center center;
    background-size: cover;
    width: 25%;
    height: fit-content;
    position: relative;
    display: inline-block;
    background-repeat: no-repeat;
    padding: 5px;
  }
  .overlay {
    display: flex;
    position: absolute;
    top: 50%; 
    left: 50%; 
    transform: translate(-54%, -50%);
    background-color: rgba(255, 255, 255, 0.8);
    background-clip: content-box;
    height: 100.5%;
    width: 100.5%;
    opacity: 0;
    transition: 0.66s;
    font-size: 36px;
    margin-left: 4%;
    margin-right: 4%;
    align-items: center;
    justify-content: center;
  }
  .overlay:hover {
    opacity: 1;
  }
  .blur-box {
    position: absolute;
    width: calc(100% - 10px);
    height: calc(100% - 9px);
    transform: translate(0%, -99.85%);
    padding: -5px;
    box-shadow: 0 0 5px 5px alephBlack inset;
  }

  .button1 {
    height: 32px;
    color: alephBlack;
    font-family: "Josefin Sans", "Monaco", "Lucida Console", "Courier New";
    font-size: 24px;
    padding: 10px 0px 0px 0px;
    text-align: center;
    vertical-align: middle;
    transition: ease-out 0.5s;
  }

.button1:hover {
    color: var(--alephYellow);
    cursor: pointer;
    transform: scale(1.25);
    font-family: "Finger Paint";
    font-size: 18px;
    padding: 0px 0px, 0px, 0px;
}

.button1:before {
    transition: .5s all ease;
    position: absolute;
    top: 5%;
    left: 50%;
    right: 50%;
    bottom: 5%;
    opacity: 0;
    content: "";
    background-color: var(--alephBlack);
    border-radius: 100px 100px 100px 100px;
}

.button1:hover:before {
    transition: .5s all ease;
    position: absolute;
    left: -50px;
    right: -50px;
    opacity: 1;
    z-index: -1;
    border-radius: 0px 0px 0px 0px;
}

.small-button {
    height: 32px;
    color: var(--alephBlue);
    font-family: "Josefin Sans", "Monaco", "Lucida Console", "Courier New";
    font-size: 18px;
    padding: 1px;
    text-align: center;
    vertical-align: middle;
    transition: ease-out 0.5s;
  }

.small-button:hover {
    color: var(--alephBlue);
    padding: 1px;
    cursor: pointer;
    transform: scale(1.1);
}

.slide-container {
    position: relative;
    height: 256px;
    width: 455px;
    margin-left: auto;
    margin-right: auto;
}

.mySlides {
    display: none;
    animation: fadeIn 1s;
}

@keyframes fadeIn {
    0% { opacity: 0.33; }
    100% { opacity: 1; }
  }

.prev,
.next {
    cursor: pointer;
    position: absolute;
    top: 0%;
    height: 50%;
    width: auto;
    color: alephBlack;
    font-weight: lighter;
    font-size: 30px;
    border-radius: 0 3px 3px 0;
    user-select: none;
    -webkit-user-select: none;
    text-align: center;
    transition: ease-in-out .2s;
    padding: 25% 1% 1.45% 1%;
    display: table-cell;
    vertical-align: center;
}

.prev {
    left: -5%;
    border-radius: 5px 0px 0px 5px
}

.next {
    right: -5%;
    border-radius: 0px 5px 5px 0px;
}

.prev:hover{
    left: -6%;
    background-color: var(--alephBlue);
    padding: 25% 2% 1.45% 1%;
}
.next:hover {
    right: -6%;
    background-color: var(--alephBlue);
    padding: 25% 1% 1.45% 2%;
}

hs{
    cursor: default;
    color: alephBlack;
    font-family: "Josefin Sans", "Monaco", "Lucida Console", "Courier New";
    font-size: 20px;
    text-align: center;
}

  h1{
    cursor: default;
    color: alephBlack;
    font-family: "Josefin Sans", "Monaco", "Lucida Console", "Courier New";
    font-size: 34px;
  }

  h2{
    cursor: default;
    color: var(--alephBlue);
    font-family: "Josefin Sans", "Monaco", "Lucida Console", "Courier New";
    font-size: 28px;
  }

  p{
    margin-left: 12.5%;
    margin-right: 12.5%;
    cursor: default;
    color: alephBlack;
    font-size: 16px;
    font-family: "Josefin Sans", "Monaco", "Lucida Console", "Courier New";
  }

.p-blue,
.p-blue2,
.p-blue3,
.p-pink,
.p-pink2,
.p-pink3{
    cursor: default;
    color: hsla(0, 0%, 100%, 0.2);
    font-size: 16px;
    font-family: "Josefin Sans", "Monaco", "Lucida Console", "Courier New";
    transition: ease-in-out .66s;
}

.p-blue,
.p-blue2,
.p-blue3{
    margin-left: -50px; 
    margin-right: 17.5%;
    padding: 25px 5% 25px 25%;
    background-color: hsla(189, 100%, 27%, 0.25);
}
  .p-blue{
    border-radius: 0px 133px 0px 0px;
  }

  .p-blue2{
    border-radius: 0px 100px 100px 0px;
  }

  .p-blue3{
    border-radius: 0px 0px 90px 0px;
  }

  .p-blue:hover,
  .p-blue2:hover,
  .p-blue3:hover{
    background-color: var(--alephBlue);
    border-radius: 0px 15px 15px 0px;
    color: white;
    transform-origin: left;
    transform: scale(1.1);
  }

.p-pink,
.p-pink2,
.p-pink3{
    margin-left: 17.5%; 
    margin-right: -50px;
    padding: 25px 25% 25px 5%;
    background-color: hsla(337, 95%, 75%, 0.25);
}
  .p-pink{
    border-radius: 0px 0px 0px 200px;
  }

  .p-pink2{
    border-radius: 100px 0% 0% 100px;
  }

  .p-pink3{
    border-radius: 60px 0% 0% 0%;
  }

  .p-pink:hover,
  .p-pink2:hover,
  .p-pink3:hover{
    background-color: var(--alephPink);
    border-radius: 15px 0px 0px 15px;
    color: white;
    transform-origin: right;
    transform: scale(1.1);
  }

  ul{
    color: alephBlack;
    font-size: 16px;
    font-family: "Monaco", "Lucida Console", "Courier New";
    margin: 12px 48px 12px 48px;
  }
  table{
    color: alephBlack;
    width: 80%;
    border-collapse: collapse;
  }
  tr{
    color: alephBlack;
    font-size: 14px;
    font-family: "Monaco", "Lucida Console", "Courier New";
    margin: 24px 48px 24px 48px;
    height: 32px;
  }
  td{
    border: 1px solid;
    border-collapse: collapse;
    color: alephBlack;
    font-size: 12px;
    font-family: "Monaco", "Lucida Console", "Courier New";
    margin: 12px 48px 12px 48px;
    text-align: center;
    padding: 18px;
  }
  
  a{
    color: var(--alephBlue);
    font-size: 24px;
    font-family: "Josefin Sans", "Monaco", "Lucida Console", "Courier New";
  }

  #background_image {
    background-image:
    linear-gradient(to bottom, rgba(0, 0, 0, 0), alephBlack),
    url('GameDevelopment/gd_assets/pink_turtle.png');
    background-position: center;
    width: 100%;
    background-size: cover;
    color: alephBlack;
    align-items: center;
}