@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

html, body {margin: 0; padding: 0;
    background-color: #fff;
    scroll-behavior: smooth;

    }
    
    .top-container {
      display: block;
      text-align: center;
      background-image: url(https://media3.giphy.com/media/v1.Y2lkPTc5MGI3NjExdXJ1eTdndGRra3QxZGhxYTU0dGZtbG13a2dhdHpudXFyOHRmcDNqNSZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/qsk5nSgvBFa1IDnado/giphy.gif);
      background-size: cover;
      background-repeat: no-repeat;
      background-attachment: fixed;
      float: none;

    }


    .navbar {
      overflow: hidden;
      background-color: #fff;
      text-align: center;
      z-index: 10; /* Higher than arrows */
      top: 0;
      width: 100%;
      background-color: white; /* Optional: Ensure background isn't transparent */
      box-shadow: 0 2px 5px plum; /* Optional: Add slight shadow */
      
    }
    
    .navbar a {
      font-size: 16px;
      color: #000;
      text-align: center;
      padding: 4px 60px;
      text-decoration: none;
      font-family: 'Montserrat', sans-serif;
      display: inline-block;
      list-style-type: none;
    }
    
    .dropdown {
      display: inline-block;
    }
    
    .dropdown .dropbtn {
      font-size: 16px;  
      border: none;
      outline: none;
      color: #000;
      padding: 4px 60px;
      background-color: inherit;
      font-family: inherit;
      margin: 0;
    }
    
    .navbar a:hover, .dropdown:hover .dropbtn {
      background-color: #fff;
    }
    
    .dropdown-content {
      display: none;

      background-color: #fff;
      min-width: 160px;
      z-index: 1;
    }
    
    .dropdown-content a {
      float: none;
      color: #000;
      padding: 12px 16px;
      text-decoration: none;
      display: block;
    }
    
    .dropdown-content a:hover {
      background-color: #fff;
      color: #C655FF;
    }
    
    .dropdown:hover .dropdown-content {
      display: block;
    }
    
   
    
    body{
        font-family: 'Montserrat', sans-serif;
        color: #000;
        line-height: 1.5em;
        width: 100%;

        
    }

    figure{
      text-align: center;
    }


    article{

      padding: 50px;
      background-color: #fff;
      width: 50%;
      height: 70%;
      margin: auto;
      margin-top: 10%;
      border: 10px solid #fff ;
      border-image: url("https://media3.giphy.com/media/v1.Y2lkPTc5MGI3NjExdXJ1eTdndGRra3QxZGhxYTU0dGZtbG13a2dhdHpudXFyOHRmcDNqNSZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/qsk5nSgvBFa1IDnado/giphy.gif") 10;

    }


    main h1 {
      padding: 50px;
      background-color: #fff;
      text-align: center;
      margin: auto;
      border: 10px solid #fff ;
      border-image: url("https://media3.giphy.com/media/v1.Y2lkPTc5MGI3NjExdXJ1eTdndGRra3QxZGhxYTU0dGZtbG13a2dhdHpudXFyOHRmcDNqNSZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/qsk5nSgvBFa1IDnado/giphy.gif") 10;
      font-size: xxx-large;
    }

    article h2 {
        color: #000;
    }

    article h3 {
        color: #000;
    }



    .container {
      position: relative;
    }


    .gallery{
      width: 45%;
    }

    .carousel{
      width: 70%;
    }

    .top-page{
      width: 50%;
    }

    .transition{
      width: 100%;
    }

    .logo{
      width: 50px;
      float: left;
      margin-left: 10px;
      margin-top: 15px;
      background-image: url("https://media3.giphy.com/media/v1.Y2lkPTc5MGI3NjExdXJ1eTdndGRra3QxZGhxYTU0dGZtbG13a2dhdHpudXFyOHRmcDNqNSZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/qsk5nSgvBFa1IDnado/giphy.gif");
    }
    
    *{box-sizing: border-box;}
    .mySlides1, .mySlides2, .mySlides3, .mySlides4, .mySlides5, .mySlides6, .mySlides7 {display: none; text-align: center;}
    img {vertical-align: middle;}
    
    @keyframes fade {
      from { opacity: 0; }
      to { opacity: 1; }
    }
    
    /* Slideshow container */
    .slideshow-container {
      max-width: 1000px;
      position: relative;
      margin: auto;
    }
    
   /* Fix slideshow arrows visibility */
.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  padding: 16px;
  margin-top: -22px;
  color: black;
  font-weight: bold;
  font-size: 18px;
  border: none;
  transition: 0.6s ease;
  user-select: none;
  z-index: 5; /* Lower than navbar */
}

