html {
    box-sizing: border-box;
}
*,
*::before,
*::after {
    box-sizing: inherit;
}


body {
  
    margin: 0;
    padding: 0;
    

   color: black;
   
  background-color:  rgb(219, 213, 213);;
  font-size: 1rem;
   

}

.wrapper{
margin: 0;
padding: 0;
}





header 
 {
    
    margin: 0;
    padding: 0;

 }
nav ul {
    display: flex;
    flex-flow: row wrap;
    list-style: none;
    justify-content: space-evenly;
    list-style-type: none;
    padding: 0;
    margin: 0;
}
nav li:first-child {

    padding: 0;
    flex-basis: 100%;
    text-align: center;
   

  }

  nav li{
    border: solid black;
    color: orange;
    background-color: #2F1259;
    text-align: center;


  }

nav a {
  display: block;
  color: orange;
 
}

.two, .three {

padding: 0.5rem;
text-decoration: none;


}
nav li:not(li:first-child){

  border-radius: 5px;
  border:solid black;
  background-color: #2D2D61;

}

.homePage{
    text-decoration: none;
}

.artName ul li {

    display: inline-block;
    text-align: left;
    /* color: #2F1259; */
    color: white;

}

.textContainer {


    display: flex;
    gap: 32rem;
    justify-content: end;
    background-color: black;
    /* background-color: grey; */
    /* background-color: rgb(32, 29, 29); */
    font-family: 'Signika Negative', sans-serif;
    margin-bottom: 1rem;
   


}

.artName {
    border: black solid;
    /* background-color: rgb(219, 213, 213); */
    background-color: #2F1259;
    border-radius: 5px;
   
    margin: 0;
    color: orange;




}

.opening {

    margin:  0;
    padding: 1rem 0;
    background-color: rgb(123, 123, 155);
    text-align: center;
    
   
    
    
   
   
}

.direction {
    

    border: black solid;
    border-radius: 5px;
  margin: 0;
  /* color: #2F1259; */
  /* color: orange; */
  color: white;
  /* background-color: rgb(219, 213, 213); */
 background-color: #2F1259;

 
 
  text-align: center;

}



  .platform {
    display: flex;
    flex-flow: row nowrap;
    list-style: none;
  justify-content: center;
    
    gap: 5rem;
    border: solid green;
    overflow: auto;
    background-color: #2D2D61;
    padding: 1rem 0;
    /* background-color: #00374E; */
  

  }

  .tempH{height: 54px;}

  .platform li {
    border-radius: 5px;
    color: white;

 
    
  }

  .platform li a {
    display: block;
    color: white;

  
    
   
  }

 

  .search {

    display: flex;
    justify-content: center;
    gap: 2rem;
   
    padding-bottom: 6px;
    
  }

  .search-tiltle {

    text-align: center;
    margin-top: 0.4rem;
    margin-bottom: 1rem;
    color: orange;
   
    

     

  }

  .search-con {
    background-color: #2F1259;
    border-top: solid black;
    border-bottom: solid black;
    
    margin-bottom: 1rem;
    

  }

  .results {

    background-color: white;
    text-align: center;
 
    border: solid black;
 
    margin-bottom: 1rem;
    
    
    
  
   
  }

  .no-results  {

    height: 4rem;








  }





  .other {
    background-color:  rgb(219, 213, 213);
  }



  .artName {
    width: 560px;
    margin-bottom: 1rem;
    padding-left: 10rem;

 
  }

  .LS {
    border: dotted black;
   
       
    content: "";
    display: table;
    clear: both;
  
   
  

   display: flex;
   gap: 2rem;
   max-width: 300px;
   max-height: 450px;

   
 
   
   
}

.LS img {

    max-width: 200px;
    height: 438px;

}
.l-image {
    flex-basis: 50%;
    
    
}
.r-image {
    flex-basis: 50%;
   
}

.LS{
    position: absolute;
    top: 150px;
    left: 100px;
    max-height: auto;
    max-width: auto;

}




  

