style.css

@font-face {
    font-family: "charan";
    src: url("/font/659dbdfd5a080be8d348316f_PPNeueMachina_-Light.ttf");
}
:root{
    --salmon: #fa8072;
    --black: #000;
    --white :#fff;
    --dsalmon:#532521;
    --dcyan: #1f2f32;
}
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
        /* font-family: "charan"; */
}
html , body{
    height: 100%;
    width: 100%;
}
*::selection
{
    background-color:var(--salmon);
}
body[theme="black"]
{
    background-color: var(--black);
    
    
}
body[theme="black"] .section
{
    color: var(--white);

    
    
}
body[theme="cyan"]
{
    background-color: rgb(156, 215, 215);
}
body[theme="cyan"] .section
{
    color: var(--black);
    
    
}
body[theme="white"]
{
    background-color: var(--white);
}
body[theme="white"] .section
{
    color: var(--black);
}
body[theme="salmon"]
{
    background-color: var(--salmon);
}
body[theme="salmon"]
{
    color: var(--dsalmon);
}
.videodiv
{
    clip-path:circle(var(--clip) at 50% 50%)
}