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

body{
background:#0f0f0f;
color:white;
}

/* HEADER */

header{

height:80px;

background:#181818;

display:flex;

justify-content:space-between;

align-items:center;

padding:0 40px;

border-bottom:1px solid rgba(255,255,255,.08);

}

.logo{

font-size:32px;

font-weight:800;

color:#ff2d55;

}

.profile{

font-weight:700;

}

/* LAYOUT */

.dashboard{

display:flex;

min-height:calc(100vh - 80px);

}

/* SIDEBAR */

aside{

width:260px;

background:#181818;

padding:40px 25px;

display:flex;

flex-direction:column;

gap:20px;

border-right:1px solid rgba(255,255,255,.08);

}

aside h3{

color:#ff2d55;

margin-bottom:20px;

letter-spacing:2px;

}

aside a{

text-decoration:none;

color:white;

padding:15px;

border-radius:12px;

transition:.3s;

}

aside a:hover{

background:#262626;

}

/* MAIN */

main{

flex:1;

padding:40px;

}

/* WELCOME */

.welcome{

margin-bottom:40px;

}

.welcome h1{

font-size:48px;

margin-bottom:10px;

}

.welcome p{

opacity:.75;

}

/* STATS */

.stats{

display:grid;

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

gap:25px;

margin-bottom:40px;

}

.stat-card{

background:#181818;

padding:35px;

border-radius:20px;

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

}

.stat-card h2{

font-size:42px;

color:#ff2d55;

margin-bottom:10px;

}

.stat-card p{

opacity:.75;

}

/* ANALYTICS */

.analytics{

display:grid;

grid-template-columns:
2fr 1fr;

gap:25px;

margin-bottom:40px;

}

.chart-card{

background:#181818;

padding:30px;

border-radius:20px;

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

}

.chart-card h3{

margin-bottom:25px;

}

/* FAKE CHART */

.fake-chart{

height:250px;

border-radius:15px;

background:
linear-gradient(
180deg,
rgba(255,45,85,.4),
rgba(255,45,85,.05)
);

position:relative;

overflow:hidden;

}

.fake-chart::before{

content:"";

position:absolute;

bottom:0;

left:0;

width:100%;

height:100%;

background:

linear-gradient(
to right,
transparent 0%,
transparent 10%,
rgba(255,255,255,.08) 10%,
rgba(255,255,255,.08) 11%,
transparent 11%
);

background-size:80px 100%;

}

/* CIRCLE CHART */

.circle-chart{

width:220px;

height:220px;

margin:auto;

border-radius:50%;

background:

conic-gradient(
#ff2d55 0 70%,
#262626 70% 100%
);

}

/* VIDEOS */

.videos{

background:#181818;

padding:30px;

border-radius:20px;

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

}

.videos h2{

margin-bottom:25px;

}

table{

width:100%;

border-collapse:collapse;

}

th{

text-align:left;

padding:18px;

background:#262626;

}

td{

padding:18px;

border-bottom:1px solid rgba(255,255,255,.06);

}

tr:hover{

background:#202020;

}

/* MOBILE */

@media(max-width:1200px){

.stats{

grid-template-columns:
1fr 1fr;

}

.analytics{

grid-template-columns:1fr;

}

}

@media(max-width:900px){

.dashboard{

flex-direction:column;

}

aside{

width:100%;

border-right:none;

border-bottom:1px solid rgba(255,255,255,.08);

}

}

@media(max-width:768px){

header{

padding:20px;

}

main{

padding:20px;

}

.stats{

grid-template-columns:1fr;

}

.welcome h1{

font-size:32px;

}

table{

display:block;

overflow-x:auto;

}

}