/* main.css */
body:not(.translations-loaded) {
    display: none;
}

@font-face {
    font-family: regularFont;
    src: url("../fonts/Montserrat/static/Montserrat-Regular.ttf");
}

@font-face {
    font-family: semiBold;
    src: url("../fonts/Montserrat/static/Montserrat-SemiBold.ttf");
}

@font-face {
    font-family: mediumStyle;
    src: url("../fonts/Montserrat/static/Montserrat-Medium.ttf");
}

:root {
    --primary-color: rgba(96, 30, 41, 1);
    --primary-color-80pct: rgba(96, 30, 41, 0.8);
    --primary-color-50pct: rgba(96, 30, 41, 0.5);
    --primary-color-20pct: rgba(96, 30, 41, 0.2);
    --primary-color-10pct: rgba(96, 30, 41, 0.1);
    --secondary-color: rgba(222, 211, 205, 1);
    --secondary-color-90pct: rgba(222, 211, 205, 0.9);
    --secondary-color-50pct: rgba(222, 211, 205, 0.5);
    --secondary-color-20pct: rgba(222, 211, 205, 0.2);
    --secondary-color-10pct: rgba(222, 211, 205, 0.1);
}

body {
    margin: 0;
    padding: 0;
}

h1, h2, h3 {
    font-family: semiBold, serif;
    text-transform: uppercase;
    font-weight: normal;
    color: var(--primary-color);
}

h1 {
    font-size: 2em;
    letter-spacing: 0.2rem;
}

h2 {
    font-size: 2em;
    letter-spacing: 0.2rem;
}

h3 {
    font-size: 1.2em;
    letter-spacing: 0.1rem;
}

p {
    font-family: regularFont, sans-serif;
    letter-spacing: 0.1rem;
    line-height: 2.2;
}

.rounded {
    border-radius: 10px;
}

.splitter{
    margin: -20px 0 0;
    padding: 0;
    height: 1px;
    width: 133px;
    background-color: var(--primary-color);
    transition: width 1s ease;
}

.home-section:hover .splitter {
    width: 80%;
}

.pattern-bg{
    background: url("../resources/pattern.svg") fixed;
    background-size: cover;
}

/* Dark mode styles */
.dark-mode {
    background-color: rgba(10, 10, 10, 1);
    transition: 500ms ease-in-out background-color;
    color: #fff;
}

/* Light mode styles */
.light-mode {
    background-color: #fff;
    color: #333;
}

.body-container{
    width: 100%;
    height: 100%;
    padding-inline: 0;
    margin: 0;
}

*, *::before, *::after {
    box-sizing: border-box;
}

/* Mobile styles */
@media only screen and (max-width: 880px) {

}