::-webkit-scrollbar {
    width: 12px;
}



:root {
    --color-test : #c0b2b220 ;
    --text-color: #fff ;
    --main-color: #12487d;
    --secondary-color: #000000 ;
    --background-color: #0c3053;
    --background-secondary-color: #5b8ec2;
    --background-third-color: #0c3053 ;
    --highlight-color: #8aa6c2;


    --backgroundLgt-color: #f57d89;
    

    --font-sizeBIG: 70px;
    --font-size: 30px;
    --font-sizeSMALL: 15px;

    --Content-margin: 5px ;
    --Content-radius: 10px ;
    --Content-height: 2000px ;
    --Content-width: 750px;

    --transition-button: .25s ease-in-out ;

    --main-border: 2px solid;
    --Content-border: 2px dashed;
    --Content-padding: 10px;
    --Body-padding: 100px;
}

::selection {
    background: var(--highlight-color);
}


* {
    scrollbar-width: none;
    scrollbar-color: var(--background-color) var(--secondary-color);
}


::-webkit-scrollbar {
    width: 12px;
}


::-webkit-scrollbar-track {
    background: var(--secondary-color); 
}


::-webkit-scrollbar-thumb {
    background: var(--background-color); 
    border-radius: 10px;
    border: 3px solid var(--secondary-color); 
}

#ConContainer {
    height: 100%;
    width: 100%;
    padding: calc(var(--Content-padding) * 2) !important;
    overflow-y: auto;
}


.ContentCollapseBtn {
    margin-bottom: calc(var(--Content-margin) * 2);
    height: calc(var(--Content-height) / 6);
    width: 100%;

    color: var(--text-color);
    font-family: "Silkscreen";
    font-size: var(--font-size);
    border: none;


     --s: 100px; /* control the size*/
    
    --_g: 
       var(--background-color) 0%  5% ,var(--main-color) 6%  15%,var(--background-color) 16% 25%,var(--main-color) 26% 35%,var(--background-color) 36% 45%,
       var(--main-color) 46% 55%,var(--background-color) 56% 65%,var(--main-color) 66% 75%,var(--background-color) 76% 85%,var(--main-color) 86% 95%,
       #0000 96%;
    background:
      radial-gradient(50% 50% at 100% 0,var(--_g)),
      radial-gradient(50% 50% at 0 100%,var(--_g)),
      radial-gradient(50% 50%,var(--_g)),
      radial-gradient(50% 50%,var(--_g)) calc(var(--s)/2) calc(var(--s)/2)
      var(--background-color);
    background-size: var(--s) var(--s);
}


.ContentCollapseBtn:hover {
    Transform: scale(1.03); 
}

.Contentcontent {
    display: none;
    overflow: hidden;

    flex-direction: column;
    
    
    background-color: var(--background-color);


    border: var(--Content-border) var(--secondary-color);

    padding: var(--Content-padding);
    margin-bottom:calc(var(--Content-margin) * 2) ;
}