/* @import url('https://fonts.googleapis.com/css2?family=PT+Mono&display=swap'); */
@font-face {font-family: 'MatrixBook';src:url('MatrixBook.woff2');font-display:swap;}

:root {
  --primary-color: #110f15;
  --secondary-color: #383241;
  --body-background-color: #0c0c0c;
  --nav-color: #342348;
  --nav-border-color:#6a5a82;
  --footer-color:#000;
  --footer-border-color:#180f1e;
  --read-bar-pgb-start-color: #693493;
  --read-bar-pgb-end-color: #230d35;
}

html{scroll-behavior:smooth;height:100%;}
body{color:#cdc0ea;font-family:/*'PT Mono',*/ monospace, sans-serif;margin:0;background-color:#000;position:relative;
background-image:linear-gradient(var(--nav-color) 1px, transparent 1px), linear-gradient(to right, var(--nav-color) 1px, var(--body-background-color) 1px);
background-size:20px 20px;min-height:100%;overflow:hidden;}
a{text-decoration:none;color:#6b4194;}a:hover{opacity:.8;}
p{font-weight:400;color:#d0c7e2;}
h1, h2{font-weight:600;}h3 {color:#693493;font-weight:normal;}

/*** CUSTOM STYLES ***/
.container{max-width:650px;margin:0 auto;position:relative;}
.opa-5{opacity:0.5;}.opa-6{opacity:0.6;}.opa-7{opacity:0.7;}.opa-8{opacity:0.8;}.opa-9{opacity:0.9;}
.unselectable{-webkit-user-drag: none; user-select: none;-moz-user-select: none;-webkit-user-drag:none;-webkit-user-select:none;-ms-user-select:none;}
.success{margin-top:25px;border-radius:10px;border:1px solid #155724;background-color:#D4EDDA;padding:10px;}
.error{margin-top:25px;border-radius:10px;border:1px solid #B75A24;background-color:#F8D7DA;padding:10px;}
.center{text-align:center;}.hidden{display:none !important;}.visible{display:block !important;}
.cursor_grab{cursor:grab;}.cursor_grabbing{cursor:grabbing !important;}.animation_unset{animation:unset !important;}
/*** END CUSTOM STYLES ***/

/*** LAYOUT ***/
.page{display:grid;grid-template-columns:1fr 4fr 1fr;}
.left {grid-column-start:1;}
.middle {grid-column-start:2;padding:.25rem;}
.right {grid-column-start:3;}
@media (max-width:1300px) {
  .page-about .page{display: grid;grid-template-columns:1fr 4fr 0fr;}
  .page-about .page .middle{margin-right:20px;}
}
@media (max-width: 1060px) {
  .page-about .page{display:grid;grid-template-columns:0fr 4fr 0fr;}
}
@media (max-width:800px) {.card-presentation-yugioh,.shadow{animation:none !important;}}
/*** END LAYOUT ***/

/*** SKILLS TAG ***/
.skill_tag{border-radius:3px; padding:2px 3px;white-space:nowrap;color:#fff;font-size:14px;}
.html{background-color:#CC4119;}.css{background-color:#0070BB;}.bootstrap{background-color:#593688;}.php{background-color:#6B70AD;}.js{background-color:#A46904;}
.ajax{background-color:#0783CB;}.csharp{background-color:#690081;}.python{background-color:#3771A4;}.symfony{background-color:#000000;}.mysql{background-color:rgb(116, 109, 109);}
.winforms{background-color:#26C6DA;}.and-studio{background-color:#88BB50;}.wordpress{background-color:#247FA3;} 
.prestashop{background-color:#DE006E;}
/*** END SKILLS TAG ***/

/*** CUSTOM SCROLLBAR ***/
body::-webkit-scrollbar {width:0.8em;}
body::-webkit-scrollbar-track {box-shadow:inset 0 0 6px rgba(0, 0, 0, 0.3);}
body::-webkit-scrollbar-thumb {background-color:rgb(80, 79, 79);}
body::-webkit-scrollbar-thumb:active{background-color: rgb(58, 58, 58);}
/*** END CUSTOM SCROLLBAR ***/

/*** YU-Gi-OH CARD ***/
.yugioh_card_bloc{position: absolute;top:40%;left:50%;transform:translate(-50%, -50%);z-index:4;}
.yugioh_card{background-size:contain;background-repeat:no-repeat;
height:470px;width:323px;position: relative;font-family:'MatrixBook',sans-serif;border-radius:5px;cursor:grab;
box-shadow:rgb(21, 21, 21) 0px 20px 30px -10px;animation:1s linear infinite alternate card;margin:2rem auto;color:#000;}
.yugioh_card{background-image:url('../img/ygo/layouts/ygo-card-effect-monster.webp');}
.yugioh_card:hover{animation:unset !important;}
.yugioh_card__title{color:#000;user-select:none;}.yugioh_card__title__small{font-size:22px;}
.yugioh_card__header{position:absolute;top:5%;left:7%;font-size:24px;letter-spacing:1px;}.yugioh_card__header *{margin:0;padding:0;}
.yugioh_card__image{width:250px;height:250px;position:absolute;top:18.1%;left:11%;background-size:cover;background-repeat:no-repeat;}
.yugioh_card__image{background-image:url('../img/profiles/bird-pp-medium.webp');}
.yugioh_card__image > div{overflow:hidden;width:100%;height:100%;}
.yugioh_card__description{user-select:none;}
.yugioh_card__description__header{position:absolute;max-width:275px;top:75.8%;left:7.5%;letter-spacing:1px;font-weight:bold;}
.yugioh_card__description__content{position:absolute;max-width:275px;top:80%;left:7.5%;}
.yugioh_card__stat{position:absolute;}.yugioh_card__stat--atk{left:64%;top:90.8%;}.yugioh_card__stat--def{left:84%;top:90.8%;}
/* yugioh back card*/
.yugioh_back_card{position:absolute;}
.yugioh_back_card__inner{background-size:contain;background-repeat:no-repeat;box-shadow: rgb(21, 21, 21) 0px 20px 30px -10px;border-radius:7px;}
.yugioh_back_card--w50{z-index:1;}
.yugioh_back_card--w50 .yugioh_back_card__inner{background-image:url('../img/ygo/ygo-back-card-w50.png');width:50px !important;height:73px !important;filter:blur(3px);}
.yugioh_back_card--w100{z-index:2;}
.yugioh_back_card--w100 .yugioh_back_card__inner{background-image:url('../img/ygo/ygo-back-card-w100.png');width:100px !important;height:146px !important;filter:blur(2px);}
.yugioh_back_card--w250{z-index:3;}
.yugioh_back_card--w250 .yugioh_back_card__inner{background-image:url('../img/ygo/ygo-back-card-w250.png');width:250px !important;height:365px !important;filter:blur(1px);}
.yugioh_back_card--w450{z-index:5;}
.yugioh_back_card--w450 .yugioh_back_card__inner{background-image:url('../img/ygo/ygo-back-card-w450.png');width:450px !important;height:657px !important;filter:blur(.5px);}
/*** END YU-Gi-OH CARD ***/

/*** SHINE ***/
.shine div {position:relative;}
.shine div::before{position:absolute;top:0;left:-75%;z-index:2;display:block;content:'';width:50%;height:100%;
background: -webkit-linear-gradient(left,rgba(255,255,255,0) 0%, rgba(255,255,255,.3) 100%);background:linear-gradient(to right,rgba(255,255,255,0) 0%,rgba(255,255,255,.3) 100%);
-webkit-transform: skewX(-25deg);transform: skewX(-25deg);}
/* .shine div:hover::before{-webkit-animation:shine .75s;animation:shine .75s;} */
.yugioh_card:hover div::before{-webkit-animation:shine .75s;animation:shine .75s;}
@-webkit-keyframes shine{100% {left:125%;}}
@keyframes shine{100% {left:125%;}}
/*** END SHINE ***/

/*** YUGIOH CARD ***/
.bounce_card{animation:1s linear infinite alternate bounce-card;}
.bounce_card--05s{animation-duration:.5s !important;}
.bounce_card--1s{animation-duration:1s !important;}
.bounce_card--2s{animation-duration:2s !important;}
.bounce_card--3s{animation-duration:3s !important;}
@keyframes bounce-card{
  0%{transform:translate(0%, 0%);}
  50%{/*transform:scale(1, 1);*/transform:translate(0%, 3%);}
  100%{/*transform:scale(1, 1);*/transform:translate(0%, 5%);}
}
@keyframes shadow{
  0%{width:280px;}
  50%{width:295px;}
  100%{width:323px;}
}
.shadow{border-radius:100%;height:5px;background-color:rgb(15, 15, 15);top:200px;box-shadow: 0 0 5px 5px rgb(17, 16, 16);
border:1px solid rgb(15, 15, 15);animation:1s linear infinite alternate shadow;margin:0 auto;margin-top:80px;}
/*** END YUGIOH CARD ***/

/*** STICKY MENU ***/
@keyframes stickymenu {
  0% {top:-70px;opacity: 75%;}
  50%{top:0px;opacity: 100%;}
}
.stickymenu{animation:stickymenu .3s linear forwards !important;}
.stickymenu{position:fixed;width:100%;}
.menu--is-sticky .page{padding-top:72px;}
/*** END STICKY MENU ***/

/* SPIN */
@keyframes spin {
  from {transform:rotate(0deg);}
  to {transform:rotate(360deg);}
}