body {
    margin: 0;
    display: unset !important
}
.black {
    width: 30% !important;
    position: relative;
    left: 35%;
    display: flex;
    clip-path: polygon(50% 0%, -60% 500%, 2000% 8000%) !important;
    bottom: 100%;
    z-index: -2;
    cursor: pointer;
}
.wood {
    margin-left: unset !important;
    width: 200% !important;
    cursor: pointer;
}
.pencil {
    left: 43%;
    top: 0%;
    width: 14% !important;
    z-index: -1;
    height: 30% !important;
    cursor: pointer;
}
.palker {
    left: 20.5%;
    top: 0%;
    width: 11% !important;
    z-index: -1;
    height: 30% !important;
    cursor: pointer;
}
.palker-rev {
    left: 68.5%;
    top: 0%;
    width: 11% !important;
    z-index: -1;
    height: 30% !important;
    cursor: pointer;
}
.iwantjs {
    width: 100%;
    margin-top: -4vh;
    min-height: 100vh;
    transition: background-color 500ms;
}
.higer {
    text-align: center;
    font-family: rwby;
    font-size: 3em;
    margin-top: 2vh;
}
.higer p {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 0;
    animation-duration: 5s;
    animation-name: despai;
    color:rgba(0, 0, 0, 0);
    position: absolute;
    left: 48%;
    top: 30%
}
h1 {
    font-size: large;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: lighter;
}

@keyframes despai {
    from {
        color: #000;
        font-size: large;
    }
  
    to {
        color: rgba(0, 0, 0, 0);
        overflow: hidden;
        font-size: 0;
        top: -10%;
    }
  }

@font-face {
    font-family: "rwby";
    src: url("rwby_style.ttf") format("opentype")
   }
