/* ===========================
   PERSONAL ARCHIVE
   Version 0.1
=========================== */

:root{

--bg:#08182c;
--bg2:#103125;

--gold:#c8a24b;
--gold2:#e2c46d;

--cream:#f6f0de;

--green:#1d6a52;
--green2:#2b8c68;

}

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

html,body{

height:100%;

font-family:'Inter',sans-serif;

background:
linear-gradient(
180deg,
var(--bg),
#0a2342,
var(--bg2));

overflow:hidden;

color:var(--cream);

}

/* ====================== */
/* ЗВЁЗДЫ */
/* ====================== */

#stars{

position:fixed;

left:0;
top:0;

width:100%;
height:100%;

background-image:

radial-gradient(circle,#ffffffcc 1px,transparent 1px);

background-size:80px 80px;

opacity:.25;

animation:starsMove 120s linear infinite;

pointer-events:none;

}

@keyframes starsMove{

from{

transform:translateY(0);

}

to{

transform:translateY(-300px);

}

}

/* ====================== */
/* РАМКА */
/* ====================== */

.frame{

position:fixed;

left:25px;
top:25px;
right:25px;
bottom:25px;

border:1px solid rgba(200,162,75,.45);

pointer-events:none;

box-shadow:
0 0 20px rgba(200,162,75,.08);

}

/* ====================== */
/* ГЛАВНЫЙ ЭКРАН */
/* ====================== */

.hero{

width:100%;
height:100vh;

display:flex;

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

text-align:center;

padding:30px;

}

/* ====================== */

.hero-content{

animation:fadeUp 2s ease;

}

/* ====================== */

.coat{

width:280px;

max-width:70vw;

filter:

drop-shadow(0 0 25px rgba(200,162,75,.35));

animation:

float 6s ease-in-out infinite,

glow 5s ease infinite;

}

/* ====================== */

h1{

font-family:'Cinzel',serif;

font-size:54px;

margin-top:25px;

letter-spacing:4px;

font-weight:600;

color:var(--cream);

}

h2{

margin-top:15px;

font-size:18px;

font-weight:300;

letter-spacing:3px;

color:#d7d1bf;

}

.motto{

margin-top:30px;

font-family:'Cormorant Garamond',serif;

font-size:28px;

font-style:italic;

color:var(--gold2);

}

/* ====================== */

.buttons{

margin-top:45px;

display:flex;

gap:20px;

justify-content:center;

flex-wrap:wrap;

}

/* ====================== */

button{

padding:

16px
34px;

font-size:16px;

border-radius:40px;

cursor:pointer;

transition:.35s;

font-family:'Inter',sans-serif;

}

/* ====================== */

.gold{

background:var(--gold);

color:#111;

border:none;

}

.gold:hover{

transform:translateY(-4px);

box-shadow:

0 0 25px rgba(226,196,109,.55);

}

/* ====================== */

.green{

background:transparent;

border:2px solid var(--green2);

color:var(--cream);

}

.green:hover{

background:var(--green2);

transform:translateY(-4px);

}

/* ====================== */

footer{

position:fixed;

bottom:25px;

width:100%;

text-align:center;

font-size:12px;

opacity:.5;

letter-spacing:2px;

}

/* ====================== */

@keyframes glow{

0%{

filter:
drop-shadow(0 0 10px rgba(200,162,75,.25));

}

50%{

filter:
drop-shadow(0 0 40px rgba(226,196,109,.6));

}

100%{

filter:
drop-shadow(0 0 10px rgba(200,162,75,.25));

}

}

/* ====================== */

@keyframes float{

0%{

transform:translateY(0);

}

50%{

transform:translateY(-10px);

}

100%{

transform:translateY(0);

}

}

/* ====================== */

@keyframes fadeUp{

from{

opacity:0;

transform:

translateY(40px);

}

to{

opacity:1;

transform:

translateY(0);

}

}

/* ====================== */

@media(max-width:768px){

.coat{

width:210px;

}

h1{

font-size:36px;

}

h2{

font-size:15px;

}

.motto{

font-size:22px;

}

.frame{

left:12px;
right:12px;
top:12px;
bottom:12px;

}

button{

width:100%;

max-width:300px;

}

}