*{
box-sizing:border-box;
}
html,body{
margin:0;
min-height:100%;
}
body{
font-family:Arial,Helvetica,sans-serif;
background:
linear-gradient(
180deg,
#222,
#050505
);
color:white;
display:flex;
align-items:center;
justify-content:center;
padding:20px;
}
/* WRAPPER */
.wrap,
.app{
width:100%;
max-width:520px;
text-align:center;
}
/* TITLE */
h2{
font-size:34px;
margin-bottom:35px;
}
/* VIDEO BOX */
.player{
width:100%;
aspect-ratio:16/9;
background:#050505;
border-radius:30px;
position:relative;
overflow:hidden;
box-shadow:
0 30px 80px #000;
}
.player img{
width:100%;
height:100%;
object-fit:cover;
filter:
brightness(.35);
}
/* PLAY */
.play{
position:absolute;
top:50%;
left:50%;
transform:
translate(-50%,-50%);
width:120px;
height:120px;
border-radius:50%;
background:
linear-gradient(
135deg,
#ff0055,
#ff8800
);
display:flex;
align-items:center;
justify-content:center;
font-size:55px;
}
/* TEXT */
p{
font-size:22px;
color:#aaa;
}
/* BUTTON */
button{
width:100%;
height:80px;
border:0;
border-radius:50px;
font-size:30px;
font-weight:bold;
color:white;
background:
linear-gradient(
90deg,
#ff0055,
#ff8800
);
}
/* ==================
DESKTOP
================== */
@media(min-width:900px){
body{
background:
radial-gradient(
circle at top,
#333,
#050505 60%
);
}
.wrap,
.app{
max-width:700px;
background:
rgba(255,255,255,.04);
padding:45px;
border-radius:35px;
box-shadow:
0 0 100px #000;
}
.player{
height:auto;
}
h2{
font-size:38px;
}
button{
max-width:450px;
}
}
/* ==================
MOBILE
================== */
@media(max-width:600px){
body{
padding:0;
align-items:flex-start;
}
.wrap,
.app{
min-height:100vh;
padding:
35vh 25px 0;
}
h2{
font-size:28px;
}
.play{
width:90px;
height:90px;
font-size:40px;
}
button{
height:65px;
font-size:22px;
}
}