@import url('https://fonts.googleapis.com/css2?family=Frank+Ruhl+Libre:wght@300;400;500;600;700;800;900&family=Signika+Negative:wght@300;400;500;600;700&display=swap');

:root{
    /* global variabels */
    --main-brand-color: #a95514; /* old #9f5214 */
    --primary-color: #000000;
    --secondary-color: #32302c;
    --light-secondary-color: #9b7128;
    --glow-color:#5c3601;
    --text-color: #ffffff;
    --secondary-headline-color: #dddddd;
    --secondary-text-color: #a3a1a1;
    --cct-border-color: #10100c;
    
    /* 3D object parameters */
    --light-3D-border: 3px solid #4f4a45;
    --dark-3D-border: 3px solid #343230;
    --shedow-3D: 6px 6px 12px #282828ee;

    /* general screen parameters */
    --my-content-width: 1100px;
    --my-media-max-width: 1000px;
    --logo-img-width: 500px;
    --bg-pattern: url("../Images/mon_pattern.png");
}


html {
    scroll-behavior: smooth;
}

*{
    margin: 0;
    padding: 0;
}
body {
    min-height: 100vh;
    background-color: var(--primary-color);
    display: flex;
    justify-content: center;
    align-items: center;
}

#content-container{
    max-width: var(--my-content-width);
    width: 99%;
    min-height: 100vh;
    background-image: var(--bg-pattern);
    background-repeat: repeat;
    background-attachment: fixed; 
    background-size: auto; 
    background-attachment: fixed;
    font-family: 'Signika Negative', Arial, sans-serif;
    font-size: 18px;
    color: var(--text-color);
    text-size-adjust: none;
    border-left: solid 5px var(--cct-border-color);
    border-right: solid 5px var(--cct-border-color);
}

a {
    color: var(--main-brand-color);
    text-decoration: none;
    font-weight: normal;
}

.glow {
    font-size: 34px;
    color: var(--main-brand-color);
    text-shadow: 
      0 0 10px var(--glow-color),
      0 0 15px var(--glow-color),
      0 0 20px var(--glow-color),
      0 0 25px var(--glow-color),
      0 0 30px var(--glow-color),
      0 0 35px var(--glow-color);
    animation: glow 3s linear infinite;
}

@keyframes glow {
    0%, 100% {
      text-shadow: 
        0 0 10px var(--glow-color),
        0 0 15px var(--glow-color),
        0 0 20px var(--glow-color),
        0 0 25px var(--glow-color),
        0 0 30px var(--glow-color),
        0 0 35px var(--glow-color);
    }
    50% {
      text-shadow: none;
    }
}
.no_glow{display: none;}

h1{
    font-size: 34px;
    text-align: center;
    color: var(--main-brand-color);
}
h2{
    margin-top: 70px;
    margin-bottom: 25px;
    color: var(--main-brand-color);
    font-size: 30px;
    text-align: center;
    text-shadow: 1px 1px 0px var(--glow-color);
}
h3{
    font-size: 20px;
    color: var(--secondary-text-color);
    text-shadow: 1px 1px 0px var(--glow-color);
}
h4{
    margin-top: 10px;
    margin-bottom: 10px;
    color: var(--secondary-headline-color);
    font-size: 22px;
    font-weight: bold;
}
h5{
    margin-top: 10px;
    margin-bottom: 10px;
    color: var(--secondary-headline-color);
    font-size: 20px;
    font-weight: bold;
    word-spacing: 0.25em;
}
h6{
    margin-top: 10px;
    margin-bottom: 10px;
    color: var(--primary-text-color);
    font-size: 18px;
    word-spacing: 0.25em;
}

#page_content{
    margin-top: 50px;
}
.subheading{
    margin-top: 25px;
    margin-bottom: 25px;
    color:var(--main-brand-color)
}

.threeD-object{
    border-top: var(--light-3D-border);
    border-left: var(--light-3D-border);
    border-radius: 20px;
    box-shadow: var(--shedow-3D);
    page-break-inside: avoid;
}
.circle {
    position: absolute;
    width: 8px;
    height: 8px;
    background-color: rgba(68, 65, 61, 0.871);
    border-radius: 50%;
    box-shadow: 0 0 5px rgba(36, 36, 36, 0.3);
    z-index: 1; 
}
.circle::before,
.circle::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  box-shadow: 0 0 2px rgba(34, 34, 34, 0.3); /* Add a subtle shadow */
  border-radius: inherit;
}
.circle::before {top: 0; left: 0;}
.circle::after {bottom: 0;right: 0;}

.top-left {top: 12px; left: 12px;}
.top-right {top: 12px; right: 12px;}
.bottom-left {bottom: 12px; left: 12px;}
.bottom-right {bottom: 12px; right: 12px;}

@media print {
    @page {
        size: portrait;
        margin: 15 mm;
        .print-page-break {
            page-break-before: always; 
            /* or page-break-after: always; for after the element */
        }
    }
    #content-container{
        font-size: 12px;
        border-left: none;
        border-right: none;
    }
    .print-page-break {
        page-break-before: always;
    }

    .no_glow {display: block;}
    .glow {display: none;}

    h1 {font-size: 24px;}
    h2 {
        margin-top: 60px;
        font-size: 20px;
        text-shadow: none;
    }
    h3 {font-size: 14px;}
    h4 {font-size: 12px;}
    h5 {font-size: 12px;}
}



@media screen and (max-width: 900px){
    #content-container{font-size: 16px;}
    .glow{font-size: 28px;}    
    h1 {font-size: 28px;}
    h2 {font-size: 26px;}
    h3 {font-size: 20px;}
    h4 {font-size: 18px;}
    h5 {font-size: 18px;}
}

@media screen and (max-width: 250px){
    #content-container{font-size: 16px;}  
    .glow{font-size: 20px;}    
    h1 {font-size: 20px;}
    h2 {font-size: 26px;}
    h3 {font-size: 20px;}
    h4 {font-size: 18px;}
    h5 {font-size: 18px;}
}