.section  {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
   
   height: auto;
   gap: 1rem;
    

  
    
  
  
    margin-top: 0;


    flex-basis: 45%;
    padding: 0;

 
    
   
   
   
 

}
.container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 1rem;
    overflow: hidden;
 
   
 
    flex-basis: 45%;

    border: solid black;
 
    
   




    
}

.container div {
  
    max-height: 345px;
}



.multi-view {
   
    display: flex;
    flex-wrap: wrap;
    
    justify-content: center;
    align-items: center;
    margin: 0;
    padding: 0;
  
   
     /* Add this to enable scrolling when content overflows */
  
    /* Adjust the maximum height based on your needs */
    
    
    

    
    
}

.multi-view div {
    padding: 0;
    
}

.draw {
    border: solid black;
    
}

.row {
    display: flex;
   
    margin: 0;
    padding: 0;
    min-height: 76px;
    

    

}

.multi-view img {
    width: 100%;
    height: 100%;
    padding: 0;
  

    
}

.single-view img {
    width: 100%;
    height: 100%;
    
}
.draw img {
    width: 100%;
    height: 100%;
}

.screen {
    display: flex;
  
    flex-flow: nowrap;
    /* background-color: rgb(219, 213, 213); */
    /* background-color: #5C0C26; */
    /* background-image: url(images/Mago\ negro.jpg); */


   
   justify-content: space-between;
    max-height: 345px;

    
}

.screen img {
    width: 100%;
    height: 100%;
}

.button {
    display: flex;
   
  
   
    
   justify-content: center;
   flex-flow: row nowrap;
   max-height: 30px;
   max-width: 600px;
   margin-left: auto;
   margin-right: 4rem;
    margin-top: 0.25rem;
    margin-bottom: auto;
    gap: 2rem;
    padding-bottom: 1rem;

    
   
}
.left, .right {
    height: 100% ;
    color: purple;
}

footer {

     border-top: solid black;    /* footer for max width of 700px has 25rem margin top */
    margin-bottom: 0;
    margin-top: 2rem;
    padding: 1rem 0;
     
    
    border-width: 5px;
    background-color: #2F1259;
}

#contact {
   
    text-align: center;
    /* background-color: #808080; */
    /* background-color: #7B7B9B; */
    background-color: #2F1259;
    color: orange;
    
}

.home ul {
    
    border: solid black;
    color: orange;
    background-color: #2F1259;
    text-align: center;
    margin: 0;
    padding: 0;
    justify-content: space-evenly;

}

.home li{

   display: inline-block;

}

.home li a {
    color: orange;
}

#contact a {

    color: white;
}

.bottom, .below {
    display: flex;

    justify-content: center;
    gap: 2rem;


}

.below {

    margin: 2rem 0;
}


.wrapper2 p{
    font-size: 110%;

}
.polf, .info {

    font-size: 120%;
}

.info{
    padding: 0 1rem;

}

.artistProfile{
    width: 100%; 
    margin-top: 20px;
     padding: 40px; 
     background-color:#f8f8f8;
      border-radius: 8px; 
      text-align: justify;
      margin-bottom: 4rem;
      border-top: solid black;
}

.hpol {

    margin-bottom: 3rem;
}
.wrapper3{
    margin: 0;
    
}

.description {
            margin-bottom: 2rem;
            padding: 1rem;
            border-top: solid #2F1259;
            border-bottom: solid #2F1259;
            border-radius: 25px;
            background-color: rgb(229, 228, 226);
            color: black;
  			font-size: 110%;
  
  

}



.social ul{

    display: flex;
    flex-flow: row nowrap;
    list-style-type: none;
   
    justify-content: center;
    text-align: center;
    margin-right: 2rem;
    gap: 3rem;



}



 .social [class*="fa-"]:hover {
    color: orange;
}


.descriptionContainer{
    padding: 0 2rem;
}

