.title{
text-align: center;
font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
font-weight:500;
font-size: 40px;
color:black;
padding-top: 3%;
padding-bottom: 1.5%;
margin-bottom: 3%;
background-color: #f5ef47;
}


.meme-form{
    text-align: center;
    height: 330px;
    width: 440px;
    margin: 0 auto;
    border: 1px groove black;
    padding: 20px;
    border-radius: 10px;    
}

.submit_but{
    padding-top: 25px;
    margin: auto;
}

.submitting{
    margin: auto;
}



.submission{
    margin: auto;
    text-align: center;
}

@media screen and (min-width:601px)
{
.meme-display{
    width: 50%;
    margin: 0 auto;
    margin-top: 50px;
    padding-bottom: 100px;
}
    
.meme-display,
h2{
   font-size: 30px;
   padding: 5px; 
}
p{
    font-size: 20px;
    padding-left: 10px;
    padding-bottom:10px;
}
img{
    max-height: auto;
    max-width: 600px;
    border-radius: 15px;
    margin-bottom: 35px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    text-align: center;
}
.like{
    margin-right: 70%;
    margin-bottom: 20px;
    font-size: 30px;
    border: 1px groove rgb(29, 28, 28);
    border-radius: 7px;
    background-color: rgb(32, 32, 32);
    cursor: pointer;
}

.like:hover{
    border: 1px groove rgba(233, 236, 37, 0.932);
    background-color: rgb(19, 19, 18);
}

}

@media screen and (max-width: 600px) {
    .meme-display{
        width: 95%;
        padding: 5px 10px;
        margin-top: 40px;
        padding-bottom: 100px;
    }
    
    .meme-display,    
        
    h2{
        font-size: 18px;
        padding: 2px;
    }
    p{
        font-size: 10px;
        padding-left: 3px;
        padding-bottom: 10px;
    }
    img{
        width: 380px ;
        max-width: 380px;
        height: 380px;
        max-height: auto;
        padding-bottom: 8px;
        border-radius: 8px;
        margin-bottom: 20px;
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
        text-align: center;
    }
    .like{
        display: none;
        font-size: 25px;
        border: 1px groove rgb(29, 28, 28);
        border-radius: 6px;
        background-color: rgb(32, 32, 32);
    }
    .meme-form{
        text-align: center;
        height: 280px;
        width: 380px;
        margin: 0 auto;
        border: 1px groove black;
        padding: 15px;
        border-radius: 10px;    
    }
}
    


.footer{
    position:relative;
    text-align: center;
    font-size: 20px;
    bottom: 0px;
    top: 0px;
    width: 100%;
    height: 2rem;
}

#page-container {
    position: relative;
    min-height: 100vh;
}
  
#content-wrap {
    padding-bottom: 2.5rem;
}
  

.fa{
    padding:20px;
}

.fa:hover{
    color:black;
}

.Logo{
    height:100px;
    width: 100px;
    margin: 20px 50%;
}