*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:sans-serif
}

html,body{
width:100%;
min-height:100%;
background:#111111
}

main{
min-height:100vh;
height:auto;
width:100%;
background:#111111;
color:#fff;
display:grid;
grid-gap:20px;
grid-template-columns:3fr 1fr 1fr;
grid-template-areas:
"main location location"
"main stream stream"
"main fans download"
"main ticket ticket"
"main invite invite";
grid-template-rows:auto;
padding:30px
}

.left-main{
grid-area:main;
background:#222;
border-radius:30px;
background-image:url(https://i.pinimg.com/1200x/4f/0d/b4/4f0db4b73c4e5eaef81d8efd7cf1f230.jpg);
background-size:cover;
background-position:center;
padding:40px;
font-size:2rem;
font-weight:bold;
color:#D6F22C
}

.hero-nav{
display:flex;
align-items:center;
justify-content:start;
gap:20px;
margin-left:20px
}

.hero-nav span{
width:96px;
height:36px;
display:flex;
align-items:center;
justify-content:center;
border-radius:999px;
font-size:14px;
font-weight:500;
text-transform:uppercase;
background:rgba(20,18,18,.774);
border:1px solid rgba(255,255,255,.15);
color:#fff;
cursor:pointer;
user-select:none;
transition:background .2s ease,transform .1s ease
}

.hero-nav span:hover{background:rgba(255,255,255,.349)}
.hero-nav span:active{transform:scale(.96)}

.hero-title{
margin-top:100px;
margin-left:40px;
text-align:left;
font-size:130px;
text-transform:uppercase;
text-shadow:1px 1px 0 rgba(0,0,0,.4)
}

.hero-title span{
letter-spacing:-.1px;
word-spacing:-30px
}

.hero-subtitle{
margin-left:40px;
font-size:30px;
text-transform:uppercase;
text-shadow:1px 1px 0 rgba(0,0,0,.4);
color:#fff
}

.hero-footer{
margin-left:80px;
margin-top:210px;
display:flex;
gap:30px
}

.artist-info,.date-info{
display:flex;
flex-direction:column;
gap:10px;
height:30px;
padding:20px
}

.artist-info small,
.date-info small{
margin-right:15px;
color:#fff;
font-weight:100;
font-size:20px
}

.artist-info p,
.date-info p{
font-size:20px;
font-weight:400;
color:#fff
}

.person-icon{
margin-top:13px;
height:75px;
width:75px;
background:url(download.png) center/cover;
background-color:silver;
border-radius:50%
}

.line{
width:1px;
margin-top:30px;
height:50px;
background:#fff;
flex-shrink:0
}

.hero-nav span.active{
background:#000;
border:1px solid rgba(255,255,255,.3);
display:flex;
gap:8px
}

.hero-nav span.active::before{
content:"";
width:8px;
height:8px;
background:#D6F22C;
border-radius:50%;
box-shadow:0 0 8px #D6F22C
}

.location{
grid-area:location;
display:flex;
align-items:center;
justify-content:center
}

.toggle-input{display:none}

.toggle-location{
display:flex;
align-items:center;
background:#1a1a1a;
padding:4px;
border-radius:50px;
border:1px solid #333;
width:100%;
height:50px;
cursor:pointer;
position:relative;
overflow:hidden
}

.toggle-location span{
flex:1;
z-index:2;
display:flex;
align-items:center;
justify-content:center;
gap:10px;
font-size:14px;
font-weight:500;
color:#888;
transition:color .3s ease
}

.toggle-location::before{
content:"";
position:absolute;
width:calc(50% - 8px);
height:calc(100% - 8px);
background:#000;
border-radius:40px;
left:4px;
transition:transform .3s cubic-bezier(.4,0,.2,1);
z-index:1
}

.toggle-input:not(:checked)+.toggle-location .worldwide{color:#fff}
.toggle-input:checked+.toggle-location::before{transform:translateX(100%)}
.toggle-input:checked+.toggle-location .worldwide{color:#888}
.toggle-input:checked+.toggle-location .mansa{color:#fff}

.stream{
grid-area:stream;
background:#292929;
border-radius:30px;
padding:30px
}

.stream-content{
display:flex;
flex-direction:column;
gap:20px
}

.play-icon{
display:flex;
gap:20px;
align-items:center
}

.play-icon i{font-size:30px}
.play-icon h3{font-size:25px;letter-spacing:1px}

.text-group{
padding:0 20px;
border-radius:50px;
height:50px;
width:100%;
background:rgba(83,83,83,.658);
display:flex;
align-items:center;
justify-content:space-between;
padding-right:4px
}

.text-group a{
text-decoration:none;
color:#fff;
font-size:14px
}

.text-group i{
height:45px;
width:45px;
display:flex;
align-items:center;
justify-content:center;
background:#000;
border-radius:50%;
flex-shrink:0
}

.fans-wating,.download{
background:#1E1E1E;
border-radius:30px;
padding:30px
}

.fans-wating{grid-area:fans}
.download{grid-area:download}

.stat{
display:flex;
flex-direction:column;
gap:40px
}

.stat-icon{
display:flex;
gap:10px
}

.stat-icon span{
color:rgba(255,255,255,.568);
font-size:28px;
margin-top:4px;
margin-left:12px;
font-weight:100
}

.stat-icon i{
height:40px;
width:40px;
display:flex;
align-items:center;
justify-content:center;
background:rgba(83,83,83,.658);
border-radius:50%;
cursor:pointer
}

.stat h2{font-size:40px}
.stat h3{color:rgba(255,255,255,.568)}

.about-ticket{
grid-area:ticket;
background:#D6F22C;
color:#000;
border-radius:30px;
padding:30px 50px 30px 30px;
display:flex;
justify-content:space-between
}

.ticket-info{
display:flex;
flex-direction:column;
justify-content:space-between
}

.ticket-info h3{font-size:30px}
.total-count{font-size:25px}
.big-count{font-size:40px}

.progress-circle{
width:60px;
height:60px;
border-radius:50%;
background:conic-gradient(#111 0deg 180deg,rgba(192,192,192,.5) 180deg 360deg);
-webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 8px),#000 0);
mask:radial-gradient(farthest-side,transparent calc(100% - 8px),#000 0);
display:flex;
align-items:center;
justify-content:center
}

.persnol-invite{
grid-area:invite;
padding:30px;
background:#1E1E1E;
border-radius:30px;
display:flex;
flex-direction:column;
gap:20px
}

.persnol-invite h3{font-size:25px}

.invite-box{
display:flex;
justify-content:space-between;
position:relative
}

.invite-box input{
padding:0 110px 0 20px;
height:50px;
width:100%;
background:rgba(83,83,83,.658);
border:none;
border-radius:50px;
color:#fff
}

.invite-box input::placeholder{color:#fff}

.invite-box button{
position:absolute;
right:3px;
top:2.5px;
height:45px;
width:95px;
display:flex;
align-items:center;
justify-content:center;
background:#000;
color:#fff;
border-radius:50px;
border:none;
cursor:pointer
}

@media(max-width:1024px){
main{
grid-template-columns:1fr 1fr;
grid-template-areas:
"main main"
"location location"
"stream stream"
"fans download"
"ticket ticket"
"invite invite"
}
.hero-title{font-size:90px}
}

@media(max-width:768px){
main{
grid-template-columns:1fr;
grid-template-areas:
"main"
"location"
"stream"
"fans"
"download"
"ticket"
"invite";
padding:15px
}
.left-main{padding:30px 20px;min-height:500px}
.hero-title{font-size:60px;margin-left:0;margin-top:50px}
.hero-subtitle{font-size:24px;margin-left:0}
.hero-nav,.hero-footer{margin-left:0}
.hero-footer{flex-wrap:wrap;margin-top:50px}
.about-ticket{flex-direction:column;gap:20px;align-items:flex-start}
.text-group{padding:0 10px}
.text-group a{font-size:12px}
}