#idContent{
    border: 4px double #F2F3F4;
    border-radius: 3px;
    padding: .5rem;
}

    #idContent > legend{
        padding: 0 .4rem;
        user-select: none;
    }

#idContent::-webkit-scrollbar{
	width: 13px;
}

/* Modifica la (pastilla) del scroll */
#idContent::-webkit-scrollbar-thumb{
    background-image: linear-gradient(to bottom, #D7DBDD 30%, #E5E7E9 60%, #F2F3F4 80%);
    border-radius: 3px;
}

.back{
	display: block;
	width: 100vw; height: 100vh;
	background-image: url("images/background.jpeg");
	background-position: center;
	background-size: 100% 100%;
	background-repeat: no-repeat;
	transform: rotateX(180deg);
	z-index: 0;
}
.invert{filter: invert(100%);}

.invert-on-hover{filter: invert(100%);}
.invert-on-hover:hover{filter: invert(0);}

.rounded-1\/2{
    border-radius: 50%;
}

.list-style-full{
    margin: 0 1rem;
}.list-style-full > li{
    margin: 0.6rem 0;
    list-style-type: disc !important;
    list-style-position: inside !important;
}

.shadow-personalize{
	box-shadow: 
		0 0 5px 3px rgb(255, 255, 255), 
		0 0 10px 15px rgb(255 255 255 / 30%);
}

.shadow-purple{
	box-shadow: 
		0 0 16px 6px rgba(124,58,237,var(--tw-bg-opacity)), 
		0 0 60px 6px rgba(124,58,237,var(--tw-bg-opacity));
}

.container-cube{
	display: block;
	width: 200px;
	height: 200px;
	margin: auto;
	margin-top: 190px;
	perspective: 1000px;
	transform: scale(0);
}

	.cube{
		position: absolute;
		top: 0; right: 0; bottom: 0; left: 0;
		display: block;
		width: 100%;
		height: 100%;
		transform-style: preserve-3d;
		animation-name: cube;
		animation-duration: 9s;
		animation-delay: 0;
		animation-direction: reverse;
		animation-timing-function: linear;
		animation-iteration-count: infinite;
		animation-fill-mode: forwards;
	}

		.cube > figure{
			position: absolute;
			top: 0; right: 0; bottom: 0; left: 0;
			width: 100%;
			height: 100%;
			border: 6px dashed #000;
			background-color: rgba(0, 255, 108, 10%);
			box-shadow: 0 0 10px 3px rgb(248 255 0 / 60%);
		}

		.cube > figure:nth-child(2){
			background-color: rgba(0, 22, 255, 30%);
			transform: rotateY(90deg) translateX(-99px);
			top: 0; left: -102px;
		}

		.cube > figure:nth-child(3){
			top: 0; left: 101px;
			transform: rotateY(-90deg) translateX(103px);
			background-color: rgba(236, 0, 255, 0.6);
		}

		.cube > figure:nth-child(4){
			top: 0; left: 103px;
			transform: rotateY(180deg) translateX(103px) translateZ(-202px);
			background-color: rgba(255, 0, 0, 0.6);
		}

		.cube > figure:nth-child(5){
			top: -101px;
			transform: rotateX(90deg) translateY(101px);
			background-color: rgba(255, 204, 0, 0.6);
		}

		.cube > figure:last-child{
			background-color: rgba(0, 0, 0, 60%);
			transform: rotateX(90deg) translateY(100px);
			top: 102px;
		}

		@keyframes cube{
			from{
				transform: rotateY(360deg) rotateX(360deg);
			}

			to{
				transform: rotateY(0) rotateX(0);
			}
		}

body::-webkit-scrollbar{
	width: 20px;
	background-color: #fff;
	border-left: 2px solid #000;
}

body::-webkit-scrollbar-thumb{
	background-color: #000;
	border-radius: 6px;
}

.modal{
    visibility: hidden;
    background-color: rgba(0,0,0,0.6);
}.modal > article{
    transition: 300ms all ease;
    transform: scale(0) translateY(-200%);
    opacity: 0;
}.modal.visible{
    visibility: visible;
}.modal.visible > article{
    transform: scale(1) translateY(10%);
    opacity: 1;
}