/*
Theme Name: Tema CSIE
Author: Mugur-Celestin Vlad
Description: Tema pentru site-ul csie.ase.ro
Version: 0.6.2
*/

@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=JetBrains+Mono:ital,wght@0,100..800;1,100..800&display=swap');


/* GENERAL */

:root {
    --col-bg: #EAEFF1;
    --col-text: #727272;
    --col-heading: #1A262B;
    --col-primary-1: #008BC1;
    --col-primary-2: #879E23;
    --col-hero-bg: #161616;

    --font-2xl: 48px;
    --font-xl: 36px;
    --font-lg: 24px;
    --font-md: 16px;
    --font-sm: 8px;

    --dark-texture:
        radial-gradient(ellipse 65% 65% at 0%   100%, rgba(0,   139, 193, 0.13) 0%, transparent 70%),
        radial-gradient(ellipse 50% 50% at 100% 0%,   rgba(0,   139, 193, 0.10) 0%, transparent 65%),
        radial-gradient(ellipse 45% 40% at 88%  72%,  rgba(135, 158, 35,  0.11) 0%, transparent 60%),
        radial-gradient(ellipse 35% 30% at 12%  18%,  rgba(135, 158, 35,  0.07) 0%, transparent 55%),
        radial-gradient(circle, rgba(255, 255, 255, 0.040) 1px, transparent 1px);
    --dark-texture-size: 100% 100%, 100% 100%, 100% 100%, 100% 100%, 22px 22px;
    --dark-texture-pos:  0px 0px,   0px 0px,   0px 0px,   0px 0px,   0px 0px;
}

@media (max-width: 768px) {
    :root {
        --font-2xl: 28px;
        --font-xl: 22px;
        --font-lg: 17px;
        --font-md: 14px;
    }
}

body { 
    margin: 0; 
    color: var(--col-text);
    font-family: 'Inter', 'Helvetica', 'sans-serif';

    background-color: var(--col-bg);
    background-image:
        radial-gradient(ellipse 70% 80% at 5%  110%, rgba(0,   139, 193, 0.12) 0%, transparent 65%),
        radial-gradient(ellipse 55% 60% at 95% -10%, rgba(135, 158, 35,  0.08) 0%, transparent 60%),
        radial-gradient(circle, rgba(26, 38, 43, 0.06) 1px, transparent 1px);
    background-size: 100% 100%, 100% 100%, 22px 22px;
    background-position: 0 0, 0 0, 0 0;
    background-attachment: fixed;
    color: var(--col-hero-bg);
}

* { box-sizing: border-box; }

* p { margin: 0; }

.card-primary {
    /* From https://css.glass */
    background: rgba(82, 130, 150, 0.1411764705882353);
    border-radius: 16px;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    border: 1px solid rgba(82, 130, 150, 0.3);
}

.card-secondary {
    /* From https://css.glass */
    background: rgba(93, 140, 82, 0.1411764705882353);
    border-radius: 16px;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    border: 1px solid rgba(93, 140, 82, 0.3);
}

button {
    min-width: 180px;
    aspect-ratio: 3 / 1;
    height: auto;

    border: 0;
    font-size: var(--font-md);
    cursor: pointer;

    /* From https://css.glass */
    background: rgba(0, 139, 193, 1);
    border-radius: 16px;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(12.3px);
    -webkit-backdrop-filter: blur(12.3px);
    border: 1px solid rgba(0, 139, 193, 0.05);
    
    color: var(--col-bg);
}

/* .custom-hero-section canvas {
    backdrop-filter: blur(10px);
} */

.custom-heading {
    font-family: 'JetBrains Mono';
    font-weight: bold;
    font-size: 48px;
    color: var(--col-heading);
}

/*
    Hero section CSS
*/