/* footer*/
#footer {
    padding: 5px 0px 0px 0px;
    bottom: 0;
    width: 100%;
    /* Height of the footer*/
    height: 100px;
  
}
.ftext {
    text-align: center;
    margin: 35px 5px 5px 5px;
}
/* footer*/



/* Icons*/
.fa {
    padding: 20px;
    font-size: 30px;
    width: 55px;
    text-align: center;
    text-decoration: none;
    margin: 5px 2px;
    border-radius:10px;
}
    .fa:hover {
        opacity: 0.7;
    }
.fa-linkedin {
    background-color: #007bb5;
    color: white;
}
.fa-youtube {
    background-color: #bb0000;
    color: white;
}
.fa-instagram {
    background-color:deeppink;
    color: white;
}
.fa-reddit {
    background-color: #ff5700;
    color: white;
}
/* Icons*/



/* Body*/
.text{
   text-align:center;
   font-size:18px;
   margin:20px
}
.title {
    margin: 20px
    ;text-align: center;
    font-size: 25px;
}
.grid {
    display: grid;
    grid-template-columns: 200px auto;
    grid-template-rows: 50px minmax(160px, auto) auto;
    grid-template-areas:
        'header header'
        'leftbar main'
        'footer footer';
    column-gap: 20px;
   grid-row-gap:23px;
}
.page-header {
    grid-area: header;
}
.page-leftbar {
    grid-area: leftbar;
   
}
.page-main {
    grid-area: main;
}
.page-footer {
    grid-area: footer;
}
.content {
    color: #242424;
   
    font-weight: 600;
    text-align: center;
    box-sizing: border-box;
    height: 100%;
    padding: 10px;
}
/* Body*/



/*Gallery*/

/*Gallery*/


    /*4 grid*/
    .grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    justify-items: center;
    align-items: stretch;
    column-gap: 0px;
   grid-row-gap: 20px;
}
.content {
    color: #242424;
   
    font-weight: 600;
    text-align: center;
    box-sizing: border-box;
    height: 100%;
    padding: 10px;
    margin: 30px 0px 0px 0px;
}
/*4 grid*/


/*Square*/
.square2 {
    height: 220px;
    width: 100%;
    background-color: lightgrey;
}
.square {
    height: auto;
    width: 100%;
    background-color: white;
}
.squareg {
    height: 100px;
    width: 100%;
    background-color: lightgrey;
}
/*Square*/