* {
  box-sizing: border-box;
}

@font-face {
  font-family: "Grafiti1";
  src:
    local("Grafiti1"),
    url("fonts/BrokenInk.ttf") format("truetype");
}

@font-face {
  font-family: "Grafiti2";
  src:
    local("Grafiti2"),
    url("fonts/BoordensStreet.otf") format("opentype");
}
@font-face {
  font-family: "Grafiti3";
  src:
    local("Grafiti3"),
    url("fonts/aaaiight.ttf") format("truetype");
}
@font-face {
  font-family: "Grafiti4";
  src:
    local("Grafiti4"),
    url("fonts/MagikMarker.otf") format("opentype");
}
@font-face {
  font-family: "Grafiti5";
  src:
    local("Grafiti5"),
    url("fonts/jacatra.otf") format("opentype");
}
@font-face {
  font-family: "Grafiti6";
  src:
    local("Grafiti6"),
    url("fonts/AerosoldierDrip.otf") format("opentype");
}
@font-face {
  font-family: "Grafiti7";
  src:
    local("Grafiti7"),
    url("fonts/Mostwasted.ttf") format("truetype");
}



body {
  margin: 0;
  padding: 2rem;
  background: #050505;
  color: magenta;
  overflow-x: hidden;
  zoom: 35%;
  cursor: url("../cursor7.cur"), auto !important; 
}
@keyframes zoomin { 
    0% { zoom: 35%;transform: rotate(360deg);} 
    100% { zoom: 100%;transform: rotate(0deg) ;} 
}
@keyframes zoomout { 
    0% { zoom: 100%; transform: rotate(0deg);} 
    100% { zoom: 35%; transform: rotate(360deg);} 
}
@keyframes idle { 100% {} }

body.unzoomed{
    position: relative;
    zoom: 35%;
    cursor: url("../cursor7.cur"), auto !important; 
    animation: zoomout 0.5s ease-in-out;
}
body.zoomed{
    position: relative;
    padding: 0%;
    zoom:100%;
    animation: zoomin 0.5s ease-in-out;
}
.myfog {
    content: "";
    position: fixed;
    left: -10%;
    bottom: -10%;
    height: 72%;
    width: 120%;
    background: linear-gradient(transparent, #aaa8);
    filter: url(#wiggle-fog);
    transform: scaleX(150%);
}
.floor {
    position: fixed;
    left: -10%;
    bottom: -10%;
    height: 68%;
    width: 120%;
    background: linear-gradient(black, #aaa8);
    filter: url(#wiggle-asphalt) blur(2px);
    transform: scaleX(150%);
}
.center {
  display: flex;
  justify-content: center;
  align-items: center;
}
header {
  color: cyan;
  text-align: center;
  margin-bottom: 2rem;
}
.zement{
    background-color: darkgrey;
    position: absolute;
    margin-top: 20%;
    left: calc(48% - 450px + 140px);
    top: calc(40% - 200px + 40px);
    width: calc(3 * 300px - 120px);
    height: calc(5 * 120px - 40px);
    z-index: 1;
    filter: sepia(40%) brightness(30%);
}
.tiles {
  cursor: inherit;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px,0.81fr));
  gap: 2.3rem;
  max-width: 1000px;
  margin: 0 auto;
  margin-top: 20%;
  background-color: #1111ff00;
  border-radius: 12px;
}

#row1{
    position: absolute;
    left: calc(48% - 450px);
    top: calc(70% - 200px + 80px * 0);
    z-index: 6;
}

#row2{
    position: absolute;
    left: calc(48% - 450px + 100px);
    top: calc(70% - 200px + 120px * 1);
    z-index: 5;
}

#row3{
    position: absolute;
    left: calc(48% - 450px);
    top: calc(70%  - 200px + 120px * 2);
    z-index: 4;
}

#row4{
    position: absolute;
    left: calc(48% - 450px + 100px);
    top: calc(70%  - 200px + 120px * 3);
    z-index: 3;
}

#row5{
    position: absolute;
    left: calc(48% - 450px);
    top: calc(70%  - 200px + 120px * 4);
    z-index: 2;
}

