@import "fonts.css";
@import "base.css";
@import "header-footer.css";
@import "bricks.css";

/*------------------------*/
/* Overrides by Hugo Schotman
/*------------------------*/

/* Disable all CSS animations */
/* *, *::before, *::after {
    animation: none !important;
    transition: none !important;
} */

/* Override specific animations */
/* @keyframes opendetails { 
    from, to { grid-template-rows: 1fr; }
}

@keyframes closedetails {
    from, to { grid-template-rows: 1fr; }
} */

/* Remove transition properties */
.button, .button.icon, ul.tabs li a::after {
    animation: none !important;
    transition: none !important;
}

/* Keep transition properties for faq, etc.*/
/* .button, .button.icon, ul.tabs li a::after, details summary {
    transition: none !important;
} */


/* Ensure details are always visible */
/* details > div {
    grid-template-rows: 1fr !important;
} */



/*------------------------*/
/* theme colors
/*------------------------*/

 
/* Should be covered in base.css */
:root {
    /* Text Colors */
    --textDark: hsla(205, 71%, 15%, 1);
    --textMedium: hsla(205, 71%, 25%, 1);
    --textLink: hsla(205, 70%, 40%, 0.8);
    
    /* Border Colors */
    --borderMedium: hsla(0, 0%, 0%, 0.2);
    --borderLight: hsla(0, 0%, 0%, 0.1);
    
    /* Accent Colors */
    --accent: hsla(145, 34%, 52%, 1);
    --textAccent: hsla(145, 34%, 42%, 1);
    
    /* Base Colors */
    --light: hsla(0, 0%, 0%, 0.05);
    
    /* Primary Colors */
    --primary: hsla(204, 64%, 44%, 1);
    --primaryBorder: hsla(204, 65%, 32%, 1);
    --primaryBG: hsla(204, 64%, 44%, 0.1);
    --primaryBorderBG: hsla(204, 64%, 44%, 0.2);
    
    /* Secondary Colors */
    --secondary: hsla(145, 34%, 52%, 1);
    --secondaryBorder: hsla(144, 32%, 36%, 1);
    --secondaryBG: hsla(145, 34%, 52%, 0.1);
    --secondaryBorderBG: hsla(145, 34%, 52%, 0.2);
    
    /* Dark Colors */
    --dark: hsla(204, 65%, 20%, 1);
    --darkBorder: hsla(205, 66%, 32%, 1);
    --darkBG: hsla(204, 65%, 20%, 0.9);
    --darkBorderBG: hsla(204, 65%, 20%, 0.2);
    
    /* Warning colors */
    --warningPrimary: hsla(360, 63%, 50%, 1);
    --warningPrimaryBorder: hsla(360, 63%, 30%, 1);

    /* Colors for illustrations */
    --illustrationYellow: hsla(48, 89%, 50%, 1);
    --illustrationOrange: hsla(28, 80%, 52%, 1);
    --illustrationRed: hsla(6, 78%, 57%, 1);
    --illustrationPurple: hsla(283, 39%, 53%, 1);
    --illustrationTeal: hsla(168, 76%, 42%, 1);
    --illustrationNavy: hsla(210, 29%, 29%, 1);
    --illustrationLightBlue: hsla(204, 70%, 53%, 1);
    --illustrationLightGreen: hsla(145, 63%, 49%, 1);
}



/*------------------------*/
/* turn grayscale off
/*------------------------*/

img {filter: grayscale(0);}

/*------------------------*/
/* colorize_image
/*------------------------*/

.colorize_image {filter: contrast(1) sepia(1) hue-rotate(160deg) grayscale(0.8)!important;}

/*------------------------*/
/* black_2_textDark
/*------------------------*/

.map::after, .black_2_textDark {filter: contrast(0.7) sepia(1) hue-rotate(160deg)!important;}

/*------------------------*/
/* black_2_textMedium
/*------------------------*/

.black_2_textMedium {filter: contrast(0.3) sepia(0.3) hue-rotate(160deg) brightness(1.4)!important;}

/*------------------------*/
/* black_2_accent
/*------------------------*/

.black_2_accent {filter: contrast(0.11) sepia(1) hue-rotate(340deg) contrast(13)!important;}

/*------------------------*/
/* list styles
/*------------------------*/
ul {
    list-style-type: '\2003–\2003\2003';
}

.align-top {
    align-items: flex-start;
}
h1 {font-size: 2.8rem; margin-bottom: 1.75rem;}
h2 {font-size: 1.9em}
h3 strong, h2 strong {color: var(--textAccent)}