@tailwind base;
@tailwind components;
@tailwind utilities;


: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);
    --black: rgb(0,0,0);
    --orange: rgb(171, 76, 38)
}
.body {
    padding:0; margin:0;
    max-width: 1440px;
    display: flex;
    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 { background: var(--darkGreenBg)}
.divtrianglegto:hover .div { background: var(--orange)}
.divtrianglegto .shape {
    background: url('../images/trianglelgreen.svg');
    background-position:top center;
    background-size: cover;
}
.divtrianglegto:hover .shape {
    background: url('../images/triangleorange.svg');
    background-position:top center;
    background-size: cover;
}


.divpolygonlgto .div { background: var(--lightGreen)}
.divpolygonlgto:hover .div { background: var(--orange)}
.divpolygonlgto .shape {
    background: url('../images/polygonlgreen.svg');
    background-position:top center;
    background-size: cover;
}
.divpolygonlgto:hover .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 ===================== */
.flex, .lflex { display: flex}
.grid {display: grid}
.hidden, .dhide {display: none}
.mhide {display:block}
.inverted {rotate: 180deg;}
.z-1 {z-index:1;}

.w10 {width:10%}
.w15 {width:15%}
.w20 {width:20%}
.w25 {width:25%} 
.w30 {width:30%}
.w40 {width:40%}
.w50 {width:50%}
.w60 {width:60%}
.w70 {width:70%}
.w75 {width:75%}
.w80 {width:80%}
.w85 {width:85%}
.w90 {width:90%}
.w100 {width:100%}

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

/* ================= PADDINGS =================== */
.p10 {padding: 10px}
.p20 {padding: 20px}