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

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

:root {
    --textDarker: #1e282d;
    --textDark: rgba(38, 50, 56, 1);
    --textMedium: rgba(38, 50, 56, 0.7);
    --borderMedium: rgba(38, 50, 56, 0.2);
    --borderLight: rgba(38, 50, 56, 0.075);
    --accent: #f4b500;
    --accentDarker: #e6ac00;
    --light: rgba(38, 50, 56, 0.035);
}
/*------------------------*/
/* 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;}


/*------------------------ CSS overrides below ------------------------*/

/* Modalin tausta */
.modal {
    display: none; /* Piilotettu oletuksena */
    position: fixed; /* Pysyy paikallaan vieritettäessä */
    z-index: 1; /* On kaiken muun sisällön päällä */
    left: 0;
    top: 0;
    width: 100%; /* Koko leveys */
    height: 100%; /* Koko korkeus */
    overflow: auto; /* Jos sisältö on liian suurta, lisää vierityspalkit */
    background-color: rgba(0,0,0,0.4); /* Himmeä tausta */
    padding-top: 60px; /* Tilaa yläreunasta */
  }
  
  /* Modalin sisältö */
  .modal-content {
    background-color: #fefefe;
    margin: 5% auto; /* 5% yläreunasta ja keskitetty */
    padding: 20px;
    border: 1px solid #888;
    width: 80%; /* Leveys */
    max-width: 500px; /* Maksimileveys */
    position: relative; /* Sulkemispainikkeen sijoittamista varten */
  }
  
  /* Sulkemispainike */
  .close-button {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
    position: absolute; /* Sijoitetaan modaalin sisällön oikeaan yläkulmaan */
    top: 10px;
    right: 20px;
  }
  
  .close-button:hover,
  .close-button:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
  }