@font-face {
    font-family: pixel;
    src: url('./pixelgridtrial-lineskyboldxl.otf') format('opentype');
}
:root {
    --green : rgb(0, 128,128);
    --lightGreen: rgb(58, 152, 151);
    --deepGreen: rgba(8, 45, 35);
    --darkGreenBg: rgb(0, 128, 128);
    --lightGrey: rgb(226, 222, 217);
    --darkGrey: rgb(89, 101, 72);
    --greyBg: rgb(210, 210, 220);
    --black: rgb(0,0,0);
    --orange: rgb(171, 76, 38)
}
body {
    padding:0; margin:0;
    max-width: 1440px;
    justify-content: center;
    font-family: Inter;
}

/* ============ BACKGROUNDS ================ */
.bg-lg { background: var(--lightGreen)}
.bg-dg { background: var(--darkGreenBg)}
.bg-ddg { background: var(--deepGreen)}
.bg-og { background: var(--orange)}
.bg-grey { background: var(--lightGrey)}
.bg-btn {background: rgb(110, 170, 91)}

/* ============== SHAPES.     SHAPES. ================ */
.divtrianglegto .div, .divtriangleg .div { background: var(--darkGreenBg)}
.divtrianglegto:hover .div, .divtrianglegto.active-section .div { background: var(--orange)}
.divtrianglegto .shape, .divtriangleg .shape {
    background: url('../images/trianglelgreen.svg');
    background-position:top center;
    background-size: cover;
}
.divtrianglegto:hover .shape, .divtrianglegto.active-section .shape {
    background: url('../images/triangleorange.svg');
    background-position:top center;
    background-size: cover;
}


.divpolygonlgto .div, .divpolygonlg .div { background: var(--lightGreen)}
.divpolygonlgto:hover .div, .divpolygonlgto.active-section .div { background: var(--orange)}
.divpolygonlgto .shape, .divpolygonlg .shape {
    background: url('../images/polygonlgreen.svg');
    background-position:top center;
    background-size: cover;
}
.divpolygonlgto:hover .shape, .divpolygonlgto.active-section .shape {
    background: url('../images/polygonorange.svg');
    background-position:top center;
    background-size: cover;
}


.divtriangledg .div {background: var(--deepGreen)}
.divtriangledg .shape {
    background: url('../images/triangledarkGreen.svg');
    background-position: top center;
    background-size: cover;
}

/* =========== HOVERS =================== */
.hover-bg-og:hover {background: var(--orange)}

/* ============= COLOURS ====================*/
.tx-lgrey { color: var(--lightGrey)}
.tx-dgrey { color: var(--darkGrey)}
.tx-orange { color: var(--orange)}
.tx-lg { color: var(--lightGreen)}
.tx-dg { color: var(--deepGreen)}
.tx-og {color: var(--orange)}


/* ================== ALIGNMENTS =================*/
.text-center, .dcenter {text-align: center;}
.mcenter {text-align: left;}
.items-center {align-items: center;}
.justify-center {justify-content: center;}

/* ================== FONTS ===================== */
.uppercase {text-transform: uppercase;}

/* =============== LAYOUTS ===================== */
.inverted {rotate: 180deg;}

/* ================== BORDERS ================= */
.rounded {border-radius: 15px;}
.border {border: 2px solid var(--darkGrey)}


@media screen and (max-width: 1000px) {
    /*.divtriangleg .div, .divpolygonlg .div { background: var(--greyBg)}*/
    .divtriangledg, .divtriangledg button, a .bg-btn { font-size: 30px;}
    .divtriangledg .text-sm { font-size: 20px}