#index{
    display: grid;
font-family: Arial, Helvetica, sans-serif;
grid-template-areas: 
'h h h h k k'
;
grid-template-columns: auto auto auto auto auto auto;
background-color:palevioletred;
border:none;
text-align: center;
border-radius: 5px;

}

body{
    
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    margin: 0;
    padding: 0;

  }
  * {
    box-sizing: border-box;
}
::-webkit-scrollbar {
    display: none;
  }

*{ 
    box-sizing: border-box;
}


#index .pro{
    grid-area:k;
    height: 14vh;


}
#index .bro{
    grid-area:h;
    color: white;
    font-family: 'Courier New', Courier, monospace;
    padding-left: 150px;
    height: 14vh;
    justify-content: center;
}
#index .dropbtn {
    background-color: #af4494;
    color: white;
    font-size: 16px;
    border: none;
    cursor: pointer;
    margin-top:2vh;
    height: 10vh;
  }
  
  #index .dropdown {
    position: relative;
    display: inline-block;
  }
  
  #index .dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
    right: 2vw;
  }
  
  #index .dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
  }
  
  #index .dropdown-content a:hover {background-color: #f1f1f1}
  
  #index .dropdown:hover .dropdown-content {
    display: block;
  }
  
  #index .dropdown:hover .dropbtn {
    background-color: pink;
  }





#index2{
display:grid;
grid-template-areas: 
'o1 i1'
'o2 i2'
'o3 i3'
'o4 i4'
'o5 i5'
'o6 i6'
'o7 i7'
'o8 i8'
;
grid-template-columns: auto auto;
background-color: rgba(228, 138, 231, 0.3);
margin-top: 2vh;
margin-left:1vw;
font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
padding: 5px;
width:25vw;
height:70vh ;
border:2px;
border-radius:5px;
justify-content: space-around;
transition: background-color 0.3s ease;

}
#index2:hover{
    background-color:rgba(85, 36, 87, 0.5);;
}


#index2 .bru1{
    grid-area:o5;
    text-align: center;
    font-family: cursive;
    font-size: 25px;
    color:white;
    
}
button {
    font-size: 15px;
    color: white;
    background-color: rgba(228, 138, 231, 0.5);
        border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    width: 11vw;
    height:8vh;
}
button:hover {
    background-color:rgba(237, 2, 245, 0.5);;
}
#index2 .bru11{
    grid-area:o5;
}
#index2 .bru2{
    grid-area: o1;
    
    
}
#index2 .bru3{
    grid-area: i1;
}

#index2 .bru4{
    grid-area: o2;
}

#index2 .bru5{
    grid-area: i2;
}

#index2 .bru6{
    grid-area: o3;
}

#index2 .bru7{
    grid-area: i3;
}

#index2 .bru8{
    grid-area: o4;
}

#index2 .bru9{
    grid-area: i4;
}

#index2 .bru12{
    grid-area:i5;
}

#index2 .bru13{
    grid-area: o6;
}
#index2 .bru14{
    grid-area:i6;
}
#index2 .bru15{
    grid-area: o7;
}
#index2 .bru16{
    grid-area: i7;
}
#index2 .bru17{
    grid-area:o8 ;
}
#index2 .bru18{
    grid-area: i8;
}

.footer{
    background-color:rgb(255, 192, 203);
    float: inline-end;
    width: 100vw;
    text-align: center;
    justify-content: space-around;
    height:10vh;
    margin-top:5vh;
    }

    @media (max-width: 600px) {
        #index {
            grid-template-areas:
                'h h h h h h'
                'k k k k k k';
        }
        #index2 {
            grid-template-areas:
            'o1 o1'
            'i1 i1'
            'o2 o2'
            'i2 i2'
            'o3 o3'
            'i3 i3'
            'o4 o4'
            'i4 i4'
            'o5 o5'
            'i5 i5'
            'o6 o6'
            'i6 i6'
            'o7 o7'
            'i7 i7'
            'o8 o8'
            'i8 i8';
        }
    }