.tile {
  cursor: inherit;
    left: -40%;
  position: relative;
  padding: 1.5rem;
  border-radius: 12px;
  text-decoration: none;
  color: inherit;
  filter:brightness(60%);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.tile:nth-child(2n) p { transform:rotate(10deg) scale(106%);filter: hue-rotate(90deg);}
.tile:nth-child(3n) p { transform:rotate(-15deg) scale(106%); filter: sepia(50%); }
.tile:nth-child(4n) p { transform:rotate(13deg) scale(106%); }
.tile:nth-child(2n) h2 { transform:rotate(-10deg) scale(106%); color: #222a; }
.tile:nth-child(3n) h2 { transform:rotate(7deg) scale(106%); color: #1118;}
.tile:nth-child(4n) h2 { transform:rotate(-7deg) scale(106%); color: #110a; }
/*
.tile:nth-child(2n) .brick-wrapper { transform:rotate(-8deg) scale(108%); }
.tile:nth-child(3n) .brick-wrapper { transform:rotate(-2deg) scale(108%); }
.tile:nth-child(4n)  .brick-wrapper { transform:rotate(2deg) scale(108%); }
.tile:nth-child(5n)  .brick-wrapper { transform:rotate(5deg) scale(108%); }
.tile:nth-child(6n)  .brick-wrapper { transform:rotate(-5deg) scale(108%); }
*/
.tile h2 {
    position: absolute;
  margin-top: 0;
  color: #111a;
  font-family: "Grafiti7";
  font-size:  80px;
  z-index: 11;

}
.tile p{
    position: absolute;
  margin-top: 3px;
  color: #aaf8;
  font-family: "Grafiti3";
  font-size: 12px;
}

.container {
  position:relative;
  left: 42%;
  width: 20%;
}

.image {
  opacity: 1;
  display: block;
  width: 100%;
  height: auto;
  transition: .9s ease-out;
  backface-visibility: hidden;
  filter: saturate(20%);
}

.container:hover .image {
  filter: saturate(100%);
  filter: hue-rotate(9deg);
}
/* ---------- Real Bicks ---- */
.brick-wrapper{
	width: 300px;
	height: 100px;
	left: 100px;
	position: relative;
	transition: all 0.2s ease-in-out;
        filter: sepia(50%);

}

.brick-shape {
	position: absolute;
	background: #aa4a66;
	filter: url(#wiggle-brickshape) brightness(120%) saturate(60%);
	border-radius: 1px;
	width: inherit;
	height: inherit;
	transition: inherit ;
	clip-path: polygon(0% 0%, 0% 0%, 120% 0%, 120% 0%, 120% 120%, 0% 120%);
	

}

.brick-wrapper:hover{
	transform: translateY(20%) scale(120%);

}

.brick-wrapper:hover .brick-shape{
	clip-path: polygon(0% 20%, 30% 0%, 70% 0%, 100% 20%, 200% 100%, 0% 200%);
	height: 110%;
	box-shadow: 0px 40px 10px #000a;
}	 

.brick-wrapper:hover .brick-content{
}
.brick-detail {
	position: absolute;
	background: #aa4a66;
	filter: url(#wiggle-brick) blur(2px) brightness(120%) saturate(60%);
	border-radius: 10px;
	width: 90%;
	height: 70%;
	margin: 10px 0 ;

}
.brick-content {
	position: absolute;
	width: 70%;
	height: 0.2%;
	margin: 0%;
	padding-left: 25%;
	transform: inherit;
}

.brick-content p{
	position: absolute;
	top: 30px;
	
}
/* ---------- Fog ---------- */
html, body {
  margin: 0;
  padding: 0;
}

.fogwrapper {
  height: 200%;
  position: absolute;
  top: 0;
  width: 100%;
  -webkit-filter: blur(1px) grayscale(0.2) saturate(1.2) sepia(0.2);
  filter: blur(1px) grayscale(0.2) saturate(1.2) sepia(0.2) brightness(200%) contrast(200%);
}
#foglayer_01, #foglayer_02, #foglayer_03 {
  height: 200%;
  position: absolute;
  width: 200%;
}
#foglayer_01 .image01, #foglayer_01 .image02,
#foglayer_02 .image01, #foglayer_02 .image02,
#foglayer_03 .image01, #foglayer_03 .image02 {
  float: left;
  height: 200%;
  width: 50%;
}
#foglayer_01 {
  -webkit-animation: foglayer_01_opacity 10s linear infinite, foglayer_moveme 15s linear infinite;
  -moz-animation: foglayer_01_opacity 10s linear infinite, foglayer_moveme 15s linear infinite;
  animation: foglayer_01_opacity 10s linear infinite, foglayer_moveme 15s linear infinite;
}
#foglayer_02, #foglayer_03 {
  -webkit-animation: foglayer_02_opacity 21s linear infinite, foglayer_moveme 13s linear infinite;
  -moz-animation: foglayer_02_opacity 21s linear infinite, foglayer_moveme 13s linear infinite;
  animation: foglayer_02_opacity 21s linear infinite, foglayer_moveme 13s linear infinite;
}

/* ---------- Moving Fog ---------- */
/*
  'size: cover' || 'size: 100%'; results remain the same
  'attachment: scroll' can be added or removed; results remain the same
  'attachment: fixed' causing unexpected results in Chrome
  'repeat-x' || 'no-repeat'; results remain the same
*/ 
#foglayer_01 .image01, #foglayer_01 .image02 {
  background: url("https://raw.githubusercontent.com/danielstuart14/CSS_FOG_ANIMATION/master/fog1.png") center center/cover repeat-x transparent;
  size: cover;
  filter: brightness(150%) blur(10px);

}
#foglayer_02 .image01, #foglayer_02 .image02,
#foglayer_03 .image01, #foglayer_03 .image02{
  background: url("https://raw.githubusercontent.com/danielstuart14/CSS_FOG_ANIMATION/master/fog2.png") center center/cover repeat-x transparent;
  size: cover;
  filter: brightness(150%) blur(10px);
}

