@charset "utf-8";
/* CSS Document */


:root {
  --dark-color: #191f1d;
  --mid-dark: #555a57;
  --light-color: #ece0c8;
  --mid-light: #949993;
  --shadow: #0005;
  --linear-rainbow: linear-gradient(
    to right,#ede6bf,#ecc947,#cb5a31,#6f5d79,#4e779a
  );
  --circle-rainbow: radial-gradient(
    circle at left top,#ede6bf,#ecc947,#cb5a31,#6f5d79,#4e779a
  );
  --noise-texture: url(https://i.gyazo.com/a26366e538851a5c569ff648e99b7fd4.png);
  --gif-texture: url(https://64.media.tumblr.com/da60c13b478dda09ab90c27e880983b8/tumblr_nd4pwdPKdc1tun3l0o1_1280.gifv);
  --mulish: "Mulish", sans-serif;
  --playfair: "Playfair Display", serif;
  --dm:"DM Serif Display", serif;
  --main-transition:all 0.2s ease-in-out;
}

.scotch-container {
  margin: 0;
  padding: 0;
  display: grid;
  height: 100%;
  width: 100%;
 
  box-sizing: border-box;
/*   scale:2; */
  animation: spawn 2s ease-in-out forwards; 
}

.scotch-container:before {
  content: "";
  display: flex;
  position: absolute;
  background-image:var(--gif-texture);
  height: 100%;
  width: 100%;
  translate:0px 0px;
  background-repeat: no-repeat;
  background-position-y:-20px;
  background-size: cover;
  mix-blend-mode: screen;
  pointer-events: none;
  opacity: 64%;
  z-index: 3;
}

img {
}

a:hover img {
}


img.kafelka{

    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0\'/></filter></svg>#grayscale");
    filter: grayscale(0%);
    -moz-filter: grayscale(0%);
    -moz-transition: .3s ease-in-out;
    -ms-filter: grayscale(0%);
    -o-filter: grayscale(0%);
    -o-transition: .3s ease-in-out;
    filter: none ; /* IE6-9 */
    zoom:1; /* needed to trigger "hasLayout" in IE if no width or height is set */
    -webkit-filter: grayscale(0%); /* Chrome 19+, Safari 6+, Safari 6+ iOS */
    -webkit-transition: .3s ease-in-out;
}

a:hover img.kafelka{
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 10+, Firefox on Android */
    filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -moz-transition: .3s ease-in-out;
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    -o-transition: .3s ease-in-out;
    filter: gray; /* IE6-9 */
    -webkit-filter: grayscale(100%); /* Chrome 19+, Safari 6+, Safari 6+ iOS */
 
    -webkit-transition: .3s ease-in-out;
}

body {
	background-image: url(img/_background.png);
	background-repeat: repeat;
	margin:0;
	padding:0;
	font-family: Arial, Helvetica, sans-serif;

}
a {
    color: #fff;
    text-decoration: none;
}


#container {
/*    display: flex; /* establish flex container */
/*    flex-direction: row; /* make main axis horizontal (default value) */
/*    justify-content: center; /* center items horizontally, in this case */
    align-items: center; /* center items vertically, in this case */
    margin: 0px;

}

/* Tooltip container */
.tooltip {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted black; /* If you want dots under the hoverable text */
}
      /* Tooltip text */
.tooltip .tooltiptext {
    visibility: hidden;
    width: 350px;
/*    height: 60px; */
    background-color: #611690;
    color: #fff;
    text-align: center;
    padding: 5px 0;
/*    border-radius: 6px; */
    left: 0%;
    top: 100%;
    margin-left: 0px;
/* Position the tooltip text - see examples below! */
    position: absolute;
    z-index: 1;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
    opacity: 0;
    transition: opacity 0.8s;
}

/* Show the tooltip text when you mouse over the tooltip container */
    .tooltip:hover .tooltiptext {
    visibility: visible;
    opacity: 1;
}

.center {
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

@font-face {
    font-family: DIGITAL;
    src: url(digital-7.ttf);
}

.digital-clock {
    margin: auto;
    position: absolute;
    top: 68px;
    left: 94px;
    bottom: 0;
    right: 0;
    color: #ffffff;
    text-align: left;
    font-family: DIGITAL;
    font: 60px/70px 'DIGITAL', Helvetica;
    z-index: 1;
}

.grid {
    display: grid;
    position: relative;
    grid-template-columns: 350px 350px 350px;
    grid-template-rows: 209px 209px;
}

.grid_kafelka {
    grid-column: auto; 
    grid-row: auto;
}

@media only screen and (max-width: 1024px) {
.grid {
/*    display: inline-grid; */
    grid-template-columns: 350px;

    }

.grid_kafelka {
    grid-column: 1;
    }

}
#footer {
position:absolute;
bottom:0;
width:100%;
height:20px;		/* Wysokość nagłówka */
/*background:#373737; */
color: #bbb;
text-align: center;
font-size: 13px;
}