@font-face {
    font-family: "Oi";
    src: local("Oi"), url("Fonts/Oi-Regular.ttf"), format("truetype");
}

@font-face {
    font-family: "Groovy";
    src: local("Groovy"), url("Fonts/Groovy\ Orange.otf"), format("OpenType Font");
}

@font-face {
    font-family: "DotoBlack";
    src: local("DotoBlack"), url("Fonts/static/Doto-Black.ttf"), format("truetype");
}
@font-face {
    font-family: "Silkscreen";
    src: local("Silkscreen"), url("Fonts/Silkscreen-Regular.ttf"), format("truetype");
}




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



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


    --backgroundLgt-color: #f57d89;
    

    --font-sizeBIG: 70px;
    --font-size: 50px;
    --font-sizeSMALL: 15px;
    --font-sizeverySMall: 13px;

    --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;
}

.lightmode{
    --color-test : #c0b2b257 ;
    --text-color: #fff ;
    --main-color: #ffaeb6;
    --secondary-color: #ff0000 ;
    --background-color: #f57d89;
    --background-secondary-color: #F5D97D;
    --background-third-color: #f57d89 ;
    --highlight-color: #f1e1ac;

    --backgroundDrk-color: #0c3053;
}

body.lightmode {   
    background-image: url("/Images/Document.avif");
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-size: cover;
}

h1 {
    font-size: var(--font-size);
    font-family: "Groovy";
    color: var(--background-secondary-color);
    padding: 0px;
    margin: 0px;
    text-align: center;
}






p {
    font-family: "Silkscreen";
    font-size: var(--font-sizeSMALL);
    padding: 0px;
    margin: 0px;
    color: var(--text-color);
}

a {
    cursor: pointer;
    font-family: "DotoBlack";
    font-size: var(--font-sizeSMALL);
    padding: calc(var(--Content-padding) * 0.5);
    margin: var(--Content-margin);
    border-top: 3px solid #fff;
    border-left: 3px solid #fff ;
    border-bottom: 3px solid #7d7d7d;
    border-right: 3px solid #7f7d7d ;
    
    color: var(--text-color);
    background-color: #b3b3b3;

    text-decoration: none;

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

    transition: 0.1s linear;
}

a:hover {

    background-color: #979797;
    
    border-top: 3px solid #d6d3d3;
    border-left: 3px solid #d6d3d3 ;
    border-bottom: 3px solid #666666;
    border-right: 3px solid #666666 ;

    transition: 0.1s linear;
}


#StartContainer {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh; 
    display: flex;
    flex-direction: column;
    justify-content: center; 
    align-items: center;     
    z-index: 9999;           
}