/* ---------- Keyframe Layer 1 ---------- */
@-webkit-keyframes foglayer_01_opacity {
  0% { opacity: .1; }
  22% { opacity: .5; }
  40% { opacity: .28; }
  58% { opacity: .4; }
  80% { opacity: .16; }
  100% { opacity: .1; }
}
@-moz-keyframes foglayer_01_opacity {
  0% { opacity: .1; }
  22% { opacity: .5; }
  40% { opacity: .28; }
  58% { opacity: .4; }
  80% { opacity: .16; }
  100% { opacity: .1; }
}
@-o-keyframes foglayer_01_opacity {
  0% { opacity: .1; }
  22% { opacity: .5; }
  40% { opacity: .28; }
  58% { opacity: .4; }
  80% { opacity: .16; }
  100% { opacity: .1; }
}
@keyframes foglayer_01_opacity {
  0% { opacity: .1; }
  22% { opacity: .5; }
  40% { opacity: .28; }
  58% { opacity: .4; }
  80% { opacity: .16; }
  100% { opacity: .1; }
}
/* ---------- Keyframe Layer 2 ---------- */
@-webkit-keyframes foglayer_02_opacity {
  0% { opacity: .5; }
  25% { opacity: .2; }
  50% { opacity: .1; }
  80% { opacity: .3; }
  100% { opacity: .5; }
}
@-moz-keyframes foglayer_02_opacity {
  0% { opacity: .5; }
  25% { opacity: .2; }
  50% { opacity: .1; }
  80% { opacity: .3; }
  100% { opacity: .5; }
}
@-o-keyframes foglayer_02_opacity {
  0% { opacity: .5; }
  25% { opacity: .2; }
  50% { opacity: .1; }
  80% { opacity: .3; }
  100% { opacity: .5; }
}
@keyframes foglayer_02_opacity {
  0% { opacity: .5; }
  25% { opacity: .2; }
  50% { opacity: .1; }
  80% { opacity: .3; }
  100% { opacity: .5; }
}
/* ---------- Keyframe Layer 3 ---------- */
@-webkit-keyframes foglayer_03_opacity {
  0% { opacity: .8 }
  27% { opacity: .2; }
  52% { opacity: .6; }
  68% { opacity: .3; }
  100% { opacity: .8; }
}
@-moz-keyframes foglayer_03_opacity {
  0% { opacity: .8 }
  27% { opacity: .2; }
  52% { opacity: .6; }
  68% { opacity: .3; }
  100% { opacity: .8; }
}
@-o-keyframes foglayer_03_opacity {
  0% { opacity: .8 }
  27% { opacity: .2; }
  52% { opacity: .6; }
  68% { opacity: .3; }
  100% { opacity: .8; }
}
@keyframes foglayer_03_opacity {
  0% { opacity: .8; }
  27% { opacity: .2; }
  52% { opacity: .6; }
  68% { opacity: .3; }
  100% { opacity: .8; }
}
/* ---------- Keyframe moveMe ---------- */
@-webkit-keyframes foglayer_moveme {
  0% { left: 0; }
  100% { left: -100%; }
}
@-moz-keyframes foglayer_moveme {
  0% { left: 0; }
  100% { left: -100%; }
}
@-o-keyframes foglayer_moveme {
  0% { left: 0; }
  100% { left: -100%; }
}
@keyframes foglayer_moveme {
  0% { left: 0; }
  100% { left: -100%; }
}

@media only screen
  and (min-width: 280px)
  and (max-width: 767px) {
    #foglayer_01 .image01, #foglayer_01 .image02,
    #foglayer_02 .image01, #foglayer_02 .image02,
    #foglayer_03 .image01, #foglayer_03 .image02 {
      width: 100%;
    }
  }
.audioplayer{
    position: absolute;
    bottom: 0px;
}