@charset "UTF-8";
@import url('https://fonts.googleapis.com/css?family=Passion+One|Montserrat:400,700');

:root {
  --columns: 3;
}  

body::-webkit-scrollbar {
  width: 0.3rem;
}
body::-webkit-scrollbar-track {
  background: #0F1924;
}
body::-webkit-scrollbar-thumb {
  background: -webkit-radial-gradient(
    circle,
    #FF4C58 0%,
    #BC3F47 50%,
    #BC3F47 100%
  );
}

body{
  position: relative;
  background: #BB3444;
  background-image: url("../images/11.png");
  background-size: calc(600%/(var(--columns))); 
}

/*body::after{
  display: block;
  z-index: 5;
  height: 34vw;
  content: '';
  background-color: #27022F;
  background-image: url("../images/11.png");
  clip-path: polygon(100% 100%, 100% 0%, 0% 100%);
  -webkit-clip-path: polygon(100% 100%, 100% 0%, 0% 100%);
}*/

ul::after{
  grid-column:1/-1;
  height: 5vw;
  content: '';
}

header{
  position: absolute;
  top: 0;
  left: 0;
  z-index: -2;
  width: 100%;
  height: 34vw;
  background-color: #0F1C30;
  clip-path: polygon(0% 0%, 100% 0%, 0% 100%);
  -webkit-clip-path: polygon(0% 0%, 100% 0%, 0% 100%);
}

h1{
  color: #BB3444;
  margin: 3vw;
  transform: skewY(-18.6deg);
  font-size: 13vw;
  font-family: 'Passion One', cursive;
}

ul {
  position: relative;
  top: -10px;
  display:grid;
  grid-template-columns: repeat(var(--columns),1fr);
  transform-origin: top right;
  transform: skewY(-18.6deg);
  overflow: hidden;
}

li {
  position: relative;
  grid-column-end: span 2;
  padding-top: 100%;
  transform-origin: top left;
  transform: skewY(18.6deg);
}

li:nth-child(2n){
  grid-column-start:2;
}

li::before{
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  content: '';
  background-color: #F7F7F7;
  z-index: -1;
  clip-path: circle(31% at 50% 45%);
  -webkit-clip-path: circle(31% at 50% 45%);
}

.divv{
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width:75%;
  height:75%;
  margin-left: auto;
  margin-right: auto;
}

img{
  position: absolute;
  width: 100%;
  left: 0;
  bottom: 0;
  transform: rotate(0) translate(0, 0);
  transition-property: transform;
  transition-duration: .6s;
}
	
.art, a:hover, a:visited, a:active
{
	color:#B5457D;
	text-decoration:none;
}

.ar, .ar:hover, .ar:visited, .ar:active
{
	color:#fff;
	text-decoration:none;
}

div > h2 {
  font: 400 calc(12vw/(var(--columns))) 'Passion One', cursive;
  display: block;
  padding: 4% 3% 3% 4%;
  position: absolute;
  background-color: #FFC700;
  color: #2C363F;
  transform: skewY(-18.6deg);
  bottom: 0%;
  left: 3%;
  letter-spacing: 0.1em;
  transition-property: opacity;
  transition-duration: .3s;
  z-index: 10;
  opacity: 0;
}

div > p {
  font: 700 calc(12vw/(var(--columns))) 'Montserrat', sans-serif;
  display: block;
  position: absolute;
  top: -28%;
  left: 50%;
  color: #FDF4E0;
  padding-right: 4%;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  width: 50%;
  height: 42%;
  letter-spacing: 0.1em;
  transform: rotate(-90deg) translate(-40%, 0);
  transition-property: transform;
  transition-duration: .3s;
}

div > p::after{
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  content: '';
  background-color: rgba(156,230,82,0.90);
  z-index: -2;
  clip-path: polygon(0% 50%, 50% 0%, 50% 15%, 100% 15%, 100% 85%, 50% 85%, 50% 100%);
  -webkit-clip-path: polygon(0% 50%, 50% 0%, 50% 15%, 100% 15%, 100% 85%, 50% 85%, 50% 100%);
}

div:hover > p { 
  transform: rotate(-30deg) translate(-20%, 90%);
}

div:hover > img { 
  transform: rotate(15deg) translate(-10%, -10%) scale(1.2);
}

div:hover > h2 { 
  opacity: 1;
}


@media (min-width:600px){
  :root {
    --columns: 5;
  }
  li:nth-child(2n){
    grid-column-start:auto;
  }
  li:nth-child(4n-1){
    grid-column-start:2;
  }
}
@media (min-width:900px){
  :root {
    --columns: 7;
  }
  li:nth-child(4n-1){
    grid-column-start:auto;
  }
  li:nth-child(6n-2){
    grid-column-start:2;
  }
}
@media (min-width:1200px){
  :root {
    --columns: 9;
  }
  li:nth-child(6n-2){
    grid-column-start:auto;
  }
  li:nth-child(8n-3){
    grid-column-start:2;
  }
}
@media (min-width:1500px){
  :root {
    --columns: 11;
  }
  li:nth-child(8n-3){
    grid-column-start:auto;
  }
  li:nth-child(10n-4){
    grid-column-start:2;
  }
}
@media (min-width:1800px){
  :root {
    --columns: 13;
  }
  li:nth-child(10n-4){
    grid-column-start:auto;
  }
  li:nth-child(12n-5){
    grid-column-start:2;
  }

}
@media (min-width:2100px){
  :root {
    --columns: 15;
  }
  li:nth-child(12n-5){
    grid-column-start:auto;
  }
  li:nth-child(14n-6){
    grid-column-start:2;
  }
}