:root {
  --vh: 1vh;
  --bgColor:#e6e1e1;
}

body {
    
  background: radial-gradient(circle, rgba(48, 41, 84, 1) 0%, rgba(51, 61, 178, 1) 100%);
  margin: 0;
  padding: 0;
      display: flex; /* Makes the body a flex container */
    justify-content: center; /* Centers horizontally along the main axis */
    align-items: center; /* Centers vertically along the cross axis */
   animation: gradientShift 4s ease-in-out infinite alternate;
  overflow: none;
}

@keyframes gradientShift {
  from{
    background: rgb(41, 34, 104);
  }
  to{
    background: rgb(99, 76, 125);
  }
}

html, body {
  height: 100vh;
  
}

.Card {

   position:fixed;
    width:25rem;
  color:rgb(0, 0, 0);
  
  font-family: 'tarotheque';
  
  height:90%;
  display: flex;           /* Add flexbox */
  align-items: center;   /* Align to bottom */
  
  flex-direction: column-reverse; /* Stack from bottom to top */
  justify-content: flex-start;    /* Start from bottom */
  padding:3rem;
  background-color: var(--bgColor);
  border-style: solid;
  border-width: 5px;
  border-radius: 30px;

  padding-bottom:2rem;

  margin-bottom: 5%;
  margin-top: 5%;

}

@keyframes boil {
  0%, 20%, 40%, 60%, 80%, 100% { transform: scale(1); }
  10% { transform: scale(0.99); }
  30% { transform: scale(0.988); }
  50% { transform: scale(0.996); }
  70% { transform: scale(0.997); }
  90% { transform: scale(0.985); }
}

.Card p{
    margin:0;
    padding-top:1rem;
    overflow: hidden;
}

.TitleBox{
    width:103%;
    background-color: var(--bgColor) !important;
    opacity:100% !important;
    display: inline-block;
    text-align: center;
    margin-bottom:-1rem;
    top:auto;
    padding-top:1rem;
    padding-bottom:1rem;
    border-style: solid;
    border-width: 6px;
    margin-top:0 !important;
    border-radius: 10px;

    font-size: 2.3rem;
    letter-spacing: 0.7rem;
    box-sizing: border-box;
}


.cardContent{
    height:100%;
    width:100%;
    display: flex;           /* Add flexbox */
  align-items: center;   /* Align to bottom */
  
  flex-direction: column-reverse; /* Stack from bottom to top */
  justify-content: flex-start;    /* Start from bottom */
    background:linear-gradient(180deg,rgba(0, 0, 0, 1) 0%, rgba(54, 55, 71, 1) 100%);;
    border-style: solid;
   border-width: 6px;
   border-radius: 10px;
  
 
   padding-bottom:0 !important;
}

.textBox{
    display:block !important;
    height:100%;
    width: 90%;
    margin:1rem;
    font-size: 1.7rem;
    letter-spacing: 0.2rem;
    text-align: left !important;
    color:azure;
    word-wrap: break-word;
    hyphens: auto;
    overflow-y:scroll;
    overflow-x: none;
}

.textBox::-webkit-scrollbar {
  display: none;
}


.TitleBlock img,
.bottomTitleBlock img {
  width: 100%;
  height: auto;
  display: block;
  
  opacity: 50%;
}

.overlayContainer{
  display:fit-content;
  position:relative;
  border-radius: 15px;
  overflow:hidden;
  height:38rem;
  
}

.overlayContainer:hover img{
  opacity:0.3;
  transition:.5s ease;
}

.overlayContainer:hover .overlayText{
  opacity:1;
  transition:.5s ease;
}

.overlayText{
  position:absolute;
  top:0;
  padding:10%;
  font-size:1rem;
  opacity:0;
  transition: opacity 0.5s ease-out;
}

.overlayContainer img{
  transition: opacity 0.5s ease-out;
}

@media screen and (max-width: 768px) {
  
  body{
    align-items:flex-start;
  }

  .Card {
    width: 100%;
    max-width: 60vw;
    letter-spacing: 0.4rem;
    max-height:80%;
    margin-top:5%;
    margin-bottom:10%;
  }
  
  .TitleBox {

    padding-top: 0.8rem;
    margin-top: 2rem;
    letter-spacing: 0.3rem;
  }
  
  .textBox {
    font-size:1.2rem;
    letter-spacing: 0.1rem;
    margin: 0.5rem;
    width: 90%;
  }
}