.{
    text-decoration:none;
    margin:0;
    padding:0;
    box-sizing:border-box;
    background-color:#2D2E32;
    
}

body{
    background-color:#2D2E32;
    overflow-y:scroll;
}

::selection {
    background-color:#657600;
}


h1{
  font-family: 'Rajdhani', sans-serif;
  font-size:35px;
  color:#F9F6FB;
  margin:auto;
  padding:auto;
  letter-spacing:1px;
  font-weight:300;
  line-height:100%;
}


  /*
  background-image: linear-gradient(to right, gray, gray, white, #D7F426, #D7F426);
  -webkit-background-clip: text;
  color:transparent;
  animation: animate 25s linear infinite;
  background-size:1000%;*ANIMATION IS CANCELLED/
}

/*
@keyframes animate {
    0%
    {
        background-position: 0% 100%;
    }
    50%
    {
        background-position: 100% 0%;
    }
    100%
    {
        background-position: 0% 100%;    
    }
}

CANCELLED ANIMATION*/


p{
  font-family: 'Rajdhani', sans-serif;
  font-size:16px;
  color:white;
  margin:auto;
  padding:auto;
  letter-spacing:2px;
  font-weight:200;
  line-height:25px;
 
}

h2{
  font-family: 'Rajdhani', sans-serif;
  font-size:14px;
  color:#D7F426;
  margin:auto;
  padding:auto;
  letter-spacing:2px;
  font-weight:200;
  line-height:25px;
}

#main{
    background-color:#1A181B;
    width:100%;
    height:100%;
}

::-webkit-scrollbar {
  width: 10px;
}
 
::-webkit-scrollbar-thumb {
  background-color: #3F3D41;
  border-radius: 20px;
}
 
::-webkit-scrollbar-track {
  background-color: #1A181B;
}

.navigation {
  display:flex;
  flex-direction:row;
  background:#2D2E32;
  width:100%;
  height:5%;
  z-index:4;
  margin:auto;
  padding:auto;
  position:fixed;
  top:0;
  left:0;
}

