:root{
    --font-famay: "Libre Franklin", serif;
    --max-size: 100%;
    --button-color: #bf77da;
    --font-color:black;
  }

header{
    padding-bottom: 20%;
    background: linear-gradient(0deg, rgba(191,119,218,1) 59%, rgba(105,118,248,1) 80%, rgba(70,82,218,1) 100%);
    -webkit-mask-image: url("https://ucarecdn.com/9514f9b1-3bf9-4b7c-b31d-9fb8cd6af8bf/");
    mask-image: url("https://ucarecdn.com/9514f9b1-3bf9-4b7c-b31d-9fb8cd6af8bf/");
    /* -webkit-mask-image: url('images/black-paper.png');
    mask-image: url('images/black-paper.png');
     */
}
    

img{
    width: 90%;
    padding: 1rem;
    
}

p{
    font-size: 1rem;
}

h3{
    font-size: 1.2rem;
    font-family: var(--font-famay);
    color: var(--font-color);
}

article{
    background: linear-gradient(0deg, #bf77da 0%, #feadd8 32%, #f5b9ed 68%, #bf77da 100%);
    -webkit-mask-image: url("https://ucarecdn.com/9514f9b1-3bf9-4b7c-b31d-9fb8cd6af8bf/");
    mask-image: url("https://ucarecdn.com/9514f9b1-3bf9-4b7c-b31d-9fb8cd6af8bf/");
    margin: 0;
    padding-top: 20px;
    padding-bottom: 20%;
    
}

header{
  text-align: center;
}
#photo-channel, #pdf-channel, #text-channel, #music-channel, #audio-channel, #video-channel{
  gap: 1rem;
  
}

#channel-title{
    padding-top: 30%;
    font-size: 4rem;
    text-align: center;
    font-family: var(--font-famay);
    font-style: bold;
    -webkit-box-reflect: below 10px linear-gradient(to bottom, rgba(0,0,0,0.0), rgba(0,0,0,0.4));
}

#subtitle{
    font-family: var(--font-famay);
    margin-top: 10rem;
    font-size: 1.5rem;
    text-align: center;
    font-style: italic;
    font-weight: 200;
}

#link{
    text-align: center;
    padding-top: 20%;
}


#video-channel{
    flex-wrap: wrap;
    justify-content: space-between; 
}

li{
    list-style-type: none;
    display: block;
    
}


.flip-card {
  max-width: var(--max-size); 
  max-height: var(--max-size);  
  perspective: 1000px;
  margin-top: 60px; 
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  /* border: 2px solid black; */
  margin: 2rem;
}


.flip-card img{
    object-fit: cover;
}


.content {
  position: relative;
  width: var(--max-size);
  height: var(--max-size);
  text-align: center;
  transition: transform 2s;
  transform-style: preserve-3d;
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
  aspect-ratio: 1 / 1;
}

.flip-card:hover .content{
  transform: rotateY(180deg);
}

.card-front, .card-back {
  position: absolute;
  width: var(--max-size);
  height: var(--max-size);
  backface-visibility: hidden;
  background-color: rgba(255, 255, 255, 0.3)
}

.card-front img{
    object-fit: cover;
}

.card-back {
  /* background-color: #f1f1f1;  */
  color: var(--font-color);
  transform: rotateY(180deg);
  padding: 10px; 
  box-sizing: border-box;
  font-size: 20px;
}

.card-back p{
    /* max-height: 200px;  */
    overflow: hidden;
    transition: max-height 0.2s ease-out;
}


.flip-card.scroll-flip .content {
    transform: rotateY(180deg);
    transition: transform 0.6s ease-in-out; /* Adjust timing as needed */
}

.flipped .content {
    transform: rotateY(180deg);
}

.video-content{
    max-width: var(--max-size);
    max-height: var(--max-size);
}

.card-back .spotify{
  
  max-height: var(--max-size); 
  overflow: auto; 
}

