@import url('open-iconic/font/css/open-iconic-bootstrap.min.css');

:root {
    --bg:         #1D1D1D;
    --surface:    #171b26;
    --surface2:   #1e2333;
    --border:     #2a3047;
    --accent:     var(--mud-palette-secondary);
    --accent-dim: rgba(255, 31, 105, .12);
    --accent2:    var(--mud-palette-tertiary);
    --text:       var(--mud-palette-dark-text);
    --muted:      rgba(255, 255, 255, 0.8);
    --danger:     var(--mud-palette-error);
    --success:    var(--mud-palette-success);
    --warn:       var(    --mud-palette-warning);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

h1:focus {
    outline: none;
}

a {
    color: #0071c1;
}

.content {
    padding-top: 1.1rem;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid red;
}

.validation-message {
    color: red;
}

.feature-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    position: relative;
    border-width: 1px; 
    border-color:rgba(255, 255, 255, 0.15); 
    border-radius: 20px;
    backdrop-filter: blur(20px);
    background: rgba(255, 255, 255, 0.06);
    opacity: 0.9;
}

.feature-card::before {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: 20px;
    padding: 2px;
    background: linear-gradient(135deg, rgb(192, 132, 252), rgb(96, 165, 250), rgb(244, 114, 182));
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.feature-card:hover {
    transform: translateY(-8px);
}

.feature-card:hover::before {
    opacity: 1;
}