*
{
    margin: 0;
    padding: 0;
}
.main
{
  display: flex;
  flex-direction: column;
}
html
{
    height: 100%;
}
body
{  text-align: center;
    height: 100%;
     overflow-x: hidden;

    }
.index_photo
{  
    background-image:linear-gradient(180deg,rgba(255,255,255,0.2),rgba(0,0,0,0)),url("photo_index.jpg");
    background-repeat:no-repeat ;
    height: 100vh;
    background-position: center;
    background-size: cover;
}
.index_photo h2
{  color: rgb(223, 223, 223);
    
   position: relative;
   top:80%;
}
.links_
{  
    max-height:70rem;

}
.link
{ 
  position: relative;
    width: 100vw;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: center;
   
}
p
{
  margin:0;
}
#l1
{
  background-color: rosybrown;
}
#l2
{
  background-color: green;
}
#l3
{
  background-color: powderblue;
}
#l4
{
  background-color: orange;
}
#l1,#l2,#l3,#l4
{
    border-radius: 2px;
    width: 20vw;
    height: 5vh;
    margin-left: 10vw;
    margin-right: 10vw;
    margin-top: 5vh;
    margin-bottom: 5vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
  
  }
.l:hover
{
  cursor: pointer;
}
.foot
{ 
  width: 100vw;
  height: 10vh;
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  
  background-color: rgb(176, 224, 230);
}
.foot div
{
  align-self:center;
}
.blockquote
{
  position: relative;

}
@media(max-width:480px)
{ .foot
  {
    height: 15vh;
  }
  .link
   {
     flex-direction: column;
   }
   .l
   {
     width:30vh!important;

   }
}