html, body{
    height: 100%;
}

body {
  font-family: 'Inter', Arial, sans-serif;
  background-color:#000113;
  color: azure;
  min-height: 100vh;
}

.main-wrapper {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 100vh;
}

.gradient-bg {
    background-image: radial-gradient(ellipse 55% 45% at 50% 50%, #1e203b, #0c0d1d, #000113);
}

.my-headline {
    font-family: "Bebas Neue", sans-serif;
    font-weight: 400;
    font-style: normal;
    color: #7ee6ff;
    letter-spacing: 0.10em;
}

.my-nametag {
    font-family: "Bebas Neue", sans-serif;
    font-weight: 400;
    font-style: normal;
    letter-spacing: 0.10em;
    font-size: 1.8rem;
}

.my-icons {
    color: #7ee6ff;
    font-size: 1.4rem;
    line-height: 1.7;
}

.my-icons:hover {
    color: #aaedfd;
}

.my-intro {

    background: linear-gradient(120deg, #2d84ef 30%, #20d0e9 110%);
    border-radius: 1.2rem;
    padding: 2rem 2.5rem;
    color: #181c26;
    font-size: 1.25rem; 
    font-weight: 600; 
    letter-spacing: 0.01em;
    box-shadow: 0 2px 32px #7ee6ff33;
    line-height: 1.6;

}

.azure-border {

    border: #67c3da 3px solid;
    box-shadow: 0 2px 15px #7ee6ff44;
}


.my-icons-large {
    color: #7ee6ff;
    font-size: 2rem;
}

.my-icons-large:hover {
    color: #aaedfd;
}



a.my-a {
    color: #181c26;
    text-decoration: underline;
    text-decoration-style: dotted;
    text-underline-offset: 4px;
    text-decoration-color: #181c26;

}

a.my-a:hover {
    color: #7ee6ff;
    text-decoration-color: #7ee6ff;
} 

.product-cover {
    background: rgba(34,44,80,0.93);
    border-radius: 1.2rem; overflow: hidden;
    box-shadow: 0 8px 40px #20d0e933, 0 2px 10px #0002;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    border: 2.5px solid #7ee6ff33;
    cursor: pointer; text-decoration: none;
    transition: box-shadow 0.18s, border 0.18s, transform 0.17s;
}

.product-cover:hover {
    box-shadow: 0px 8px 40px #0e7280bb, 0 2px 14px #0004;
    border: 2.5px solid #3f899b;
    transform: scale(1.01) translateY(-1px); z-index: 4;
}

.product-title {
    font-family: 'Bebas Neue', 'Inter', Arial, sans-serif;
    font-size: 1.7rem; 
    font-weight: 400;
    color: #7ee6ff; 
    letter-spacing: 0.10em;
        
}


@media (max-width: 992px) {
    .my-nametag {
        font-size: 1.6rem;
        letter-spacing: 0em;
    }
    .my-icons {
        font-size: 1.3rem;
    }
    .my-intro {
        font-size: 1.05rem;
        padding: 1.5rem 1.5rem;
    }
    .product-title {
        font-size: 1.6rem;
        letter-spacing: 0.05em;
    }
}

@media (max-width: 768px) {
    .my-nametag {
        font-size: 1.3rem;
        letter-spacing: 0em;
    }
    .my-icons {
        font-size: 1.2rem;
    }
    .my-intro {
        font-size: 1rem;
        padding: 1rem 1.5rem;
    }
    .azure-border {
       border: #67c3da 2px solid; 
    }
    .product-title {
        font-size: 1.3rem;
    }
  }