/*@import url('https://fonts.googleapis.com/css?family=Muli&display=swap');*/
/*@import url('https://fonts.googleapis.com/css?family=Quicksand&display=swap');*/
:root {

    --bg-main: white;
    --text-color-main: black;

    --bg-main-alternate: #dff8eb;
    --text-color-alternate: #000000;

    --bg-standout: #133c55;
    --text-color-standout: white;

    --bg-header: #2E5266FF;
    --text-color-header: white;
    --text-color-header-hover: rgba(169, 169, 169, 0.32);

    --bg-sidebar: #6E8898FF;
    --text-color-sidebar: white;

    /*--font-family-header: 'Quicksand', sans-serif;*/
    /*--font-family-h: 'Quicksand', serif;*/
    --font-family-header: 'Tahoma';
    --font-family-h: 'Tahoma';


    --button-color-pasive-1: rgba(55, 114, 255, 0.49);
    --button-color-hard-1: #000049;
    --button-color-pressed-1: #00001e;

    --button-color-pasive-2: rgba(240, 56, 255, 0.49);
    --button-color-hard-2:#F038FF;
    --button-color-pressed-2: #541659;

    --button-color-pasive-3: rgba(239, 112, 157, 0.49);
    --button-color-hard-3:#EF709D;
    --button-color-pressed-3: #3d1d29;

    --button-color-pasive-6: rgba(119, 255, 126, 0.49);
    --button-color-hard-6: #209d00;
    --button-color-pressed-6: #0b2a00;

    --button-color-pasive-4: rgba(233, 246, 118, 0.49);
    --button-color-hard-4: #cfea08;
    --button-color-pressed-4: #373b11;

    --button-color-pasive-5: rgba(112, 228, 239, 0.49);
    --button-color-hard-5: #00676e;
    --button-color-pressed-5: #002123;
}


* {
    box-sizing: border-box;
}

html, body {
    margin: 0;
    height: 100%;
}

.padded_section {
    padding-top: 25px;
    padding-left: 50px;
    padding-right: 50px;
    padding-bottom: 100px
}

.short-padded_section {
    padding-top: 10px;
    padding-left: 10px;
    padding-right: 10px;
    padding-bottom: 10px
}

footer {
    background-color: white;
    font-family: var(--font-family-header);
    color: black;
    min-height: 100px;
}

.header_image {
    position: relative;
    text-align: center;

    /* color: black; */

    margin: 0;
    padding: 0;

    /* opacity: 0.5; */

    object-fit: cover;
    background-size:cover;
    min-height: 350px;
    width:100%;

    /*z-index: 999;*/
}

.project_title {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color:rgb(255, 255, 255);

    /*z-index: 999;*/
}


h1 {
    font-family: var(--font-family-h);
}

hr {
    border: none;
    height: 3px;
    /* Set the hr color */
    color: black; /* old IE */
    background-color: black; /* Modern Browsers */
    margin:0;
}

body {
    font-family: 'Muli', sans-serif;
    color: var(--text-color-main);
    background-color: var(--bg-main);
}

.alternate_section {
    background-color: var(--bg-main-alternate);
    color: var(--text-color-alternate);
}

.standout_section {
    background-color: var(--bg-standout);
    color: var(--text-color-standout);
}

.main_section {
    background-color: var(--bg-main);
    color: var(--text-color-main);
}




h1.titlename {
    font-family: var(--font-family-h);
    color: var(--text-color-main);
    padding-bottom: 5px;
    margin-bottom: 0;
    font-size: 50px;
}

h2.sectionTitle {
    font-family: var(--font-family-h);
    color: var(--text-color-main);
    font-size: 35px;
}

p.titleInfo {
    font-family: var(--font-family-h);
    color: var(--text-color-main);
    padding-top: 0;
    margin-top: 0;
    font-size: 25px;
}




/* COLOUR BUTTON HANDLERS*/

/**/

nav li a.blue {
    background-color: var(--button-color-pasive-1);
    color: black;
}

nav li a.blue:hover {
    background-color: var(--button-color-hard-1);
    color: white;
    border-color: black;
}

nav li a.blue:active {
    background-color: var(--button-color-pressed-1);
    color: white;
    border-color: black;
}

nav li a.purple {
    background-color: var(--button-color-pasive-2);
    color: black;
}

nav li a.purple:hover {
    background-color: var(--button-color-hard-2);
    color: white;
    border-color: black;
}

nav li a.purple:active {
    background-color: var(--button-color-pressed-2);
    color: white;
    border-color: black;
}

nav li a.green {
    background-color: var(--button-color-pasive-6);
    color: black;
}

nav li a.green:hover {
    background-color: var(--button-color-hard-6);
    color: white;
    border-color: black;
}

nav li a.green:active {
    background-color: var(--button-color-pressed-6);
    color: white;
    border-color: black;
}

nav li a.pink {
    background-color: var(--button-color-pasive-3);
    color: black;
}

nav li a.pink:hover {
    background-color: var(--button-color-hard-3);
    color: white;
    border-color: black;
}

nav li a.pink:active {
    background-color: var(--button-color-pressed-3);
    color: white;
    border-color: black;
}

nav li a.yellow {
    background-color: var(--button-color-pasive-4);
    color: black;
}

nav li a.yellow:hover {
    background-color: var(--button-color-hard-4);
    color: black;
    border-color: black;
}

nav li a.yellow:active {
    background-color: var(--button-color-pressed-4);
    color: white;
    border-color: black;
}

nav li a.turq {
    background-color: var(--button-color-pasive-5);
    color: black;
}

nav li a.turq:hover {
    background-color: var(--button-color-hard-5);
    color: white;
    border-color: black;
}

nav li a.turq:active {
    background-color: var(--button-color-pressed-5);
    color: white;
    border-color: black;
}


.side_split_reflexive {

    justify-content: center;
    list-style-type: none;

    display: inline-block;
    flex-wrap: wrap-reverse ;

}
@supports (display: grid) {
    .side_split_reflexive {
        flex-wrap: initial;
        display: grid;
        grid-template-columns: repeat(1, 1fr);
    }
    .side_split_reflexive_inner {
        width: 100%;
    }
    @media (min-width: 950px) {
        .side_split_reflexive {
            grid-template-columns: repeat(2, 1fr);
        }
        .side_split_reflexive_inner {
            width: 100%;
        }
    }
}



.p-35 {
    padding-left:30%;
    padding-right:30%;
}
.p-25 {
    padding-left:25%;
    padding-right:25%;
}
.p-20 {
    padding-left:20%;
    padding-right:20%;
}
.p-15 {
    padding-left:15%;
    padding-right:15%;
}
.p-10 {
    padding-left:10%;
    padding-right:10%;
}
.p-5 {
    padding-left:5%;
    padding-right:5%;
}

.centered {
    text-align: center;
    align-items: center;
    align-content: center;
}

.transition {
    transition: all 350ms ease-in-out;
}