.about{
    margin-left: 1rem;
    text-align: center;
}
.sides{

    border-left: solid #2F1259;
    border-right: solid #2F1259;
    border-width: 3rem;
}


.contactPage{

    text-align: center;
}

.socialLinks{
    text-align: center;
}

.digital-art-categories, .art-appreciation-guide{
    border-top: solid #2F1259;
    border-bottom: solid #2F1259;
    margin-bottom: 2rem;
}




#ctwo ul{
    display: flex;
    flex-flow: row nowrap;
    list-style-type: none;
   
    justify-content: space-evenly;
    text-align: center;
    margin-right: 2rem;

}

/* #ctwo li{
    flex-basis: auto;
    
} */


#ctwo {
    max-width: 300px;
    margin: 0 auto;
    justify-content: center;
    text-align: center;
}

#ctwo [class*="fa-"] {

    font-size: 300%;
    
}

#ctwo [class*="fa-"]:hover {
    color: orange;
}

.aff{ width: 100%;
    


}

.affcon{
    margin-bottom: 0;

}

.footer1 {

    padding-top: 0;
}

.opening, .results, .platform, .textContainer{
    font-size: 110%;
    
}


.privacybox, .hpol {
    padding-left: 1rem;
}

@keyframes spin {
    to{
        transform: rotateZ(360deg);
    }
    
}

.loading {
    text-align: center;
    animation: 2s spin linear infinite;
    margin: 0;
    padding: 0;
    visibility: hidden;
 

    
}

.start {
    visibility: visible;
}



.show {
    display: none
}





@keyframes moveLeftToRight {
    0% {
        transform: translateX(0); /* Start from initial position */
    }
    100% {
        transform: translateX(100%); /* Move to the right */
    }
}





/* Apply the animation to the .platform li elements */
.platform li {
/* ... other styling properties ... */
animation: moveLeftToRight 7s linear ; /* 5 seconds duration, linear easing, infinite loop */
}







@media screen and (min-width: 0px ) {

    .section {flex-basis: 55%;
        


    
}

.direction {

    height: 89px;
    width: 187px;
    overflow: hidden;
}

.artName {
    padding-left: 0;
    max-width: 281px;
    height: 89px;
    overflow: hidden;
  
}

.textContainer {

    max-height: 92px;
    gap: 6rem;

  



}
}

@media screen and (max-width: 700px ) {

    .screen{

        display: block;
        border: none;



    }

    .section{
        max-height: 345px;
        margin-bottom: 4rem;
        overflow: auto;
    }
    


   
   .multi-view {

        max-height: 345px;
    }

    .container {

        max-height: 345px;
        margin-top: 5rem;
    }

    .info{

        margin-top: 25rem;
    }

    .footer1 {
        margin-top: 5rem;
    }

  
     .sides{

        
        border-width: 1.5rem;
    }

    .textContainer{
        font-size: 100%;
    }


}

@media screen and (min-width: 700px) {
    .section {

        min-width: 393px;
        flex-basis: 45%;


    
    }
    
    .direction {
    
        height: 89px;
    }
    
    .artName {
        padding-left: 10px;
        width: 560px;
        max-height: 100%;
       
    }
    .row{
        max-height: 82px;
    }

    .multi-view, .single-view, .draw {

        max-height: 345px;
        
    }
    .textContainer {
        gap: 40%;

    }
  
     .sides{

        
        border-width: 3rem;
    }


}

@media screen and (min-width: 1300px) {
    .search-tiltle{
        font-size: 140%;
        
    }

    .textContainer{
        gap: 50%;
        font-size: 90%;
        
    }
    .artName{
        height: 91px;
    }
    .info,.platform,.footer1, .wrapper, .wrapper4,.wrapper3,.wrapper2{
        font-size: 130%;
    }
    .authors select, .enterCard input, .cardSearch button{
        height: 110%;
        
    }
    .search{
        margin-bottom: 5px;
    }

 

    .screen {
        border-bottom: none
    }


   


}