:root {
    --border: rgb(3, 169, 244);
    
    --g1: rgb(14, 146, 233);
    --g2: rgb(196, 8, 238);
    --g3: rgb(17, 6, 228);
}
  
body {
    background-color: rgb(10, 10, 10);
    display: grid;
    height: 100vh;
    margin: 0px;
    padding: 20px; /* Add padding to the body */
    place-items: center;
}
  
.card {
    
    border: 0.5vmin solid var(--border);
    cursor: pointer;
    position: relative;
    width: 1250px; /* Make the card slightly narrower than the screen */
    height: auto; /* Adjust height dynamically based on content */
    padding: 2rem; /* Add padding to all sides of the card */
    margin-top: 20px; /* Add margin to the top of the card */
    
}
  
.card:hover:before {
    background-position: 100% 100%;
    transform: scale(1.08, 1.03);
}
  
.card:hover > .card-content {
    background-position: -10% 0%;
}
  
.card:hover > .card-icon {
    color: white; 
}
  
.card:hover > .card-content > .card-subtitle > .card-subtitle-word {  
    opacity: 1;
    transform: translateY(0%);
    transition: opacity 0ms, transform 200ms cubic-bezier(.90, .06, .15, .90);
}
  
.card:before {
    background: linear-gradient(
        130deg, 
        transparent 0% 33%, 
        var(--g1) 66%, 
        var(--g2) 83.5%, 
        var(--g3) 100%
    );
    background-position: 0% 0%;
    background-size: 300% 300%;
    content: "";
    height: 100%;
    left: 0px;
    pointer-events: none;
    position: absolute;
    top: 0px;
    transition: background-position 350ms ease, transform 350ms ease;
    width: 100%;
    z-index: 1;
}
  
.card-content {
    
   
    background-image: radial-gradient(
        rgba(255, 255, 255, 0.2) 8%, 
        transparent 8%
    );
    background-position: 0% 0%;
    background-size: 5vmin 5vmin;
    padding: 5vmin;
    position: relative;
    transition: background-position 350ms ease;
    width: calc(100% - 10vmin);
    height: auto; /* Adjust height dynamically based on content */
    z-index: 2;
    
}
  
.card-title,
.card-subtitle {
    color: white;
    font-family: "Anek Latin", sans-serif;
    font-weight: 400;
    margin: 0px;
}
  
.card-title {
    font-size: 6vmin;
}
  
.card-subtitle {
    font-size: 3vmin;
    margin-top: 2vmin;
}
  
.card-subtitle-word {
    display: inline-block;
    margin: 0vmin 0.3vmin;
    opacity: 0;
    position: relative;  
    transform: translateY(40%);
    transition: none;
}
  
.card-icon {
    position: absolute;
    bottom: -5vmin;
    left: 50%;
    transform: translateX(-50%);
    font-size: 10vmin;
    color: var(--border);
}
  
/* -- YouTube Link Styles -- */
  
#source-link {
    top: 60px;
}
  
#source-link > i {
    color: rgb(94, 106, 210);
}
  
#yt-link {  
    top: 10px;
}
  
#yt-link > i {
    color: rgb(239, 83, 80);
}
  
.meta-link {
    align-items: center;
    backdrop-filter: blur(3px);
    background-color: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.1);
    cursor: pointer;  
    display: inline-flex;
    gap: 5px;
    left: 10px;
    padding: 10px 20px;
    position: fixed;
    text-decoration: none;
    transition: background-color 350ms, border-color 350ms;
    z-index: 10000;
}
  
.meta-link:hover {
    background-color: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
}
  
.meta-link > i, .meta-link > span {
    height: 20px;
    line-height: 20px;
}
  
.meta-link > span {
    color: white;
    font-family: "Anek Latin", sans-serif;
    transition: color 600ms;
}
.homebutton{
    background-color:blue;
    font-size:25px;
    padding:5px;
    cursor: pointer;
    color:white;
    transition: transform all 0.3s ease; 
    border-radius: 10px;   
    border:none;
    outline:none;
}
.homebutton:hover{

    transform: scale(1.1)  ;
}