html{
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    scroll-behavior: smooth;
}

body{
    background-color: aliceblue;    
}
header{
    text-align: center;
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
    padding: 20px;
    background-color: rgb(215, 242, 250);
    border: 1px solid gray;
}
main{
    padding-left: 50px;
    padding-right: 50px;
    background-color: aliceblue;
    padding-bottom: 50px;
}
.Welcome{
    padding-left: 40px;
    display: flex;
    flex-direction: row;
    
}
    a {
      text-decoration: none;
      color: #007bff;
    }
    a:hover {
      text-decoration: underline;
    }
.navigation {
    height:auto;
    width:100%;
    display:flex;
    flex-direction: row;
    padding-left: 25px;
    padding-right: 25px;
    margin-bottom: 50px;
}
.redButton{
    background-color: rgb(255, 64, 64);
    color: white;
    padding: 5px;
    border: none;
    padding: 5px;
    border-radius: 5px;
}
.redButton:hover{
    background-color: rgb(255, 0, 0);
}

.toFavs{
    text-align: center;
    font-size: small;
}
#search{
    margin: auto;
    width:auto;
    height: auto;
    display: flex;
    flex-direction: row;
}
.requestBar{
    border: 1px solid gray;
    margin-right: 10px;
    margin-bottom: 10px;
    height:35px;
    width:auto;
    font-size: large;
    padding-left: 25px;
    border-top-left-radius: 10px;
}
.imgContainer{
    background-color: rgb(215, 242, 250);
    height:auto;
    width:200px;
    margin:10px;
    border-radius: 8px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
    padding-bottom:10px;
    border: 1px solid gray;
}
.imgContainer:hover{
    position:relative;
    bottom:5px;
    transition: 0.5s;
}
#gifContainer{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    width:100%;
    height:100%;
}
.gifFooter{
    display: inline-block;
    height: auto;
    width: auto;
    padding:10px;
    font-size: smaller;
}
.gifInfo{
    width:auto;
    height: auto;
}
#likeButton{
    background-image: url("https://upload.wikimedia.org/wikipedia/commons/thumb/f/f1/Heart_corazón.svg/800px-Heart_corazón.svg.png");
    height:50px;
    width:50px;
}
.addToFavs{
    margin: auto;
}
.Gif{
    display: inline-block;
    margin: auto;
}
#addGifs{
    margin:auto;
}
#toUp{
    position: sticky;
    display: inline-block;
    width: 25px;
    height: 25px;
    border-radius: 100px;
    background-color: rgba(162, 162, 162, 0.2);
    text-align: center;
    padding:12px;
    left: 96.5%;
    top:90%;
}

#toUp:hover{
    background-color: rgba(162, 162, 162, 0.4);
}
.chooseContent{
    width: auto;
    height: auto;
    display: flex;
    flex-direction: row;
    margin-right: 10px;
    border-radius: 10px;
    padding: 2px;
}
.contentChoice{
    width: auto;
    height: auto;
    margin: auto;
    padding:5px;
    border-radius: 8px;
}
.contentChoice:hover{
    background-color: rgba(250, 13, 13, 0.5);
    transition: 1s;
}

footer{
    box-shadow: 0 12px 6px rgba(0,0,0,0.1);
    padding: 20px;
    background-color: rgb(215, 242, 250);
    border: 1px solid gray;
}
footer a{
    color: rgb(118, 145, 151);
}
.userAvatar{
    border-radius:50%;
    position:relative;
    top:10px;
    margin-right: 5px;
}
.contentSettings{
    overflow: hidden;
    content-visibility: hidden;
    background-color: white;
    height:20px;
    width:auto;
    margin-right: 10px;
    margin-bottom: 10px;
    border-bottom-left-radius: 10px;
    border: 1px solid gray;

    display: flex;
    flex-direction: row;
}
.contentSettings:hover{
    height: auto;
    transition: 0.3s;
    overflow:auto;
    content-visibility: visible;
    padding: 10px;

}
.contentSettings:not(hover){
    height:20px;
    overflow: hidden;
    content-visibility: hidden;
    transition: 0.5s;
}