*{
    text-decoration:none;
    margin:0;
    padding:0;
    box-sizing:border-box;
}

.body{
    background-color:black;
}
::selection {
    background-color:#657600;
}

#landingVid{
    position:fixed;
    width:100%;
    height:100%;
    top:0;
    left:0;
    object-fit:cover;
    z-index:1;
}

.navigation {
  display:flex;
  flex-direction:row;
  background:none;
  width:100%;
  height:5%;
  z-index:4;
  margin:auto;
  padding:auto;
  position:absolute;
}

.navigation ul {
  list-style: none;
  margin: 0;
  padding: 0;
  margin:auto;
  padding:auto;

}

.navigation ul ul {
  display: none;
  position: absolute;
  top: 100%;
  width: 200px; /* increase the width as desired */
}

.navigation li {
  float: left;
  position: relative;
}



.navigation li a {
  display: block;
  padding: 10px;
  color: white;
  text-decoration: none;
}

.navigation li a:hover,
.menu li a:hover {
  color: #D7F426;
}

.navigation li ul {
  display: none;
  position: absolute;
  top: 100%;
  transform: translateX(10px); /* move the dropdown 120px to the left */
  z-index: 1;
}

.navigation li:hover > ul {
  display: block;
  background-color:none;
}

.navigation li ul li {
  float: none;
}

.navigation li ul a {
  padding: 2px;
  background-color: none;
  color: white;
  padding-top:11px;
  padding-bottom:11px; /*dropdown menu elements*/
}

.navigation li ul a:hover {
  background-color: none;
}

.menu{
  display:flex;
  flex-direction:row;
  background:none;
  width:40%;
  margin:auto;
  padding:auto;
  z-index:4;
  position:relative;
  top:0%;
  
}

.menu li{
  list-style-type:none;
  font-family: 'Rajdhani', sans-serif;
  font-size:16px;
  color:none;
  margin:auto;
  padding:auto;
  letter-spacing:3px;
}

.menu li a{
  color:white;
  /*color:#D7F426;*/

}

.hamburger{
    position:absolute;
    width:25px;
    height:3px;
    background:#D7F426;
    border-radius:15px;
    cursor:pointer;
    transition:0.3s;
    z-index:2;
    margin-top:5%;
    margin-left:3%;
}

.hamburger:before,
.hamburger:after{
    content:"";
    position:absolute;
    height:3px;
    right:0;
    background:#D7F426;
    transition:0.3s;
}

.hamburger:before {
    top: -10px;
    width:24px;
 }

.hamburger:after {
    top: 10px;
    width:25px;
}

.toggle-menu {
    position:absolute;
    width:30px;
    height:25px;
    cursor:pointer;
    margin-top:5%;
    margin-left:3%;
    opacity:0;
    z-index:3;
}

.hamburger,
.toggle-menu {
    display:none;
}

.navigation input:checked ~ .hamburger
{
    background: transparent;
}

.navigation input:checked ~ .hamburger:before
{
    top:0;
    transform: rotate(-45deg);
    width:24px;
}

.navigation input:checked ~ .hamburger:after
{
    top:0;
    transform: rotate(45deg);
    width:24px;
}


.navigation input:checked ~ .menu{
    right: 0;
}
#videoPaintings{
    margin-top:-8%;
}
#cottonAv{
    margin-top:-8%;
}

#artistNameContainer{
    display:flex;
    justify-content:center;
    text-align:center;
    background:none;
    width:100%;
    height:100%;
    z-index:2;
    position:fixed;
    margin-top:-2%;
}

#artistName{
    display:flex;
    z-index:3;
    font-family: 'Rajdhani', sans-serif;
    font-size:65px;
    font-weight:200;
    letter-spacing:60px;
    color:white;
    margin:auto;
    padding:auto;
    opacity: .3; /* set the initial opacity to 0 */
    animation: artistName 11s linear infinite; /* apply the animation */
   

}


@keyframes artistName {
  10% {
    opacity: 0.6;
  }
  30% {
    opacity: 0.8;
  }
  70% {
    opacity: 0.5;
  }
 
}


@media (max-width:900px) and (min-width:300px){
    
    
    .navigation li ul a {
     
      background-color: none;
      color: white;
      padding-top:3px;
      padding-bottom:3px; /*dropdown menu elements*/
      margin-left:12%;
      margin-top:15%;
      font-size:15px;

}

    .menu li a{
    color:white; /*#D7F426;*/
    display:block;
    letter-spacing:1.5px;
    font-size:12px;
    font-weight:400;
    line-height:10px;
    transition:0.9s;
    margin-top:11%;
    margin-bottom:18%;

}
   
   .hamburger,
    .toggle-menu {
    display:block;
}

    .menu{
        justify-content:start;
        flex-direction:column;
        align-items:center;
        position:fixed;
        top:0%;
        right:-100%;
        background:#1A181B;
        opacity:85%;
        width:60%;
        height:100%;
        transition:1.2s;
    }
    
    .menu li {
        width:100%;
        
        background:none;
        
    }
    
   .menu li  a{
        font-size:20px;
        padding-top:2%;
        background:none;
    }
    
    .navigation li:hover > ul {
    margin-top:-20%;
    display: block;
    background-color:none;
}


    
   #artistName{
    display:flex;
    z-index:3;
    font-family: 'Rajdhani', sans-serif;
    font-size:25px;
    font-weight:200;
    letter-spacing:10px;
    color:white;
    margin:auto;
    padding:auto;
    opacity: .3; /* set the initial opacity to 0 */
    animation: artistName 11s linear infinite; /* apply the animation */
   

}
}