body{

    margin:0;

    padding:0;

    box-sizing:border-box;

    background-color: #2b2b2b;

    overflow: hidden;
}

#main-container{

    width:100%;

    height:100vh;

    display:flex;

    justify-content:center;

    align-items:center;

}

/*RADIO*/

#radio{

    width:380px;

    height:320px;

    display:flex;
    justify-content:center;
    align-items:end;

    background-color: #ABB8BD;

    border-bottom: #070707 17px solid;

    border-radius: 100% 100% 0% 0%;

    border-bottom-right-radius: 5%;

    border-bottom-left-radius: 5%;

    box-shadow: 0 0 20px #000;

    box-shadow: inset 0 0 10px #000;

}

#antena{

    width: 8px;

    height: 150px;

    background-color: #2F3941;

    position: absolute;

    top: calc(50% - 295px);

    left: calc(50% - 40px);

    border-radius: 5px 5px 2px 2px ;

    box-shadow: inset -2px 0px 3px #000;
    
    z-index: -1;

}

#rueda-VOL{

    width: 50px;

    height: 40px;

    display: flex;

    justify-content: center;

    background-color: #2D3A3D;

    position: absolute;

    top: calc(50% - 180px);

    left: calc(50% + 20px);

    border-radius: 5px;

    box-shadow: inset -5px 0px 10px #000;

    z-index: -1;
  
}

#rueda{

    width: 30px;

    height: 15px;

    background-color: #1d1c1c;

    position: absolute;

    top: calc(50% - 35px);

    border-radius: 5px 5px 0px 0px;
    
    box-shadow: inset 0 0 20px #000;

    transition: all 0.2s linear;

    z-index: 1;
}

#rueda:hover{

    cursor: pointer;

    background-color: #0bd4d8;

    box-shadow: inset 0 0 20px #0bd4d8;

}


#radio-face{

    display: grid;

    
    grid-template-columns: 1fr 1fr 1fr;
    
    

    align-items: center;


    width:240px;

    height:200px;

    background-color: #2D3A3D;

    border-top: 5px solid #0bd4d8;

    border-left: 5px solid #0bd4d8;

    border-right: 5px solid #0bd4d8;

    border-radius: 100% 100% 0% 0%; 

}


/*Logo Aperture Science

#svg-logo img{

    width: 150px;
    height: 150px;

    top: calc(50% - 30px);
    right:  calc(50% - 70px);

    position: absolute;

    z-index: 1;

}

*/
#triangle-logo{

    width: 50px;
    height: 50px;

    right:  calc(50% + 30px);

    clip-path: polygon(10% 10%, 90% 10%, 50% 50%, 10% 90%);


    /*https://unused-css.com/tools/clip-path-generator*/

    border-radius: 100px;
    

    background-color: #1E292C;

    position: absolute;
   

}

#triangle-logo2{

    width: 50px;
    height: 50px;


    top: calc(50% - 10px);
    right:  calc(50% + 15px);

    rotate: 48deg;


    clip-path: polygon(10% 10%, 90% 10%, 50% 50%, 10% 90%);


    /*https://unused-css.com/tools/clip-path-generator*/

    border-radius: 100px;
    
    background-color: #1E292C;

    position: absolute;
   

}

#triangle-logo3{

    width: 50px;
    height: 50px;


    top: calc(50% - 35px);
    right:  calc(50% - 22px);

    rotate: 90deg;
    


    clip-path: polygon(10% 10%, 90% 10%, 50% 50%, 10% 90%);


    /*https://unused-css.com/tools/clip-path-generator*/

    border-radius: 100px;
    
    background-color: #1E292C;

    position: absolute;
   

}

#triangle-logo4{

    width: 50px;
    height: 50px;


    top: calc(50% - 25px);
    right:  calc(50% - 59px);

    rotate: 170deg;


    clip-path: polygon(10% 10%, 90% 10%, 50% 50%, 10% 90%);


    /*https://unused-css.com/tools/clip-path-generator*/

    border-radius: 100px;
    
    background-color: #1E292C;

    position: absolute;
   
   

}

#triangle-logo5{

    width: 50px;
    height: 50px;

    top: calc(50% + 20px);
    right:  calc(50% - 90px);

    rotate: 185deg;

    clip-path: polygon(10% 10%, 90% 10%, 50% 50%, 10% 90%);


    /*https://unused-css.com/tools/clip-path-generator*/

    border-radius: 100px;
    
    background-color: #1E292C;

    position: absolute;
   

}

#speaker-left{

    width: 68px;

    height: 87px;

    grid-column: 1;

    border-radius: 50% 7% 7% 7%;

    justify-self: center;
    align-self: self-end;

    margin-bottom: 10px;

    background-color: #032e44;

    box-shadow: inset 0 0 20px #000;

    z-index: 5;


    background:
    radial-gradient(black 15%, transparent 16%) 0 0,
    radial-gradient(black 15%, transparent 16%) 8px 8px,
    radial-gradient(rgba(255,255,255,.1) 15%, transparent 20%) 0 1px,
    radial-gradient(rgba(255,255,255,.1) 15%, transparent 20%) 8px 9px;
    background-color:#282828;
    background-size:16px 16px;

    /*by Atle Mo (design), Lea Verou (code)*/

}

#speaker-right{

    width: 68px;

    height: 87px;

    grid-column: 3;

    border-radius: 7% 50% 7% 7%;

    justify-self: center;
    align-self: self-end;

    margin-bottom: 10px;

    box-shadow: inset 0 0 20px #000;

    z-index: 5;


    background:
    radial-gradient(black 15%, transparent 16%) 0 0,
    radial-gradient(black 15%, transparent 16%) 8px 8px,
    radial-gradient(rgba(255,255,255,.1) 15%, transparent 20%) 0 1px,
    radial-gradient(rgba(255,255,255,.1) 15%, transparent 20%) 8px 9px;
    background-color:#282828;
    background-size:16px 16px;

    /*by Atle Mo (design), Lea Verou (code)*/

}

#canal-radio{

    width: 70px;

    height: 40px;

    grid-column: 2;

    

    text-align: center;
    align-content: center;

    border-top-left-radius: 100%;
    border-top-right-radius: 100%;
    border-bottom-left-radius: 20%;
    border-bottom-right-radius: 20%;

 
    
    justify-self: center;
    align-self: self-end;

    
    box-shadow: inset #000 0 0 10px;
    background-color: #1d1c1c;

    font-family: Roboto, sans-serif;
    font-weight: 700;

    z-index: 5;
    
    
}

#text-emision{
    font-family: 'Arial Black', sans-serif;

    font-size: 12px;

    color: #1d1c1c;

    margin-top: 5px;

    text-align: center;

    letter-spacing: 1px;

    transition: all 0.2s linear;
}



#play-button{

    appearance: none;

    width:40px;

    height:40px;

    box-shadow: 0 0 10px #000;

    border-radius: 50%;

    cursor: pointer;

    grid-column: 2;
    grid-row: 2;

    justify-self: center;
    align-self: self-end;
    
    margin-bottom: 10px;

    background-color: #032e44;

    transition: all 0.2s linear;

    z-index: 1;
    

}

#play-button:checked {

    appearance: none;

    background-color: #0AF2F7;

    box-shadow: 0 0 30px #0AF2F7;
    
    transform: scale(0.95);
}

#play-button:checked ~ #canal-radio #text-emision {
    text-shadow: #0bd4d8 0 0 5px;
}