/* ===============================
THEME VARIABLES
=============================== */

:root{

--bg-color:#111;
--text-color:#eee;

--btn-bg:rgba(255,255,255,0.05);
--btn-border:rgba(255,255,255,0.35);

--card-bg:#222;

--banner-bg:#ff7f00;

}

body.light-mode{

--bg-color:#f5f5f5;
--text-color:#111;

--btn-bg:rgba(0,0,0,0.05);
--btn-border:rgba(0,0,0,0.25);

--card-bg:#ffffff;

}

/* ===============================
BASE
=============================== */

body{

margin:0;
font-family:'Montserrat',sans-serif;

background:var(--bg-color);
color:var(--text-color);

transition:background .3s,color .3s;

}

section{

padding:80px 20px;
max-width:1200px;
margin:auto;

}

h1,h2{

text-align:center;

}

p{

text-align:center;
max-width:700px;
margin:auto;

}

/* ===============================
TOP BANNER
=============================== */

.top-banner{

background:var(--banner-bg);
color:white;

text-align:center;

padding:10px;

font-weight:bold;

position:sticky;
top:0;

z-index:2000;

}

#banner-close{

cursor:pointer;
float:right;

}

/* ===============================
NAVIGATION
=============================== */

nav{

position:absolute;

top:25px;
left:50%;

transform:translateX(-50%);

z-index:1000;

display:flex;
flex-direction:column;

align-items:center;

}

/* glass background */

.nav-background{

background:rgba(0,0,0,0.45);

backdrop-filter:blur(12px);
-webkit-backdrop-filter:blur(12px);

padding:14px 30px;

border-radius:14px;

display:flex;
flex-direction:column;

align-items:center;

}

/* nav links */

nav ul{

display:flex;

gap:18px;

list-style:none;

margin:0;
padding:0;

}

nav ul li a{

text-decoration:none;

color:white;

padding:8px 16px;

border-radius:6px;

border:1px solid rgba(255,255,255,0.35);

transition:.25s;

}

nav ul li a:hover{

background:rgba(255,255,255,0.15);

}

/* language + theme */

.nav-actions{

display:flex;

gap:10px;

margin-top:10px;

}

.nav-actions button{

background:transparent;

color:white;

border:1px solid rgba(255,255,255,0.35);

padding:6px 10px;

border-radius:6px;

cursor:pointer;

}

/* hamburger */

.hamburger{

display:none;

font-size:28px;

cursor:pointer;

margin-top:10px;

}

/* ===============================
HERO
=============================== */

.hero-art{

height:80vh;

background:url("images/cbc374a1-fc2b-40c4-8a60-979754474e03.avif") center/cover no-repeat;

display:flex;

align-items:center;
justify-content:center;

}

.hero-overlay{

background:rgba(0,0,0,0.45);

backdrop-filter:blur(6px);

padding:40px;

border-radius:14px;

text-align:center;

max-width:700px;

color:white;

}

.hero-btn{

display:inline-block;

margin-top:20px;

padding:10px 22px;

border:1px solid rgba(255,255,255,0.5);

border-radius:6px;

text-decoration:none;

color:white;

transition:.25s;

}

.hero-btn:hover{

background:white;
color:black;

}

/* ===============================
PORTFOLIO GRID
=============================== */

.portfolio-grid{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(250px,1fr));

gap:20px;

margin-top:40px;

}

.portfolio-grid img{

width:100%;

border-radius:6px;

transition:.35s;

}

.portfolio-grid img:hover{

transform:scale(1.04);

}

/* ===============================
CTA
=============================== */

.cta{

display:inline-block;

margin-top:20px;

padding:12px 28px;

border:2px solid white;

border-radius:6px;

text-decoration:none;

color:white;

}

.cta:hover{

background:white;
color:black;

}

/* ===============================
FORM
=============================== */

form{

max-width:600px;

margin:auto;

display:flex;
flex-direction:column;

gap:15px;

}

form input,
form textarea{

padding:12px;

border-radius:6px;

border:1px solid #444;

background:var(--card-bg);

color:var(--text-color);

font-family:inherit;

}

form button{

padding:12px;

cursor:pointer;

}

/* ===============================
ANIMATIONS
=============================== */

.fade-up{

opacity:0;

transform:translateY(30px);

transition:.6s;

}

.fade-up.animate{

opacity:1;
transform:translateY(0);

}

/* ===============================
FOOTER
=============================== */

footer{

text-align:center;

padding:40px;

background:#00000060;

color:white;

}

/* ===============================
MOBILE
=============================== */

@media(max-width:768px){

nav{

top:15px;

}

.nav-background{

width:90vw;

}

nav ul{

display:none;

flex-direction:column;

gap:10px;

width:100%;

}

nav ul.active{

display:flex;

}

.hamburger{

display:block;

}

.hero-overlay{

margin-top:80px;

}

}

/* ===============================
LANGUAGE VISIBILITY
=============================== */

.lang-en{display:inline;}
.lang-nl{display:none;}