@import "/src/css/variables.css";
@import "/src/css/lodes.css";
@import "/src/css/fonts.css";

/* F O R M A T */
.className {
    z-index: 100;
    background-color: white;
    color: #000;

    margin: 0;
    margin-top: 0;
    padding: 0;
    padding-top: 0;

    height: 100px;
    width: 100px;

    position: relative;
    top: 0;
    left: 0;

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

    font-size: var(--tSmall);
    font-weight: normal;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 1px;

    border: 1px solid var(--black);
    border-radius: var(--borderRadius);
    box-shadow: var(--cBoxShadow);

    cursor: pointer;
    transition: var(--transition);
}

/* C O L O R - C L A S S E S */
.textPrimary {
    color: var(--cPrimary) !important;
}

.textSecondary {
    color: var(--cSecondary) !important;
}

.textDecor {
    color: var(--cDecor) !important;
}

.textDecor2 {
    color: var(--cDecor2) !important;
}

.bgPrimary {
    background-color: var(--cPrimary) !important;
}

.bgSecondary {
    background-color: var(--cSecondary) !important;
}

.bgDecor {
    background-color: var(--cDecor) !important;
}

.bgDecor2 {
    background-color: var(--cDecor2) !important;
}

/* S I Z E - C L A S S E S */
.textBiggest {
    font-size: var(--tBiggest) !important;
}

.textBig {
    font-size: var(--tBig) !important;
}

.textDefault {
    font-size: var(--tDefault) !important;
}

.textSmall {
    font-size: var(--tSmall) !important;
}

.textTiny {
    font-size: var(--tTiny) !important;
}

/* W E I G H T - C L A S S E S */
.weightNormal {
    font-weight: normal;
}

.weightLight {
    font-weight: light;
}

.weightBold {
    font-weight: bold;
}

/* B A S E */ 
body {
    background-color: var(--cBackground);
    
    font-family: 'Roboto', normal;
    
    position: relative;
    
    margin: 0;
    padding: 0;

    padding-top: var(--navbarHeight);
}

h1, h2, h3, h4, h5, h6, a, p, span {
    margin: 0;
    padding: 0;
    padding-bottom: 5px;
}

button {
    background-color: var(--cDecor);
    color: var(--cText);

    margin: 0;
    margin-top: 0;
    padding: 15px 25px;

    width: fit-content;

    position: relative;
    top: 0;
    left: 0;

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

    font-size: var(--tTiny);
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 2.5px;

    border: none;
    border-radius: var(--borderRadius);
    box-shadow: var(--cBoxShadow);

    cursor: pointer;
    transition: var(--transition);   
}

button:hover {
    background-color: var(--cDecor2);
    box-shadow: 0px 15px 20px var(--cDecor2Trans);
    color: #fff;
    transform: translateY(-7px);
}

/* N A V I G A T I O N */
.navigation {
    z-index: 100;
    background: var(--cBackground2);

    height: 150px;
    width: 100%;

    position: fixed;
    top: 0;
    left: 0;

    display: flex;
    align-items: center; 
}

.navigation-theme div {
    cursor: pointer;
}