.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: 4px;
  background-color: #2D2E32;
  color: white;
  padding-top:10px;
  padding-bottom:15px; /*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;
}

#videoPaintings{
    margin-top:-10%;
}
#cottonAv{
    margin-top:-10%;
}

.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;
}



#mainTitleContainer{
    width:100%;
    height:5%;
    background:none;
    margin:auto;
    padding:auto;
    display:flex;
    margin-top:5%;
    justify-content:center;
    text-align:center;
    z-index:10;
    
}
#pageTitle{
  margin-top:9%;
  font-family: 'Rajdhani', sans-serif;
  color:#F9F6FB;
  width:100%;
  text-align:center;
  background:none;
  z-index:10;
}



.parts {
  display: flex;
  flex-direction: row;
  width: 80%;
  justify-content:space-between;
  background: #232426;
  padding:2% 2% 2% 2%;
   display: flex;
  margin: auto;
  padding: auto;
  border-radius:10px;
}


#firstPart{
    display:flex;
    flex-direction:row;
    margin-top:1%;
}
.containers{
    
    padding: 1% 1% 1% 1%;
}






#firstVidContainer {
  width:24%;
  height: auto;
  background: none;
  display: flex;
  flex-direction: column;
  position: relative;
  justify-content:space-between;
}



#secondVidContainer{
    display:flex;
    flex-direction:column;
    width:24%;
    background:none;
    justify-content:space-between;
}


#thirdVidContainer{
    display:flex;
    width:50%;
    height:auto;
    flex-direction:column;
}

#fourthVid{
    object-fit:cover;
    
}


#fourthPart{
    margin-top:1%;
}


#divider{
    width:80%;
    height:auto;
    display:flex;
    flex-direction:row;
    text-align:center;
    padding:5% 0 3% 0;
    margin:auto;
    padding:auto;
}

#secondPart{
    display:flex;
    flex-direction:row;
    margin-top:0;
}


.secondParts {
  display: flex;
  flex-direction: row;
  width: 80%;
  margin: auto;
  padding: auto;
  background: none;
}


#fourthVidContainer{
    display:flex;
    width:50%;
    height:auto;
    background:none;
    flex-direction:row;
}

.secondPartVids{
    width:100%;
    height:auto;
}





#network{

    width:80%;
    height:auto;
    display:flex;
    flex-direction:column;
    margin:auto;
    padding:auto;
    justify-content:center;
    text-align:center;
    background-color:none;
     margin-top:10%;
}

#iconsContainer{
    display:flex;
    flex-direction:row;
    width:290px;
    height:100px;
    margin:auto;
    padding:auto;
    justify-content:space-around;
    background:none;
    margin-top:3%;
}

.icons{
    width:27%;
    height:83px;
    margin-top:2%;
    padding: 1% 1% 1% 1%;
    cursor:pointer;
    object-fit:fit
}


#signature{
    margin-top:2%;
}


a {
   font-family: 'Rajdhani', sans-serif;
  font-size:14px;
  color:#D7F426;
  margin:auto;
  padding:auto;
  letter-spacing:2px;
  font-weight:200;
  line-height:25px;
  text-decoration:none;
 
}

@media (max-width:1700px) and (min-width:1600){
h2{
  font-size:16px;
  letter-spacing:2px;
  font-weight:200;
  line-height:25px;
}

}


@media (max-width:1600px) and (min-width:1500px){
h2{
  font-size:15px;
  letter-spacing:2px;
  font-weight:200;
  line-height:20px;
}

}

@media (max-width:1500px) and (min-width:1400px){
h2{
  font-size:13px;
  letter-spacing:2px;
  font-weight:200;
  line-height:20px;
}

}

@media (max-width:1400px) and (min-width:1300px){
h2{
  font-size:12px;
  letter-spacing:2px;
  font-weight:200;
  line-height:20px;
}

}

@media (max-width:1300px) and (min-width:1200px){
h2{
  font-size:10px;
  letter-spacing:2px;
  font-weight:200;
  line-height:20px;
}


#pageTitle{
  margin-top:9%;
  
}

}

@media (max-width:1650px) and (min-width:1500px){
  .texts{
  font-size:15px;
  line-height:23px;
 
    }
}

@media (max-width:1500px) and (min-width:1400px){
    .texts{
  font-size:13px;
  line-height:19px;
 
}
}
@media (max-width:1400px) and (min-width:1300px){
    .texts{
  font-size:12px;
  line-height:18px;
 
}
}

@media (max-width:1300px) and (min-width:1200px){
    .texts{
  font-size:11px;
  line-height:17px;
 
}
}

@media (max-width:1200px) and (min-width:900px){
    .texts{
  display:none;
 
}
}


@media (max-width:900px) and (min-width:300px){
    .navigation li ul a {
     
      background-color: #1A181B;         
      opacity:95%;
      color: white;
      padding-top:0px;
      padding-bottom:0px; /*dropdown menu elements*/
      margin-left:12%;
      margin-top:3%;
      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:22%;

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

    .menu{
        justify-content:start;
        flex-direction:column;
        align-items:center;
        position:fixed;
        top:0%;
        right:-100%;
        background:#1A181B;
        opacity:95%;
        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;
}

#firstlink{
    margin-top:10%;
}
 
#secondlink{
    margin-top:-2%;
}

#thirdlink{
    margin-top:3%;
    z-index:100;
}

#fourthlink{
    margin-top:-2%;
}

#fifthlink{
    margin-top:2%;
}


    #pageTitle{
    margin-top:10%;
    }
    
    h1{
        font-size:30px;
    }
    
  .parts {
  display: flex;
  flex-direction: column;
  width: 80%;
  justify-content:center;
  margin: auto;
  padding: auto;
}
    #firstPart{
     flex-direction:column;
     margin-top:3%;
     
    }
    #secondPart{
        flex-direction:column;
        margin-top:3%;
    }
    #fourthPart{
        flex-direction:column;
        margin-top:3%;
    }
   
    h2{
        margin-top:5%;
        
    }
    
    .texts{
        margin-top:3%;
    }
    .containers{
        margin:auto;
        padding:auto;
        

    }
    .vids{
        margin-top:3%;
    }

    
    #firstVidContainer {
      width:100%;
      height: auto;
      background: none;
      display: flex;
      flex-direction: column;
      position: relative;
      justify-content:center;
      margin:auto;
      padding:auto;
      margin-left:-1%;
    }

    #secondVidContainer{
        display:flex;
        flex-direction:column;
        width:100%;
        background:none;
        justify-content:center;
        margin-left:-1%;
    }

    
    #thirdVidContainer{
        display:flex;
        width:100%;
        height:auto;
        flex-direction:column;
        justify-content:center;
        margin-left:-1%;
    }
    

    #fifthVidContainer{
        display:flex;
        flex-direction:column;
        width:100%;
        height:auto;
        justify-content:center;
        margin-left:-1%;
    
    }
   
    #sixthVidContainer{
      width:100%;
      height: auto;
    }
    .icons{
    width:17%;
    height:50px;
    margin-top:2%;
    padding: 1% 1% 1% 1%;
    cursor:pointer;
    object-fit:fit;
}
}