.modal {
    display: none; 
    position: fixed; 
    z-index: 1; 
    left: 0;
    top: 0;
    width: var(--max-size); 
    height: var(--max-size); 
    overflow: auto; 
    /* background-color: rgb(0,0,0); */
    background-color:var(--font-color); 
  }
  
  .modal-content {
    background-color: #fefefe;
    margin: 15% auto; 
    padding: 20px;
    border: 1px solid #888;
    width: 80%; 
  }
  
  .close-button {
    color: var(--button-color);
    float: right;
    font-size: 28px;
    font-weight: bold;
  }
  
  .close-button:hover,
  .close-button:focus {
    color: var(--font-color);
    text-decoration: none;
    cursor: pointer;
  }

  .video-content{
    position: relative;
    padding-bottom: 56.25%; 
    height: 0;
    overflow: hidden;
  }
  
  .video-content iframe,
  .video-content object,
  .video-content embed {
      position: absolute;
      top: 0;
      left: 0;
      width: var(--max-size);
      height: var(--max-size);
  }

  .toggle-button {
    
    border: 2px solid var(--button-color); 
    color: var(--font-color);
    background-image: linear-gradient(45deg,var( --button-color) 50%, transparent 50%);
    background-size: 400%;
    background-position: var(--max-size);
    transition: background-position 300ms ease-in-out;
    height: 10%;
    border-radius: 10%;
    font-family: var(--font-famay);
  }

  .toggle-button:hover {
    background-position: 0; 
}

.text-t p{
  font-size: 1.3rem;
  font-family: var(--font-famay);
  padding: 1rem;
  font-weight: 500;
}
  

  @media (min-width:600px) {
    #channel-title{
      font-size: 5.5rem;
      
    }
    .text-t p{
      font-size: 1.3rem;
      font-family: var(--font-famay);
      padding: 2rem;
    }

    #subtitle{
      font-size: 2rem;
      margin-top: 20rem;
      padding-left: 1.3rem;
      padding-right: 1.3rem;
    }

  }

  @media (min-width: 768px){
    #photo-channel, #pdf-channel, #text-channel, #music-channel, #audio-channel, #video-channel, #article-channel{
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 1rem;
        
    }

    #channel-title{
        font-size: 7rem;
        
      }

      .text-t p{
        font-size: 1.3rem;
        font-family: var(--font-famay);
        padding: 3rem;
      }
  }

  @media (min-width:1024px) {
    #channel-title{
      font-size: 10rem;
    }

    #subtitle{
      font-size: 3rem;
      margin-top: 30rem;
    }

    .photo-content p, #modal-text p{
      font-size: 1rem;
    }

    .text-t p{
      font-size: 2rem;
      font-family: var(--font-famay);
      padding: 3rem;
    }

  }
 


  

@media (min-width:1440px) {

    body{
        
    }

    header{
        /* height: 100%; */
        padding-bottom: 20%;
    }

    article{
        padding-right: 2rem;
       
    }

    h1{
        font-size: 5rem;
        padding-top: 20%;
    }

    h2{
        font-size: 4rem;
        
    }
    #subtitle{
        font-size: 4rem;
        margin-top: 30%;
    }
    img{
        padding: 1.6rem;
        object-fit: cover;
        /* width: 80%; */
    }

    #channel-title{
        font-size: 15rem;
        padding-top: 15%;
      }

    .flip-card img{
        object-fit: cover;
    }
    
   
    #photo-channel, #pdf-channel, #text-channel, #music-channel, #audio-channel, #video-channel, #article-channel{
        /* display: grid;
        grid-template-columns: repeat(2,minmax(0,1fr)); */
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        gap: 1rem;
        /* padding-left: 2rem; */
        margin-right: 2rem;
        
    }
    
    #text-channel{
        margin-top: 10rem;
    }

    .flip-card {
        /* width: 100%; 
        height: 100%;   */
        perspective: 1000px;
        margin-top: 60px; 
        position: relative;
        aspect-ratio: 1 / 1;
        overflow: hidden;
        margin-top: 5rem;
      
      }

      .toggle-button {
        height: 10%;
        font-size: 1rem;
      }

      .photo-content p, #modal-text p{
        font-size: 1.5rem;
      }

      .text-t p{
        font-size: 2rem;
        font-family: var(--font-famay);
        padding: 3rem;
      }
      
}