@charset "utf-8";

*{
	box-sizing: border-box;
	--bs-gutter-x: 0rem !important;
}

body{
	background-color: rgb(43, 43, 43);
	color: white;
}

.hidden{
    display: none;
}

header{
    padding: 30px;
}

.banner{
    font-family: Interceptor;
    text-align:center;
    top: 50%;
    position: relative;
}

.banner-top,
.banner-bottom{
    position: absolute;
    width: 100%;
    font-size: 3vw;
    -webkit-text-fill-color: transparent;
    background: linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(255,241,194,1) 12%, rgba(253,220,49,1) 33%, rgba(253,220,49,1) 54%, rgba(253,172,49,1) 56%, rgba(253,220,49,1) 58%, rgba(253,172,49,1) 61%, rgba(253,220,49,1) 64%, rgba(253,172,49,1) 69%, rgba(253,220,49,1) 63%, rgba(253,172,49,1) 78%, rgba(253,172,49,1) 100%);
    -webkit-background-clip: text;
}
.banner-bottom{
    left: 5px;
    top:5px;
    background: black;
    -webkit-background-clip: text;
}

.text-right{
    text-align: right;
}

@font-face {
    font-family: "CardName";
    src: url("../font/Yu-Gi-Oh! Matrix Regular Small Caps 1.ttf");
}

@font-face {
    font-family: "CardStat";
    src: url("../font/b176947785aaf7452749f550b10890d6.otf") format("opentype");
}

@font-face {
    font-family: "CardLore";
    src: url("../font/Yu-Gi-Oh! ITC Stone Serif LT Italic.ttf");
}

@font-face {
    font-family: "CardEffect";
    src: url("../font/Yu-Gi-Oh! Matrix Book.ttf");
}

@font-face {
    font-family: "CardType";
    src: url("../font/Yu-Gi-Oh! ITC Stone Serif Bold Small Caps.ttf");
}

@font-face {
    font-family: "CardCreator";
    src: url("../font/StoneSerifStd-Semibold.otf") format("opentype");
}

@font-face {
    font-family: "Interceptor";
    src: url("../font/Interceptor Italic.otf") format("opentype");
}

[class*="col-"]{
	float: left;
	width: 100%;
}

@media only screen and (min-width: 1024px) {
	/* For desktop: */
	.col-1 {width: 8.33%;}
	.col-2 {width: 16.66%;}
	.col-3 {width: 25%;}
	.col-4 {width: 33.33%;}
	.col-5 {width: 41.66%;}
	.col-6 {width: 50%;}
	.col-7 {width: 58.33%;}
	.col-8 {width: 66.66%;}
	.col-9 {width: 75%;}
	.col-10 {width: 83.33%;}
	.col-11 {width: 91.66%;}
	.col-12 {width: 100%;}
}

.row::after {
    content: "";
    clear: both;
    display: table;
}

[class*="card-"]{
    position: absolute;
}

.display{
    position: relative;
}

.display-card,
.display-card-2,
.display-card-3{
    position: relative;
    width: fit-content;
	color: black;
}

.card-image,
.card-image-2,
.card-image-3{
    top: 10%;
    left: 0%;
    width: 90%;
    max-height: 90%;
}

.card-image-overlay,
.card-image-overlay-2,
.card-image-overlay-3{
    top: 10%;
    left: 0%;
    width: 100%;
    max-height: 100%;
    z-index: 2;
}

.note {
    font-style:italic;
}

.card-frame,
.card-frame-2,
.card-frame-3{
    position: relative;
    top: 0px;
    left: 0px;
}

.card-frame-bottom,
.card-frame-bottom-2,
.card-frame-bottom-3{
    z-index: 2;
    position: absolute;
    bottom: 0%;
}

.card-attribute,
.card-attribute-2,
.card-attribute-3{
    top: 3.3%;
    left: 81.1%;
    width: 14.3%;
    z-index: 10;
}

#card-displays {
    white-space: nowrap;
    overflow: display;
    width: 2500px !important;
}

.card-image-1,
.card-image-overlay-1{
    clip-path: inset(0% 67% 0% 0%);
    transform: translate(0, 0);
    width: 303%;
    height: auto;
    max-height: 90%;
}

.card-image-2,
.card-image-overlay-2 {
    clip-path: inset(0% 34% 0% 33%);
    transform: translate(-33%, 0);
    width: 303%;
    height: auto;
}

.card-image-3,
.card-image-overlay-3 {
    clip-path: inset(0% 1% 0% 66%);
    transform: translate(-66%, 0);
    width: 303%;
    height: auto;
}



.connected {
    width: 812px;
    display: inline-block !important;
}

.card-name,
.card-name-2,
.card-name-3{
    top: -0.5%;
    left: 3%;
    font-family: CardName;
    white-space: nowrap;
    width: 640px;
    padding: 0% 2% 0% 2%;
    text-align: left;
}

.card-name-1,
.card-name-1-2,
.card-name-1-3{
    font-size: 600%;
    text-align: left;
    left: 20px;
}

.card-stats,
.card-stats-2,
.card-stats-3{
    top: 66.5%;
    left: 5%;
    width: inherit;
    z-index: 2;
}

