* {
    box-sizing:border-box;
}


html, body {

    margin:0;

    width:100%;

    height:100%;

    overflow:hidden;

    background:#020202;

    font-family:"Courier New", monospace;

}



.transmission-room {


    width:100vw;

    height:100vh;


    position:relative;


    display:flex;

    justify-content:center;

    align-items:center;


    background:


    radial-gradient(

    ellipse at 50% 45%,

    #3a2918 0%,

    #171008 35%,

    #030303 80%

    );


    overflow:hidden;

}







/* atmosphere */


.atmosphere {


    position:absolute;

    inset:0;


    background:


    radial-gradient(

    circle at center,

    rgba(255,210,130,.18),

    transparent 45%

    );


    filter:blur(40px);


}



.transmission-room::after {


    content:"";

    position:absolute;

    inset:0;


    background-image:

    radial-gradient(

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

    transparent 1px

    );


    background-size:90px 90px;


    opacity:.2;

}






/* BRAND */


.brand {


    position:absolute;


    top:45px;


    left:50%;


    transform:translateX(-50%);


    text-align:center;


    z-index:5;


}



.brand h1 {


    margin:0;


    color:#aaa;


    font-size:42px;


    letter-spacing:16px;


    font-weight:400;


}



.brand p {


    margin-top:12px;


    color:#555;


    letter-spacing:6px;


}








/* DESK */


.studio-table {


    width:1250px;


    height:650px;


    position:relative;


    z-index:2;


    padding:45px;



    background:


    linear-gradient(

    140deg,

    #3b2717,

    #100b06

    );


    border-radius:20px;


    box-shadow:


    0 100px 150px #000,


    inset 0 0 120px #000;


    transform:


    perspective(1300px)

    rotateX(18deg);


}







.equipment {


    display:flex;


    justify-content:center;


    align-items:center;


    gap:30px;


}







/* DECKS */


.deck {


    width:360px;


    height:430px;


    background:


    linear-gradient(

    145deg,

    #303030,

    #101010

    );


    border-radius:15px;


    border:2px solid #444;


    padding:20px;


    box-shadow:


    inset 0 0 60px black;


}



.deck-top {


    height:340px;


    position:relative;


}



.deck span {


    display:block;


    text-align:center;


    color:#555;


    letter-spacing:4px;


    font-size:11px;


}








/* VINYL */


.vinyl {


    position:absolute;


    width:270px;


    height:270px;


    left:25px;


    top:35px;


    border-radius:50%;


    background:


    repeating-radial-gradient(

    circle,

    #020202,

    #181818 3px,

    #020202 6px

    );


    display:flex;


    align-items:center;


    justify-content:center;


}



.label {


    width:65px;


    height:65px;


    background:#888;


    border-radius:50%;


    color:#111;


    display:flex;


    align-items:center;


    justify-content:center;


    text-align:center;


    font-size:10px;


}








/* TONE ARM */


.tonearm {


    position:absolute;


    right:25px;


    top:75px;


}



.base {


    width:32px;


    height:32px;


    border-radius:50%;


    border:4px solid #999;


    background:#111;


}



.arm {


    position:absolute;


    width:100px;


    height:70px;


    top:25px;


    left:10px;


    border-right:5px solid #aaa;


    border-bottom:5px solid #aaa;


    border-radius:0 0 90px 0;


}



.needle {


    position:absolute;


    width:25px;


    height:10px;


    background:#ddd;


    left:15px;


    bottom:-70px;


}








/* MIXER */


.mixer {


    width:300px;


    height:400px;


    background:#151515;


    border:2px solid #555;


    padding:25px;


    box-shadow:

    inset 0 0 60px #000;


}



.mixer h2 {


    text-align:center;


    font-size:12px;


    letter-spacing:5px;


    font-weight:400;


}



.radio {


    text-align:center;


    margin:30px 0;


    color:#666;


    line-height:25px;


}



.channels {


    display:flex;


    justify-content:space-around;


}



.channel {


    height:150px;


    width:35px;


    border-left:3px solid #444;


    border-right:3px solid #444;


}







/* DESK ITEMS */


.desk-items {


    position:absolute;


    bottom:35px;


    left:50px;


    right:50px;


    display:flex;


    justify-content:space-between;


}



.sleeve,

.note,

.cassette {


    background:#151515;


    border:1px solid #333;


    padding:15px;


    width:120px;


    height:90px;


    color:#777;


    font-size:11px;


}






/* ON AIR */


.on-air {


    position:absolute;


    bottom:35px;


    right:50px;


    color:#777;


    letter-spacing:4px;


}* {
    box-sizing:border-box;
}


