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

body{

background-image:url('backo.jpg');
background-size:cover;
background-position:center;
background-attachment:fixed;

font-family:'Libre Baskerville', serif;
color:#e6c76b;

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

min-height:100vh;

}
img{
max-width:100%;
height:auto;
}

/* Container */

.splash-container{

max-width:900px;
width:90%;

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

padding:40px;

border:1px solid #b8962e;

box-shadow:0 0 40px rgba(212,175,55,.25);

text-align:center;

}

/* Logo */

.logo-area img{

max-width:95px;
width:80%;
margin-bottom:20px;

}
/* Portal Frame */

.portal-frame{

position:relative;

max-width:700px;
width:100%;

margin:35px auto;

padding:10px;

border:2px solid #d4af37;

background:black;

box-shadow:
0 0 15px rgba(212,175,55,.5),
0 0 40px rgba(212,175,55,.35),
inset 0 0 25px rgba(212,175,55,.15);

overflow:hidden;

}

/* Portal Glow */

.portal-glow{

position:absolute;

top:-50%;
left:-50%;

width:200%;
height:200%;

background:radial-gradient(circle,
rgba(255,215,0,.25),
rgba(212,175,55,.1),
transparent 60%
);

animation:portalPulse 6s infinite linear;

pointer-events:none;

}

/* GIF inside portal */

.portal-frame img{

width:100%;
height:auto;
display:block;

position:relative;
z-index:2;

}

/* Animation */

@keyframes portalPulse{

0%{
transform:rotate(0deg) scale(1);
opacity:.6;
}

50%{
transform:rotate(180deg) scale(1.15);
opacity:.9;
}

100%{
transform:rotate(360deg) scale(1);
opacity:.6;
}

}

/* GIF Area */

.gif-area{
width:100%;
max-width:100%;
margin:20px auto;
}

.gif-area img{
width:100%;
max-width:100%;
height:auto;
display:block;
border:2px solid #d4af37;

box-shadow:
0 0 15px rgba(212,175,55,.4),
0 0 40px rgba(212,175,55,.25);
}

/* Particle Container */

.particles{

position:absolute;
top:0;
left:0;

width:100%;
height:100%;

overflow:hidden;
pointer-events:none;

z-index:1;

}

/* Individual particles */

.particles span{

position:absolute;

display:block;

width:4px;
height:4px;

background:#ffd700;
border-radius:50%;

box-shadow:0 0 6px #ffd700;

opacity:.8;

animation:floatUp linear infinite;

}

/* Random positions + timing */

.particles span:nth-child(1){
left:10%;
animation-duration:6s;
animation-delay:0s;
}

.particles span:nth-child(2){
left:25%;
animation-duration:8s;
animation-delay:2s;
}

.particles span:nth-child(3){
left:40%;
animation-duration:7s;
animation-delay:1s;
}

.particles span:nth-child(4){
left:60%;
animation-duration:9s;
animation-delay:3s;
}

.particles span:nth-child(5){
left:75%;
animation-duration:6.5s;
animation-delay:1.5s;
}

.particles span:nth-child(6){
left:90%;
animation-duration:8.5s;
animation-delay:2.5s;
}

/* Animation */

@keyframes floatUp{

0%{
transform:translateY(100%) scale(0.5);
opacity:0;
}

20%{
opacity:1;
}

80%{
opacity:.8;
}

100%{
transform:translateY(-120%) scale(1);
opacity:0;
}

}

.site-footer{

margin-top:40px;

border-top:1px solid rgba(212,175,55,.35);

padding-top:18px;

font-size:12px;

text-align:center;

line-height:1.6;

color:#c9b36a;


}

.site-footer p{

margin-bottom:10px;

}

.site-footer a{

color:#d4af37;

text-decoration:none;

}

.site-footer a:hover{

color:#fff;

}
/* Video */

.video-wrapper{

position:relative;
padding-bottom:56.25%;
height:0;
overflow:hidden;

border:2px solid #d4af37;

box-shadow:
0 0 15px rgba(212,175,55,.4),
0 0 40px rgba(212,175,55,.25);

margin-bottom:30px;

}

.video-wrapper iframe{

position:absolute;
top:0;
left:0;
width:100%;
height:100%;

}

/* Bullets */

.bullet-area{

margin-bottom:35px;

}

.bullet-area ul{

list-style:none;

}

.bullet-area li{

margin:14px 0;

font-size:18px;

padding-left:28px;

position:relative;

}

/* Gold bullet */

.bullet-area li::before{

content:"◆";

position:absolute;
left:0;

color:#d4af37;

font-size:14px;

}

/* CTA Button */

.cta-button{

display:inline-block;

padding:16px 36px;

font-family:'Cinzel', serif;
font-size:18px;
letter-spacing:1px;

text-decoration:none;

color:black;

background:linear-gradient(
90deg,
#d4af37,
#ffd700,
#d4af37
);

border-radius:4px;

transition:.3s;

}

/* Hover */

.cta-button:hover{

transform:scale(1.07);

background:linear-gradient(
90deg,
#ffd700,
#fff2a6,
#ffd700
);

box-shadow:0 0 25px rgba(255,215,0,.7);

}

/* Mobile */

@media(max-width:700px){

.splash-container{

padding:25px;

}

.bullet-area li{

font-size:16px;

}

.cta-button{

font-size:16px;
padding:14px 28px;

}

}