Jason css code

background:repeating-linear-gradient(0deg, rgba(49,55,59,.1) 1px, transparent 2px, transparent 6px),          repeating-linear-gradient(90deg, rgba(49,55,59,.1) 1px, transparent 2px, transparent 6px),          radial-gradient(#ededed ,#31373b); } *{     margin:0;     padding:0;     box-sizing:border-box;     -webkit-user-select:none;     user-select:none; } :root{     --font-1: 'Oswald', sans-serif;     --font-2: 'Arimo', sans-serif;     --font-3: 'Anton', sans-serif;     --font-4: 'Abel', sans-serif;     --red: #fd0042;     --darck: #31373b;     --white: #ededed;     --bluelight: #d3dcef;     --redlight: #edc8d2;     --timer: .5s; } a{     display:inline-block;     text-decoration:none;     text-align:center; } h1, h2, h3, h4{     font-weight:300; } #main{     width:100%;     height:100vh;     position:relative;     font-size:1em;     color:#666;     font-family:var(--font-4);     overflow:hidden; } .container{     width:1080px;     height:100vh;     position:relative;     margin:0 auto;     padding:0 40px; } .header{     height:80px;     display:flex;     justify-content:space-between; } .header > div{     width:50%; } .logo{     margin-top:20px;     float:left;     margin-right:10px; } .title{     text-transform:uppercase;     width:calc(100% - 101px);     float:left;     font-family:var(--font-1);     color:var(--darck);     font-weight:bold;     font-size:1.6em;     line-height:30px;     margin-top:17px; } .sub-title{     color:var(--darck);     font-weight:bold;     font-size:.9em; } .menu{     width:100%;     height:40px;     margin-top:34px;     display:flex;     justify-content:space-between; } .cubo-menu{     perspective:500px;     width:110px;     height:40px;     text-transform:uppercase;     position:relative;     text-align:center;     font-size:.9em; } .item-menu{     transform-style:preserve-3d;     position:relative;     width:110px;     height:40px;     transform:rotateY(0);     color:var(--darck);     transition:transform .5S ease-in-out; } .item-menu:hover{     transform:rotateX(180deg);     color:var(--red); } .cubo-menu:nth-of-type(1) .item-menu{     transform:rotateX(180deg);     color:var(--red);     pointer-events:none; } .row-tab{     width:110px;     height:40px;     display:flex;     justify-content:center;     align-items:center;     position:absolute;     background:linear-gradient(0deg, var(--white) 50%, white 51% ); } .row-tab:nth-child(1){     transform:translateZ(20px); } .row-tab:nth-child(2){     transform:translateZ(-20px) scaleY(-1); } .row-tab:nth-child(3){     transform:rotateX(90deg) translateY(20px);     -webkit-transform-origin:bottom center;     transform-origin:bottom center; } .row-tab:nth-child(4){     transform:rotateX(90deg) translateY(-20px);     -webkit-transform-origin:top center;     transform-origin:top center; } .main-content{     width:1000px;     height:520px;     margin-top:10px;     perspective:2000px;     position:relative; } .cubo-3d{     position:absolute;     width:890px;     height:460px;     transform-style:preserve-3d;     margin-left:55px;     margin-top:30px; } .row-content{     width:890px;     height:460px;     border:solid 0px black;     position:absolute;     background:#fff;     box-shadow:0 0 10px rgba(0,0,0,.0) inset; } .row-content:nth-child(1){     transform:translateZ(230px); } .row-content:nth-child(2){     transform:translateZ(-230px); } .row-content:nth-child(3){     transform:rotateX(90deg) translateY(-230px);     -webkit-transform-origin:top center;     transform-origin:top center; } .row-content:nth-child(4){     transform:rotateX(90deg) translateY(230px);     -webkit-transform-origin:bottom center;     transform-origin:bottom center; }  #content-1:target .cubo-3d{     animation:girar calc(var(--timer) * 4) ease-in-out; } #content-1:target .home{     opacity:1;     visibility:visible;     transition-delay:calc(var(--timer) * 4); }  #content-2:target .cubo-3d{     animation:girar-2 calc(var(--timer) * 4) ease-in-out; } #content-2:target .works{     opacity:1;     visibility:visible;     transition-delay:calc(var(--timer) * 4); } #content-2:target .home, .music, .sale{     opacity:0;     visibility:hidden;     transition:all .5s ease-out; } #content-2:target .cubo-menu:nth-of-type(1) .item-menu{     transform:rotateX(0);     color:var(--drack);     pointer-events:auto; } #content-2:target .cubo-menu:nth-of-type(1) .item-menu:hover{     transform:rotateX(180deg);     color:var(--red); } #content-2:target .cubo-menu:nth-of-type(2) .item-menu{     transform:rotateX(180deg);     color:var(--red);     pointer-events:none; }  #content-3:target .cubo-3d{     animation:girar-3 calc(var(--timer) * 4) ease-in-out; } #content-3:target .music{     opacity:1;     visibility:visible;     transition-delay:calc(var(--timer) * 4); } #content-3:target .home, .works, .sale{     opacity:0;     visibility:hidden;     transition:all .5s ease-out; } #content-3:target .cubo-menu:nth-of-type(1) .item-menu{     transform:rotateX(0);     color:var(--drack);     pointer-events:auto; } #content-3:target .cubo-menu:nth-of-type(1) .item-menu:hover{     transform:rotateX(180deg);     color:var(--red); } #content-3:target .cubo-menu:nth-of-type(3) .item-menu{     transform:rotateX(180deg);     color:var(--red);     pointer-events:none; }  #content-4:target .cubo-3d{     animation:girar-4 calc(var(--timer) * 4) ease-in-out; } #content-4:target .sale{     opacity:1;     visibility:visible;     transition-delay:calc(var(--timer) * 4); } #content-4:target .home, .works, .music{     opacity:0;     visibility:hidden;     transition:all .5s ease-out; } #content-4:target .cubo-menu:nth-of-type(1) .item-menu{     transform:rotateX(0);     color:var(--drack);     pointer-events:auto; } #content-4:target .cubo-menu:nth-of-type(1) .item-menu:hover{     transform:rotateX(180deg);     color:var(--red); } #content-4:target .cubo-menu:nth-of-type(4) .item-menu{     transform:rotateX(180deg);     color:var(--red);     pointer-events:none; }  .pages{     position:relative; } .home, .works, .music, .sale{     width:1000px;     height:520px;     position:absolute;     background:#fff;     padding:10px;     visibility:hidden;     opacity:0;     transition:all .5s ease-out; } .home{     opacity:1;     visibility:visible;     transition-delay:.5s; } .banner{     position:absolute;     width:735px;     height:350px; } .block{     position:relative;     width:100%;     height:100%;     display:flex; } .block > div{     width:50%; } .col-block-left{     box-shadow:0 -150px var(--white) inset;     position:relative; } .footer-page{     width:100%;     height:150px;     position:absolute;     bottom:0;     padding:0 15px; } .title-footer,  .title-section{     text-transform:uppercase;     font-family:var(--font-1);     font-size:1em;     line-height:32px;     border-bottom:solid 1px #fff;     color:var(--darck); } .desc{     margin-top:10px; } .col-block-right{     background:linear-gradient(90deg, rgba(0,0,0,.5) 245px, var(--red) 245px);     display:flex; } .section{     position:relative;     width:50%; } .section-footer{     width:100%;     height:150px;     position:absolute;     bottom:0;     background:var(--redlight);     padding:10px;     font-size:.9em; } .section-footer:nth-of-type(2){     background:var(--bluelight); } .main-section{     padding:10px; } .main-section .title-section{     color:#fff;     text-transform:none;     margin-bottom:15px; } .main-section img{     width:225px;     height:150px;     padding:5px;     background:#fff;     margin-bottom:15px; } .infor{     display:block;     color:#fff; } .btn-section,  .btn-main-section{     float:right;     color:var(--red);     font-weight:bold;     font-family:sans-serif;     font-size:.8em; } .btn-main-section{     color:#fff;     margin-top:10px; } [class*='-music-']{     width:100%;     padding:0px 15px;     height:310px; } [class*='-music-'] .title-footer{     color:#fff; } [class*='music-left']{     background:var(--darck); } [class*='music-right']{     background:var(--red); } .video{     width:460px;     height:260px;     margin-top:8px;     background:#000; } .music .footer-page{     height:190px;     background:var(--white);     padding:0 15px; } .music .col-block-right .footer-page{     background:var(--bluelight);     width:490px; } [class*='box-']{     display:flex;     margin-top:10px; } .box-artist img{     width:200px;     height:140px;     padding:5px;     background:#fff; } .caption-artist{     width:calc(100% - 200px); } .caption-artist span{     display:block;     padding-left:10px;     line-height:26px; } .block-content{     height:calc(100% - 50px);     margin-top:10px;     overflow-y:auto; } ::-webkit-scrollbar{     width:5px;     background:#fff; } ::-webkit-scrollbar-thumb{     background:#616568; } .lyrics{     color:#fff;     font-family:var(--font-1);     font-size:.8em;     width:85%; } .box-videos{     justify-content:space-between; } .col-video{     width:200px;     height:113px;     box-shadow:0 0 0 5px #fff;     margin-top:10px;     background:#000; } .works [class*='col-block']{     width:calc(100% / 3);     padding:0 15px;     display:block;     background:var(--darck);     box-shadow:0 0 #fff; } .works [class*='col-block']:nth-child(2){     background:var(--bluelight) } .works [class*='col-block']:nth-child(3){     background:var(--red) } .works .col-block-left .title-footer{     color:#fff; } .row-work{     width:284px;     height:220px;     padding:5px;     background:#fff;     margin-bottom:20px; } .row-work img{     width:100%;     height:auto; } .row-work span{     display:block;     text-transform:uppercase;     font-size:.8em;     line-height:26px; } .sale [class*='-sale-left']{     width:327px;     background:var(--darck);     padding:0 15px; } [class*='-sale-left'] .title-footer{     color:#fff; } ul li{     color:#fff;     line-height:26px; } ul li span{     color:var(--red);     padding-right:10px; } .obs{     color:#fff;     margin-top:50px; } .sale [class*='-sale-right']{     width:654px;     background:var(--bluelight); } .sale [class*='sale-right'] .footer-page{     width:654px; }  @keyframes girar{     0%, 24%{       transform:rotateX(0);       }     75%{       transform:rotateX(-360deg);       }     100%{       transform:rotateX(-360deg);         } }  @keyframes girar-2{      0%, 24%{       transform:rotateX(0);       }     75%{       transform:rotateX(-360deg);       }     100%{       transform:rotateX(-360deg);         } }  @keyframes girar-3{     0%, 24%{       transform:rotateX(0);       }     75%{       transform:rotateX(-360deg);       }     100%{       transform:rotateX(-360deg);         } }  @keyframes girar-4{      0%, 24%{       transform:rotateX(0);       }     75%{       transform:rotateX(-360deg);       }     100%{       transform:rotateX(-360deg);         } } .col-block-right .section-footer{     padding:0 10px;