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

html,body{

width:100%;
height:100%;
overflow:hidden;

}

body{

background-color:#080808;

font-family:'IBM Plex Mono', monospace;

color:#ededed;

overflow:hidden;

/* GRID */

background-image:

linear-gradient(rgba(90,18,35,.18) 1px, transparent 1px),

linear-gradient(90deg, rgba(90,18,35,.18) 1px, transparent 1px),

radial-gradient(#1f1f1f 1px, transparent 1px);

background-size:

40px 40px,

40px 40px,

18px 18px;

}
/* CRT SCREEN */

body::after{

content:"";

position:fixed;

top:0;
left:0;

width:100%;
height:100%;

pointer-events:none;

background:

repeating-linear-gradient(

0deg,

rgba(255,255,255,.02),

rgba(255,255,255,.02) 1px,

transparent 2px,

transparent 4px

);

opacity:.28;

}

/* =======================
      DASHBOARD
======================= */

.desktop{

width:100vw;
height:100vh;

padding:20px;

display:grid;

grid-template-rows:
170px
80px
1fr
40px;

gap:20px;

}

/* =======================
      BANNER
======================= */

.banner{

position:relative;

border:2px solid #444;

overflow:hidden;

}

.banner img{

width:100%;
height:100%;
object-fit:cover;

filter:brightness(.45);

}

.title{

position:absolute;

top:50%;

left:50%;

transform:translate(-50%,-50%);

text-align:center;

}

.title h1{

font-size:50px;

letter-spacing:8px;

color:white;

}

.title p{

margin-top:10px;

color:#d2b7bd;

}

/* =======================
      MENU
======================= */

.menu{

display:grid;

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

gap:10px;

}

.menu button{

background:#141414;

border:2px solid #5c1d2a;

color:#ddd;

font-family:'IBM Plex Mono', monospace;

transition:.25s;

}

.menu button:hover{

background:#5c1d2a;

box-shadow:0 0 15px #7f2b3c;

}

.menu button:hover{

background:#5f1a28;

color:white;

}

/* =======================
      WIDGETS
======================= */

.widgets{

display:grid;

grid-template-columns:1fr 1fr;

gap:18px;

align-items:start;

}

.widget{

background:#121212;

border:2px solid #5c1d2a;

box-shadow:

0 0 12px rgba(0,0,0,.7),

inset 0 0 20px rgba(255,255,255,.02);

padding:14px;

min-height:120px;

transition:.25s;

}

.widget h3{

color:#d46b86;

margin-bottom:10px;

}
.widget:hover{

transform:translateY(-3px);

transition:.25s;

}

/* =======================
      FOOTER
======================= */

footer{

display:flex;

align-items:center;

justify-content:center;

color:#777;

border-top:1px solid #333;

}

/* =======================
      WINDOWS
======================= */

.window{

display:none;

position:fixed;

top:50%;
left:50%;

transform:translate(-50%,-50%);

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

height:500px;
max-height:80vh;

background:#111;

border:2px solid #5c1d2a;

box-shadow:
0 0 30px rgba(0,0,0,.9),
0 0 12px rgba(92,29,42,.45);

z-index:999;

overflow-y:auto;

}

/* =======================
      TOP BAR
======================= */

.topbar{

background:#5b0d1b;

padding:12px;

font-weight:bold;

display:flex;

justify-content:space-between;

align-items:center;

color:white;
}
.topbar{

background:linear-gradient(

90deg,

#4b0917,

#6f1023

);

}

/* =======================
      INSIDE
======================= */

.inside{

padding:25px;

line-height:1.8;

}

.inside img{

width:220px;

display:block;

margin:auto;

margin-bottom:20px;

border:2px solid #444;

}

.inside h2{

color:#d46b86;

margin:20px 0 10px;

}

.inside ul{

padding-left:25px;

}

.inside li{

margin:10px 0;

}

a{

color:#d46b86;

}

a:hover{

color:white;

}

/* =======================
      SCROLLBAR
======================= */

::-webkit-scrollbar{

width:10px;

}

::-webkit-scrollbar-track{

background:#111;

}

::-webkit-scrollbar-thumb{

background:#5b0d1b;

}

/* =======================
      MOBILE
======================= */

@media(max-width:900px){

.desktop{

grid-template-rows:

150px
auto
1fr
30px;

}

.menu{

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

}

.widgets{

grid-template-columns:1fr;

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

}

.title h1{

font-size:35px;

}

.window{

height:75vh;

}

}