.next {
  right: 0;
}

.prev {
  left: 0;
}
    
    /* On hover, add a grey background color */
    .prev:hover {
      color: #C655FF;
    }

    .next:hover {
      color: #C655FF;
    }


      

    
      
      .sticky {
        position: fixed;
        top: 0;
        width: 100%;
      }
      
    .sticky + .content {
  padding-top: 60px;
}


      .mid-container {
        margin-top: 45px;
        text-align: center;
        background-color: #fff;
        float: none;
        overflow-y: scroll;
        scroll-behavior: smooth;
        background-image: url(https://media3.giphy.com/media/v1.Y2lkPTc5MGI3NjExdXJ1eTdndGRra3QxZGhxYTU0dGZtbG13a2dhdHpudXFyOHRmcDNqNSZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/qsk5nSgvBFa1IDnado/giphy.gif);
        background-position: center;
        background-repeat: no-repeat;
        background-attachment: fixed;
        background-size: cover;
      }

      .scrolling-box {
        height: 200px;
        overflow-y: scroll;
      }


      

      section {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100%;
      }

      section#portfolio {
        width:100%;
      }

      footer{
        font-family: 'Montserrat', sans-serif;
        margin: 10px;
        text-align: right;
        background-color: #fff;
    }
    
    footer p {display: inline-block;}

    .bot-container {
      margin-top: 45px;
        text-align: center;
        background-color: #fff;
        float: none;
        overflow-y: scroll;
        scroll-behavior: smooth;
        background-image: url(https://media3.giphy.com/media/v1.Y2lkPTc5MGI3NjExdXJ1eTdndGRra3QxZGhxYTU0dGZtbG13a2dhdHpudXFyOHRmcDNqNSZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/qsk5nSgvBFa1IDnado/giphy.gif);
        background-position: center;
        background-repeat: no-repeat;
        background-attachment: fixed;
        background-size: cover;
    }

    a{
      color: #000;
    }

    a:hover{
      color: #000;
    }
    a:active {
      color: #000;
    }
    

    @media only screen and (max-width:800px) {
      /* For tablets: */

      article {
        padding: 10px;
        background-color: #fff;
        width: 100%;
        height: 70%;
        margin: auto;
        margin-top: 10%;
        float: none;
      }
      
      .content {
        width: 80%;
        margin: auto;
      }
      .gallery{
        width: 100%;
      }
  
      .carousel{
        width: 100%;
        
      }
  
      .transition{
        width: 50%;
      }
    }

    @media only screen and (max-width:600px) {
      /* For mobile phones: */
      article {
        padding: 10px;
        background-color: #fff;
        width: 100%;
        height: 70%;
        margin: auto;
        margin-top: 10%;
        float: none;
      }
      
      .content {
        width: 80%;
        margin: auto;
      }
      .gallery{
        width: 100%;
      }
  
      .carousel{
        width: 100%;
      }
  
      .transition{
        width: 100%;
      }

      .logo{
        width: 25px;
        float: left;
        margin-left: 10px;
        margin-top: 15px;
      }
    

      .scrolling-box{
        background-color: #fff;
        display: block;
        overflow-y: scroll;
        scroll-behavior: smooth;
        text-align: center;
        width: 100%;
        float: none;
        margin: auto;
      }

      main h1 {
        padding: 20px;
        background-color: #fff;
        text-align: center;
        border: 10px solid #fff ;
        border-image: url("https://media3.giphy.com/media/v1.Y2lkPTc5MGI3NjExdXJ1eTdndGRra3QxZGhxYTU0dGZtbG13a2dhdHpudXFyOHRmcDNqNSZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/qsk5nSgvBFa1IDnado/giphy.gif") 10;
        font-size: 25px;
      }

      p a {
        text-align: left;
        font-size: small;
      }
      .navbar a {
        font-size: 10px;
        color: #000;
        text-align: center;
        padding: 4px 6px;
        text-decoration: none;
        font-family: 'Montserrat', sans-serif;
        display: inline-block;
        list-style-type: none;
      }

      .dropdown .dropbtn {
        font-size: 10px;  
        border: none;
        outline: none;
        color: #000;
        padding: 4px 60px;
        background-color: inherit;
        font-family: inherit;
        margin: 0;
      }

      .dropdown-content a {
        float: none;
        color: #000;
        padding: 2px 6px;
        text-decoration: none;
        display: block;
      }
    }

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

      .logo{
        display: none;
      }
    }


#soundcloud a {
  font-weight: bold;
  color: black;
  text-decoration: none;
}

#soundcloud a:hover {
  color: #C655FF;
}