.block {
    /* background-image: linear-gradient(rgba(0, 38, 255, 0.93),rgba(255, 0, 234, 0.97)), url(https://pbs.twimg.com/media/DXsVe8aVoAADn-G.jpg); */
    width: 80%;
    margin-left: 10%;
    /* height: 600px; */
    min-height: 50vh;
    background-color: rgba(126, 252, 0, 0.2);
    border-radius: 15px 12% 20% 3%;
    box-shadow: 0px 0px 60px 0px rgba(126, 252, 0, 0.4);
}
.small {
    width: 30%;
    height: 300px;
    background-image: url(https://hyperhost.ua/info/storage/uploads/2020/11/404%20robot.png);
    background-size: cover; 
    background-position: center;
    margin-left: 2.5%;
    border-radius: 3%;
    transition: all 200ms;
    display: inline-block;
    overflow:hidden;
}
.mtopdva {
    margin-top: 2%;
}
.japan {background-image: url(http://mini.s-shot.ru/1920x1080/1080/?https://gribanovivan.github.io/coolsites/site3/);}
.over {
    width: 100%;
    height: 100%;
    background-image: linear-gradient(rgba(45, 0, 205, 0.9),rgba(0,0,0,.5));
    opacity: 0;
}
.block p {
font-size: 2.5em;
font-family: 'Roboto', sans-serif;
}
input {
	height: 0px;
}
input::before {
	content: '';
	/* display: block; */
	width: 7%;
	height: 15%;
	background: url(https://www.vectorkhazana.com/assets/images/products/Darth_Vader_SVG_Digital_Cut_File.png) no-repeat;
	background-size: cover;
    background-position: center;
	position: absolute;
	top: 1%;
	right: 300px;
	z-index: 999;
}

input:checked + .iwantjs {
	background-color: #000;
}
input:checked + .iwantjs {
	color: whitesmoke;
}
input:checked + .iwantjs .block{
	background-color: rgba(107, 69, 182, 0.25);
    box-shadow: 0px 0px 60px 0px rgba(107, 69, 182, 0.4);
}
@media screen and (min-width: 992px) {
input:checked + .iwantjs .sword{
 display: block;
 transition: all 500ms;
 opacity: 1;
}}
.small:hover {
    border-radius: 0%;
    /* filter: invert(48%); */
    transition: all 500ms;
    transition: box-shadow 200ms;
    box-shadow: -2px -2px 5px 1px purple, 2px 2px 5px 1px rgb(55, 55, 235);
}
.small:hover .over {
    transition: all 500ms;
    opacity: 1
}
.visit {
    /* background-color: black; */
    width: 50%;
    height: 15%;
    position: relative;
    top: 120%;
    left: 45%;
    font-size: 0;
    font-family: 'Courier New', Courier, monospace;
    display: flex;
    align-items: center;
    justify-content: center;
    color:rgba(45, 0, 205, 0.9);
    cursor: pointer;
}

.last {
    position: absolute;
    width: 23%;
    height: 10%;
    color:rgba(126, 252, 0, 0.8);
    font-size: xx-large;
    font-family: 'Roboto', sans-serif;
    font-weight: bold;
}

.small:hover .visit{
    transition: all .3s;
    transition: border-radius 1.3s;
    font-size: xx-large;
    top: 80%;
    }
    .visit:hover {
        background-color: rgba(104, 173, 91, 0.582);
        border-radius: 50px;
    }
    
h2 {position: absolute;
font-size: 0;}
.instawesome {background-image: url(http://mini.s-shot.ru/600x600/600/?https://gribanovivan.github.io/coolsites/site4/);}
.insta {background-image: url(http://mini.s-shot.ru/600x600/600/?https://gribanovivan.github.io/coolsites/site5/);}
.site1 {background-image: url(http://mini.s-shot.ru/1600x1080/1080/?https://gribanovivan.github.io/coolsites/site1/);}
.startup {background-image: url(http://mini.s-shot.ru/1600x1080/1080/?https://gribanovivan.github.io/coolsites/site2/?1);}
.form {background-image: url(http://mini.s-shot.ru/1280x768/1280/?https://gribanovivan.github.io/coolsites/site7);}
.dog {background-color: #00ffff; background-image: url(http://mini.s-shot.ru/1280x768/1080/?https://gribanovivan.github.io/coolsites/site11);
    /* background-size:contain; background-repeat: no-repeat;height: 200px;margin-top: 20px; */
}
.egor {background-color: #f5f5f5; background-image: url(http://mini.s-shot.ru/1920x960/1080/?https://gribanovivan.github.io/coolsites/site12/); background-position: top;}
.resu {background-position: left;
    background-image: url(http://mini.s-shot.ru/1280x800/800/?https://gribanovivan.github.io/coolsites/site8/);}
.story {background-image: url(http://mini.s-shot.ru/1920x1080/1080/?https://gribanovivan.github.io/coolsites/site9/)}
.boot{background-image: url(http://mini.s-shot.ru/1600x1080/1080/?https://gribanovivan.github.io/coolsites/site13);background-position: top;}
.uikit{background-image: url(http://mini.s-shot.ru/1600x1080/1080/?https://gribanovivan.github.io/coolsites/site15);background-position: top;}
.neko{background-image: url(http://mini.s-shot.ru/1600x905/1080/?https://gribanovivan.github.io/coolsites/site16);background-position: center; background-size: cover;background-repeat: no-repeat;}
.star{background-image: url(http://mini.s-shot.ru/1280x768/1280/?https://gribanovivan.github.io/coolsites/site18)}
.valenta{background-image: url(http://mini.s-shot.ru/1440x840/1440/?https://gribanovivan.github.io/coolsites/site19)}
.s30{background-image: url(http://mini.s-shot.ru/1600x900/1600/?https://gribanovivan.github.io/coolsites/site30), linear-gradient(90deg,rgb(152,151,165),rgb(202,246,255)) !important;background-size: contain;background-repeat: no-repeat;}
.s31{background-image: url(http://mini.s-shot.ru/1600x900/1600/?https://gribanovivan.github.io/coolsites/site31)}
.s32{background-image: url(http://mini.s-shot.ru/1280x720/1280/?https://gribanovivan.github.io/coolsites/site32)}
.s33{background-image: url(http://mini.s-shot.ru/516x589/516/?https://gribanovivan.github.io/coolsites/site33), linear-gradient(white,white) !important;background-position: left;background-size: contain;background-repeat: no-repeat;}
.s34{background-image: url(http://mini.s-shot.ru/816x716/816/?https://gribanovivan.github.io/coolsites/site34), linear-gradient(cyan,cyan);background-size: contain;background-repeat: no-repeat;}
.centred {
    position: relative;
    text-align: center;
    font-family: 'Montserrat', sans-serif;
    font-size: 5em;
    line-height: 0;
    top:50%;
    color:palevioletred
}
.sword {
    position: fixed;
    width: 10%;
    top: 30vh;
    height: 90vh;
    /* background-color: turquoise; */
    display: none;
}
.down {
    background-size: contain;
    background-position: bottom;
    margin-top: 90%;
    width: 100%;
    height: 50vh;
    background-image: url(sword_[L1][T].png);
    background-repeat: no-repeat;
    margin-left: -5%;
    cursor: pointer;
}
.yes {
    height: 5vh;
}
.fixjs {
    position: fixed;
width: 33.75%;
height: 60vh;
margin-left: 83.125%;
margin-top: 85vh;
border-radius: 49%;
background-color: #fbde3c;
transition: all 1s;
z-index: 9999;
cursor: pointer;
}
.fixjs a {
font-size: 10em;
margin-left: 30%;
line-height: 1;
color:#000
}
.fixjs:hover {
    animation: js 700ms normal forwards ease-in-out;
}
@keyframes js {
    from {
margin-left: 83.125%;
margin-top: 85vh;
border-radius: 49%;
    }
  
    to {
        margin-left: 75%;
        margin-top: 75vh;
        border-radius: 49%;
    }
  }
@media screen and (max-width: 992px) {
    input::before {
        position: fixed;
        width: 100px;
        height: 15%;
        top: 80%;
        right: 0px;
        background-image: url(bw.png);
    }
.iwantjs {
    margin-top: -5vh;
        min-height: 102vh;
}
.higer {
    line-height: 1.5em;
}
h1 {
    line-height: unset;
}
.block {
    width: 95%;
    margin-left: 5%;
    height: unset;
    min-height: 400px;
    background-color: rgba(126, 252, 0, 0.2);
    border-radius: 0.3% 30% 30% 40% / 30% 45% 30% 5% ;
    box-shadow: 0px 0px 60px 0px rgba(126, 252, 0, 0.4);
}
.higer p {
    animation-name: unset;
}
.small {
    width: 90%;
    height: 30vh;
    margin-left: 2.5%;
    border-radius: 3%;
    transition: all 2s;
    transition: background-size 0s;
    margin-top: 5%;
    border-radius: 20px;
}
.last {
    width: 80%;
}
.visit {
    color:rgb(44, 0, 205);
    font-weight: bolder;
    overflow:hidden
}
input:checked + .iwantjs .block{
	background-color: rgba(107, 69, 182, 0.5);
    box-shadow: 0px 0px 300px 50px rgba(107, 69, 182, 0.6);
}
.mtopdva {
    margin-top: 5%;
}
.fixjs {
width: 80%;
height: 30vh;
margin-left: -16.875%;
margin-top: 80vh;
background-color: #fbde3c;
transition: all 1s;
z-index: 9999;
cursor: pointer;
}
.fixjs:hover {
    animation: js 200ms normal forwards ease-in-out;
}
@keyframes js {
    from {
margin-left: -16.875%;
margin-top: 80vh;
border-radius: 49% 49% 49% 0% / 49% 49% 49% 0% 
    }
  
    to {
        margin-left: -5.625%;
        margin-top: 75vh;
        border-radius: 49% 49% 49% 0% / 30% 49% 49% 0% 
    }
  }
}
@supports (-moz-appearance:none) {
    input {
        height: 100px;
        position: absolute;
    }
    .iwantjs {
        margin-top: 0vh;
    }
    .higer {
        margin-top: unset;
    }
    h2 {
        font-size: x-large;
        left: 20px;
        top: 20px
    }
    .higer {
        line-height: unset;
    }
}