.card-maximum{
    top: 61.6%;
    left: 11.5%;
    width: inherit;
    z-index: 3;
}

.card-level,
.card-level-2,
.card-level-3{
    top: 59.8%;
    left: 6.1%;
    text-align: center;
    width: 15%;
    z-index: 4;
}

.card-level p,
.card-level-2 p,
.card-level-3 p{
    font-family: CardStat;
    text-align: center;
    position: absolute;
    font-size: 380%;
    top: 28%;
    width: 100%;
    color: white;
    z-index: 5;
    text-shadow: 0px 0px 7px #000000, 0px 0px 7px #000000, 0px 0px 7px #000000, 0px 0px 7px #000000, 0px 0px 7px #000000;
}

.card-max-atk{
    font-family: CardStat;
    font-size: 240%;
    top: 61.6%;
    color: white;
    z-index: 3;
    text-shadow: 0px 0px 7px #000000, 0px 0px 7px #000000, 0px 0px 7px #000000, 0px 0px 7px #000000, 0px 0px 7px #000000;
}

.card-atk,
.card-def,
.card-atk-2,
.card-def-2,
.card-atk-3,
.card-def-3{
    font-family: CardStat;
    font-size: 240%;
    top: 66.8%;
    color: white;
    z-index: 3;
    text-shadow: 0px 0px 7px #000000, 0px 0px 7px #000000, 0px 0px 7px #000000, 0px 0px 7px #000000, 0px 0px 7px #000000;
}

.card-atk,
.card-atk-2,
.card-atk-3{
    right: 48.5%;
}

.card-def,
.card-def-2,
.card-def-3,
.card-max-atk{
    right: 18%;
}

.card-lore,
.card-effect,
.card-lore-2,
.card-effect-2,
.card-lore-3,
.card-effect-3{
    z-index: 4;
    font-size: auto;
    margin: 6%;
    top: 72%;
    left: 0%;
    width: 88%;
    height: 17%;
    padding: 0% 1% 0% 1%;
}

.card-lore.normal-monster-only,
.card-lore-2.normal-monster-only,
.card-lore-3.normal-monster-only{
    font-family: CardLore;
    width: 720px;
}

.card-effect.effect-monster-only,
.card-effect-2.effect-monster-only,
.card-effect-3.effect-monster-only{
    font-family: CardEffect;
}

.lore,
.effect,
.lore-2,
.effect-2,
.lore-3,
.effect-3{
    height: fit-content;
}

.card-type-1::before,
.card-type-1-2::before,
.card-type-1-3::before{
    content: "[";
}

.card-type-1::after,
.card-type-1-2::after,
.card-type-1-3::after{
    content: "]";
}

.card-type,
.card-type-2,
.card-type-3{
    font-family: CardType;
    font-size: 170%;
    top: 71.8%;
    left: 7%;
}

.card-st-type.left-28{
    width: 4.5%;
    top: 72.3%;
    left: 28%;
    z-index: 100;
}

.card-st-type.left-27{
    width: 4.5%;
    top: 72.3%;
    left: 27%;
    z-index: 100;
}

.card-legend{
    top: 10.5%;
    left: 5.5%;
    width: 25.6%;
    z-index: 2;
}

.card-creator,
.card-creator-2,
.card-creator-3{
    font-family: CardCreator;
    color: white;
    top: 94%;
    left: 6%;
    font-size: 110%;
    width: 33%;
    z-index: 4;
}

.card-creator::before,
.card-creator-2::before,
.card-creator-3::before{
    content: '© ';
    font-family: CardCreator;
    color: white;
    font-size: 100%;
    z-index: 4;
}

.card-set-number,
.card-set-number-2,
.card-set-number-3{
    text-align: right;
    font-weight: bold;
    font-family: "MS UI Gothic";
    color: white;
    top: 93.7%;
    right: 6%;
    font-size: 130%;
    width: 33%;
    z-index: 4;
}

.info-input{
    padding: 50px;
}

.info{
    height: 100%;
    padding: 10px;
}

.input{
    height: 100%;
    width: 100%;
    padding: 10px;
	color: white;
	background-color: rgb(43, 43, 43);
}

.input-3{
    height: 100%;
    width: 20%;
    padding: 10px;
	color: white;
	background-color: rgb(43, 43, 43);
}

textarea.input{
    height: 200px;
}

.padding-5{
    padding: 0px 5px 0px 5px;
}

.rarity-rush{
    color: #e5e619 !important;
}

.info h2{
    font-size: 110%;
    font-weight: normal;
}

.card-type-1,
.card-type-1-2,
.card-type-1-3{
    z-index: 4;
    position:relative !important;
    display: inline;
    padding-right: 0px;
}

.card-type-1.p40,
.card-type-1-2.p40,
.card-type-1-3.p40{
    z-index: 4;
    padding-right: 40px;
}

.card-type-1.p50,
.card-type-1-2.p50,
.card-type-1-3.p50{
    z-index: 4;
    padding-right: 50px;
}

.card-type-1.p40:after{
    padding-left: 40px;
}

.card-type-1.p50:after{
    padding-left: 40px;
}

.card-type-1.white-text,
.card-name-1.white-text{
    color: white;
}