header{
text-decoration: none;
display: flex;
flex-direction: column;
flex-wrap: wrap;
align-items: center;
justify-content: space-around;
background: linear-gradient(rgba(14, 220, 14, 1), black );
}

body{
background-color: black;
}

a{
margin: 0 2vh;
padding: 1vh;
border-width: .75vh;
border-style: double;
background: black;
border-color: whitesmoke;
color:rgba(14, 220, 14, 1) ;
text-align: center;
text-decoration: none;
}

nav{
display: flex;
flex-flow: row wrap; 
justify-content: space-between;
align-items: start;   
list-style-type: none;
border-width: 1vh;
border-radius: 10%;
}

main{
margin: 8vh 0;  
background-color: rgba(14, 220, 14, 1);  
}

#index{
display: grid;
grid-template-columns: 1fr 2fr 1fr;
grid-template-rows: 1fr 1fr 1fr 1fr;
}

t{
height: 80vh;
width: auto;    
}
 
.tes{
display: flex;
flex-flow:row nowrap; 
justify-content: space-between;
align-items: center;   
}

#comib{
display: flex;
flex-flow: column nowrap;
justify-content: space-around;
align-items: center;
}


#thx{
text-align: center;
color: aquamarine;
padding: 3vh;
background-color: whitesmoke; 
}

#gal{
display: grid;
grid-template-columns: 1fr 2fr 1fr;
grid-template-rows: 1fr 1fr;
justify-content: center;
align-items: end;
}

#bigc{
height: 50vh;
width: auto;  
grid-column: 1/3;
grid-row: 1/2;  
}

#c{
grid-column: 3/4;
grid-row: 1/2;      
}

#b{
grid-column: 1/2;
grid-row: 2/3;      
}

#bigf{
height: 50vh;
width: auto;
grid-column: 2/4;
grid-row: 2/3;      
}

#carouseltes{
margin: 8vh;
}

#sideL{
margin: 2vh;
padding: 2vh;
grid-column: 1/2;
grid-row: 1/5;
}

#middle{
margin-top: 2vh;
grid-column: 2/3;
grid-row: 1/5;    
}

#sideR{
margin: 2vh;
grid-column: 3/4;
grid-row: 1/4;
}

#buton{
grid-column: 3/4;   
grid-row: 4/5;
padding: 1vh;
}

footer{
display: flex;   
flex-flow: row;
align-items: end;
justify-content: space-around;
padding: 2vh;
background: linear-gradient(black, rgb(14, 220, 14));
border: 20px 0 0 0;
border-color: rgb(247, 47, 53);
border-style: dashed;
padding: 2vh;
}

.logo{
height: 5vh;
width: auto;
background-color: rgb(128, 255, 0);
padding: 10px;
}

.soc{
height: 10vh;
width: auto;
padding: 5px;
margin: 2px;
border-radius: 5px;
border-color: rgb(247, 47, 53);
border-width: 0 3px 3px 3px;
border-style: dashed;
}


.git{
background: whitesmoke;
}

@media (max-width: 430px){

header{
height: 20vh;
text-decoration: none;    
position: sticky;
display: block;
background: linear-gradient(rgba(14, 220, 14, 1), black );
}

#index{
display: flex;
flex-flow: column nowrap;  
align-items: center;  
justify-content: space-between;
}

#sideL{
height: 150px;
width: auto;    
}

#middle{
height: 150px;
width: auto;    
}

#gal{
display: flex;
flex-flow: column nowrap;
justify-content: end;
align-items: end;
}

#bigc{
order: 1;    
height: auto;
width: 300px;   
}

#bigf{
order: 3;
height: auto;
width: 300px;    
}

footer{
display: flex;   
flex-flow: column;
align-items: center;
justify-content: space-around;
padding: 2vh;
background: linear-gradient(black, rgb(14, 220, 14));
border: 20px 0 0 0;
border-color: rgb(247, 47, 53);
border-style: dashed;
padding: 2vh;
}

.soc{
height: 10vh;
width: auto;
padding: 5px;
margin: 2px;
border-radius: 5px;
border-color: rgb(247, 47, 53);
border-width: 0 3px 0px 3px;
border-style: dashed;
}

.git{
display: none;    
}
}