html, body {

    margin:0;

    width:100%;

    height:100%;

    overflow:hidden;

    background:#020202;

    font-family:"Courier New", monospace;

}



.transmission-room {


    width:100vw;

    height:100vh;


    position:relative;


    display:flex;

    justify-content:center;

    align-items:center;


    background:


    radial-gradient(

    ellipse at 50% 45%,

    #3a2918 0%,

    #171008 35%,

    #030303 80%

    );


    overflow:hidden;

}







/* atmosphere */


.atmosphere {


    position:absolute;

    inset:0;


    background:


    radial-gradient(

    circle at center,

    rgba(255,210,130,.18),

    transparent 45%

    );


    filter:blur(40px);


}



.transmission-room::after {


    content:"";

    position:absolute;

    inset:0;


    background-image:

    radial-gradient(

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

    transparent 1px

    );


    background-size:90px 90px;


    opacity:.2;

}






/* BRAND */


.brand {


    position:absolute;


    top:45px;


    left:50%;


    transform:translateX(-50%);


    text-align:center;


    z-index:5;


}



.brand h1 {


    margin:0;


    color:#aaa;


    font-size:42px;


    letter-spacing:16px;


    font-weight:400;


}



.brand p {


    margin-top:12px;


    color:#555;


    letter-spacing:6px;


}








/* DESK */


.studio-table {


    width:1250px;


    height:650px;


    position:relative;


    z-index:2;


    padding:45px;



    background:


    linear-gradient(

    140deg,

    #3b2717,

    #100b06

    );


    border-radius:20px;


    box-shadow:


    0 100px 150px #000,


    inset 0 0 120px #000;


    transform:


    perspective(1300px)

    rotateX(18deg);


}







.equipment {


    display:flex;


    justify-content:center;


    align-items:center;


    gap:30px;


}







/* DECKS */


.deck {


    width:360px;


    height:430px;


    background:


    linear-gradient(

    145deg,

    #303030,

    #101010

    );


    border-radius:15px;


    border:2px solid #444;


    padding:20px;


    box-shadow:


    inset 0 0 60px black;


}



.deck-top {


    height:340px;


    position:relative;


}



.deck span {


    display:block;


    text-align:center;


    color:#555;


    letter-spacing:4px;


    font-size:11px;


}








/* VINYL */


.vinyl {


    position:absolute;


    width:270px;


    height:270px;


    left:25px;


    top:35px;


    border-radius:50%;


    background:


    repeating-radial-gradient(

    circle,

    #020202,

    #181818 3px,

    #020202 6px

    );


    display:flex;


    align-items:center;


    justify-content:center;


}



.label {


    width:65px;


    height:65px;


    background:#888;


    border-radius:50%;


    color:#111;


    display:flex;


    align-items:center;


    justify-content:center;


    text-align:center;


    font-size:10px;


}








/* TONE ARM */


.tonearm {


    position:absolute;


    right:25px;


    top:75px;


}



.base {


    width:32px;


    height:32px;


    border-radius:50%;


    border:4px solid #999;


    background:#111;


}



.arm {


    position:absolute;


    width:100px;


    height:70px;


    top:25px;


    left:10px;


    border-right:5px solid #aaa;


    border-bottom:5px solid #aaa;


    border-radius:0 0 90px 0;


}



.needle {


    position:absolute;


    width:25px;


    height:10px;


    background:#ddd;


    left:15px;


    bottom:-70px;


}








/* MIXER */


.mixer {


    width:300px;


    height:400px;


    background:#151515;


    border:2px solid #555;


    padding:25px;


    box-shadow:

    inset 0 0 60px #000;


}



.mixer h2 {


    text-align:center;


    font-size:12px;


    letter-spacing:5px;


    font-weight:400;


}



.radio {


    text-align:center;


    margin:30px 0;


    color:#666;


    line-height:25px;


}



.channels {


    display:flex;


    justify-content:space-around;


}



.channel {


    height:150px;


    width:35px;


    border-left:3px solid #444;


    border-right:3px solid #444;


}







/* DESK ITEMS */


.desk-items {


    position:absolute;


    bottom:35px;


    left:50px;


    right:50px;


    display:flex;


    justify-content:space-between;


}



.sleeve,

.note,

.cassette {


    background:#151515;


    border:1px solid #333;


    padding:15px;


    width:120px;


    height:90px;


    color:#777;


    font-size:11px;


}






/* ON AIR */


.on-air {


    position:absolute;


    bottom:35px;


    right:50px;


    color:#777;


    letter-spacing:4px;


}