body {
  background-color: #2a2d42; /* Color de fondo si la imagen no carga o tiene transparencia */
  font-family:"Nunito Sans", sans-serif;
  background-image: url(https://mediacampus.cuaed.unam.mx/mediacampus/sites/default/files/inline-images/v2025/back-05.jpg);
  background-attachment: fixed;
}

/*estilos card principal*/
.nft {
  user-select: none;
  background: linear-gradient(0deg, rgba(39,43,51,.70) 35%, rgba(0, 0, 0, 0.3) 60%);
  box-shadow: 0 7px 20px 5px #00000088;
  border-radius: 0.7rem;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  overflow: hidden;
  transition: 0.5s all;
}


	.nft-2 {
  background: linear-gradient(0deg, #2c2a5b 5%, rgba(17, 0, 32, 0.5) 60%);
}
.nft hr {
  width: 100%;
  border: none;
  border-bottom: 1px solid #ffbd00;
  margin-top: 0;
}

.nft h2 {
  font-size: 1.1em;
	margin-bottom: 10px;
	color: lavenderblush;
	font-family:"Nunito Sans", sans-serif;
}

.nft .main {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 1rem;
}

	.nft .main a {
  text-decoration: none;
 
}


.image-container {
    position: relative; 
    width: 100%;
	  transition: 0.7s all;
   
}
.image-container:hover {
  transform: scale(1.015);
  filter: brightness(1.3);
		cursor: pointer;
}

.nft .main .tokenImage {
  border-radius: 0.5rem;
  max-width: 100%;
  height: auto;
  object-fit: cover;
  display: block; 
}
.nft .main .description {
  color: #a89ec9;
  font-weight: lighter;
}


.nft .main .creator {
  display: flex;
  align-items: center;
  margin-top: 0.2rem;
  margin-bottom: -0.3rem;
}
.nft .main .creator p {
 font-size: .8em; 
	line-height: 15px;
	color: white;
	font-weight: lighter;
}	
	

.nft ::before {
  position: fixed;
  content: "";
  box-shadow: 0 0 100px 40px #ffffff08;
  top: -10%;
  left: -100%;
  transform: rotate(-45deg);
  height: 60rem;
  transition: 0.7s all;
}

.ico-video {
	position: inherit;
	right: 5px;
	bottom: 25px;
	z-index: 5;
	float: right;
}
.ico-play {
    position: absolute; 
    top: 40%;        
    left: 50%;     
    transform: translate(-50%, -50%); 
    z-index: 10;     
}

/* fin estilos card principal*/

.btn-outline-light {
	--bs-btn-color: #f8f9fa;
	--bs-btn-border-color: #f8f9fa;
	--bs-btn-hover-color: #000;
	--bs-btn-hover-bg: #f8f9fa;
	--bs-btn-hover-border-color: #f8f9fa;
	--bs-btn-focus-shadow-rgb: 248, 249, 250;
	--bs-btn-active-color: #000;
	--bs-btn-active-bg: #f8f9fa;
	--bs-btn-active-border-color: #f8f9fa;
	--bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
	--bs-btn-disabled-color: #f8f9fa;
	--bs-btn-disabled-bg: transparent;
	--bs-btn-disabled-border-color: #f8f9fa;
	--bs-gradient: none;
}

.views-exposed-form.views-exposed-form {
	display: flex;
	flex-wrap: wrap;
	margin-block: var(--space-l);
	padding: var(--space-xs) var(--space-l) var(--space-l) var(--space-l);
	/* border: var(--details-border-size) solid var(--details-border-color); */
	border-radius: 15px;
	background-color: transparent !important;
	/* box-shadow: var(--details-box-shadow); */
	/* background: rgba(255, 255, 255, .20); */
	/* backdrop-filter: blur(10px); */
}

.form-actions .button, .field-actions .button, .form-actions .action-link, .field-actions .action-link {
	margin-block: var(--space-xs);
	background-color: darkslateblue;
	color: white;
}

#edit-search-api-fulltext-wrapper{
	color:white;
}

 .fieldset {
	margin: 0px;
	padding: 0;
	color: white;
	border: 0px;
	border-radius: var(--base-border-radius);
	background-color: transparent;
	box-shadow: var(--details-box-shadow);
}

#edit-search-api-fulltext-wrapper .form-element {
	box-sizing: border-box;
	max-width: 100%;
	min-height: calc(((var(--input-padding-vertical) + var(--input-border-size)) * 2) + var(--input-line-height));
	padding: var(--input-padding-vertical) var(--input-padding-horizontal);
	color: white;
	border: var(--input-border-size) solid var(--input-border-color);
	border-radius: var(--input-border-radius-size);
	background: transparent;
	font-size: var(--input-font-size);
	line-height: var(--input-line-height);
	appearance: none;
}

#edit-search-api-fulltext-wrapper .form-element--type-select {
	padding-inline-end: calc(2rem - var(--input-border-size));
	background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 9'%3e%3cpath fill='none' stroke-width='1.5' d='M1 1l6 6 6-6' stroke='%23545560'/%3e%3c/svg%3e");
	background-repeat: no-repeat;
	background-position: 100% 50%;
	background-size: 2.75rem 0.5625rem;
	filter: invert(1);
	color: black;
}