*{margin:0px}

h1 {font-size: 4vw;
text-align: center;}

h2 {font-size: 3vw;
text-align: center;
color:black}

a {font-size: 5vw;
color:lime;}
.grid-container {
	display: grid;
	
	
} 
 .grid-container > div {
  
    
    padding: 4vw 3vw ;
    font-size: 3.5vw;
font-weight: 550;
    font-family:'raleway';
    
  }

.header{
  display:grid;
  max-height: 22vw;
    grid-template-columns: 1fr 1fr 1fr;
    padding: 5px;	
    align-items: center;
    position:;
            
}

.logo > img {height:20vw;
padding: 0px;}

.nav{max-height: 10vw;
  max-width: 20vw;
  justify-self:left ;
  align-self: start;
  padding: 1vw;

}
.header > h1 { max-height: 10vw;
  justify-self:left ;
  align-self: start;
  padding-top: 1vw;
padding-left: 7vw;}


.grid-container > div.article1 {
  
}

.grid-container > div.article2 {
  background-color:lime ;
  border-radius:20px;
}

.grid-container > div.article3  {
  background-color: grey;
 
  color:white;
 
}
.grid-container div.article3 ul li {font-size: 3vw;}
.grid-container div.article3 img {width: 100%;}

.grid-container > div.pic{padding: 0px;} 
 
.dropbtn {min-height: 5vw;
  min-width: 10vw;
  

}


/* Dropdown button on hover & focus */
.dropbtn:hover {
  background-color: #F1F1F1;
}

.dropdown {
	
  display: inline-block;
  text-align: left;
  position:relative;
  
}

.dropdown-content {
  display: none;
  background-color:rgb(82, 81, 81);
  opacity:99%;
  
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 20;
  
}
.dropdown-content a {
  color: rgb(7, 216, 7);
  padding: 5px 5px;
  text-decoration: none;
  display: block;
}

.show {display:block;}
/* When the user clicks on the button,
toggle between hiding and showing the dropdown content */
function myFunction() {
  document.getElementById("myDropdown").classList.toggle("show");
}

.main{background-color:limegreen;color: white;
min-height: 5vw;
padding: 5px;}

.card{background-color: limegreen;
border-radius: 15%;

margin: 10px;
}

.card div p {text-align: center;}
.card > div > a > img {border-radius: 50%;
  width: 100%;
  
  padding-top: 2vw;
  padding-bottom:2vw;

  
}
.card a {font-size: 3.5vw;}
.card div a {color: black;
font-size: 3.5vw;}

.footer{background-color: black;
color: white;
text-align: center;}

@media only screen and (min-width: 200px) {
.grid-container {
  display: grid;
  grid-template-columns: 1fr ;
}


@media only screen and (min-width: 650px) {
  a {font-size: 3vw;}
.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr ;
  
  
}
.grid-container > div {font-size: 2.5vw;}

.grid-container div h1 {text-align: center;
  font-size: 3vw;}

  .grid-container div a{font-size: 3vw}

.header {
grid-column: 1 /span 2;
}
.header > h1 { max-height: 10vw;
  justify-self:left ;
  align-self: start;
  padding-top: 1vw;
padding-left: 12vw;}
h1 {text-align: center;}

.banner {
grid-column: 1 / span 2;
}

.main{
	grid-column: 1 / span 2;
}
.footer{
	grid-column: 1/ span 2;
} 

.grid-container div.article3 ul li {
line-height: 0.5vw;}


@media only screen and (min-width: 1100px) {
.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr ;
}
.grid-container > div {font-size: 1.5vw;}
.grid-container > div {
  
    
  padding: 2vw  ;}
  .grid-container div.article3 ul li {
    line-height: 4vw;}
    
.header {
grid-column: 1 /span 3;	
}

.banner {
  grid-column: 1 / span 3;
}
.main{
	grid-column: 1 / span 3;
}

.footer{
	grid-column: 1 / span 3;
}