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

body{

background:url(images/background.png);
background-size:cover;
background-position:center;
background-attachment:fixed;

font-family:Georgia, serif;

color:white;

}

body{
    cursor: url("cursors/cursor.png") 16 16, auto;
}

body{
    cursor:none;
}

a,
button,
video,
img{
    cursor:none;
}

.overlay{

min-height:100vh;

background:rgba(0,0,0,.28);

display:flex;

justify-content:center;

padding:60px;

}

.container{
    position:relative;
    z-index:2;

    width:min(1150px,95vw);

    background:rgba(255,255,255,.05);

    backdrop-filter:blur(20px);

    border:1px solid rgba(255,255,255,.18);

    padding:45px;
}

header{

display:flex;

justify-content:space-between;

align-items:flex-end;

margin-bottom:40px;

}

h1{
    font-size:52px;
    font-weight:300;
    letter-spacing:6px;
    white-space:nowrap;   /* Keeps "jacy nyte" on one line */
    flex-shrink:0;        /* Prevents it from being squished */
    text-shadow:
        0 0 8px rgba(255,255,255,.5),
        0 0 30px rgba(180,200,255,.3);
}

nav{
    display:flex;
    flex-wrap:wrap;
    justify-content:flex-end;
    align-items:center;
    gap:22px;
    row-gap:10px;
}

nav a{

font-size:10px;

letter-spacing:4px;

opacity:.65;

}

nav a:hover{

opacity:1;

}

.gallery{
    margin-bottom:40px;
}

.slider{
    position:relative;
    height:220px;   /* makes the gallery shorter */
    overflow:hidden;

    border:1px solid rgba(255,255,255,.18);
    background:rgba(255,255,255,.04);
}

.slide{
    position:absolute;
    inset:0;

    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:15px;

    padding:15px;

    opacity:0;

    transition:opacity 2s ease;
}

.slide.active{
    opacity:1;
}

.slide img{
    width:100%;
    height:100%;

    object-fit:cover;

    border-radius:6px;

    transition:transform 10s ease;
}

.slide.active img{
    transform:scale(1.05);
}

.gallery img{

width:100%;

aspect-ratio:1;

object-fit:cover;

transition:.4s;

cursor:pointer;

}

.gallery img:hover{

transform:scale(1.05);

}

hr{

border:none;

height:1px;

background:rgba(255,255,255,.35);

margin:35px 0;

}

.middle{

display:grid;

grid-template-columns:2fr 1fr;

gap:30px;

}

.video{

height:430px;

border:1px solid rgba(255,255,255,.25);

display:flex;

justify-content:center;

align-items:center;

background:rgba(255,255,255,.05);

}

.placeholder{

font-size:30px;

letter-spacing:6px;

opacity:.5;

}

.about{

line-height:1.8;

font-size:15px;

}

.about h2{

margin-bottom:20px;

font-weight:normal;

letter-spacing:3px;

text-shadow:
0 0 8px rgba(255,255,255,.5),
0 0 30px rgba(180,200,255,.3);

}

.projects{
    display:flex;
    justify-content:center;
    gap:60px;
    flex-wrap:wrap;
    margin-top:10px;
}

.project img{

    transition:
    transform 7s ease,
    filter 2s ease;

    animation:floatAlbum 9s ease-in-out infinite;
}

@keyframes floatAlbum{

0%{
transform:translateY(0px);
}

50%{
transform:translateY(-8px);
}

100%{
transform:translateY(0px);
}

}

.project:hover{
    transform:translateY(-6px);
}

.project{
text-align:center;
cursor:pointer;
transition:.4s;
}
.project img{
    width:220px;
    aspect-ratio:1/1;
    height:auto;
    object-fit:cover;
    display:block;
    margin:0 auto 15px;
}

.project h3{

font-weight:normal;

letter-spacing:2px;

}

@media(max-width:900px){

header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:40px;
    margin-bottom:40px;
}

.gallery{

grid-template-columns:repeat(2,1fr);

}

.middle{

grid-template-columns:1fr;

}

.projects{

grid-template-columns:1fr;

}

}

.video video{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}

body::after{
    content:"";
    position:fixed;
    inset:0;
    background:url("images/grain.jpg");
    background-size:cover;
    opacity:.09;
    pointer-events:none;
    z-index:9999;
}
.overlay{
    position:relative;
    z-index:2;

    min-height:100vh;

    background:rgba(0,0,0,.18);

    display:flex;

    justify-content:center;

    padding:60px;
}
.light{
    position:fixed;
    width:1000px;
    height:1000px;

    border-radius:50%;

    background:radial-gradient(circle,
        rgba(120,220,255,.8) 0%,
        rgba(170,130,255,.5) 25%,
        rgba(255,255,255,.2) 45%,
        transparent 70%);

    filter:blur(120px);

    mix-blend-mode:screen;

    pointer-events:none;

    z-index:1;

    animation:float 18s ease-in-out infinite alternate;
}

body::before{
    content:"";
    position:fixed;
    inset:0;
    background-image:
        radial-gradient(white 1px, transparent 1px);
    background-size:80px 80px;
    opacity:.08;
    pointer-events:none;
}

.one{
    left:-120px;
    top:60px;
}

.two{
    right:-120px;
    bottom:-50px;
    animation-delay:8s;
}

@keyframes float{

0%{
transform:translate(0px,0px) scale(1);
}

50%{
transform:translate(180px,-120px) scale(1.15);
}

100%{
transform:translate(-120px,120px) scale(.9);
}

}

.project,
.project:visited{
    color:white;
    text-decoration:none;
}

nav a,
nav a:visited{
    color:white;
    text-decoration:none;
}

nav a:hover{
    color:white;
    text-decoration:none;
}


@media (max-width:900px){
.container{padding:20px;width:95vw;}
.overlay{padding:20px;}
header{flex-direction:column;align-items:center;gap:20px;}
h1{font-size:36px;white-space:normal;text-align:center;}
nav{justify-content:center;gap:14px;}
nav a{font-size:12px;}
.slider{height:140px;}
.slide{grid-template-columns:1fr;padding:10px;}
.middle{grid-template-columns:1fr;gap:20px;}
.video{height:240px;}
.projects{display:flex;flex-direction:column;align-items:center;gap:35px;}
.project{width:min(280px,90vw);}
.project img{width:100%;}
.light{width:500px;height:500px;filter:blur(80px);}
}

#cursor{
    position:fixed;
    width:16px;
    height:16px;
    border-radius:50%;
    background:white;
    pointer-events:none;
    z-index:99999;

    transform:translate(-50%,-50%);

    box-shadow:
        0 0 10px white,
        0 0 25px rgba(180,220,255,.8),
        0 0 45px rgba(160,120,255,.5);

    mix-blend-mode:screen;
}

.trail{
    position:fixed;
    width:14px;
    height:14px;

    border-radius:50%;

    background:white;

    pointer-events:none;

    z-index:99999;

    box-shadow:
        0 0 10px white,
        0 0 20px rgba(180,220,255,.8),
        0 0 35px rgba(160,120,255,.6);

    mix-blend-mode:screen;
}