body{
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    font-family: 'Times New Roman', Times, serif;
    /*background: url("../img/browser/bg-01.jpeg") no-repeat center center fixed;*/
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    background-color: #000;
}

#main-content{
    margin-top: -50px;
}

.text{
    color: #fff;
}

.container{
    text-align: center;
    margin-top: 50px;
}

#profile{
    width: 30px;
    height: 30px;
    border-radius: 50%;
}

/* Search section */
.logo{
    color: black;
    font-size: 120px;
    font-style: italic;
    text-shadow: 3px 5px 3px #999;
    margin-top: 70px;
    margin-bottom: 30px;
}

.input-group span{
    z-index: 7;
    width: 40px;
    margin-top: 12px;
    position: absolute;
}

#search{
    padding: 0 40px;
    font-size: 16px;
    border: none; /* <-- This thing here */
    border-radius: 30px;
    box-shadow: 0 0 2px #000;
}

#search:focus{
    box-shadow: 0 0 12px #000;
    animation: ease-in 0.3s;
}

/* App selection list */
#options{
    width: 95%;
    z-index: 3;
    position: absolute;
    max-height: 170px;
    overflow-y: auto;
    background-color: #fff;
    box-shadow: 1px 3px 3px #000;
}

#options ul{
    list-style: none;
    text-align: left;
    margin: 0;
    padding: 0;
}

#options ul li{
    height: 30px;
    cursor: pointer;
}

#options ul li:hover{
    cursor: pointer;
    background-color: #ddd;
}

#options ul li a{
    width: 100%;
    color: #000;
    margin-left: 12px;
    text-decoration: none;
}

#options ul li a .fa{
    color: gray;
}

/* Quick Access Section */
#quick-access{
    color: #fff;
    margin-top: 40px;
    margin-bottom: 40px;
}

#quick-access h5{
    text-align: left;
    margin-bottom: 17px;
    border-bottom: 1px solid #000;
}

#quick-access h5 span{
    font-size: 16px;
}

/* Quick Access Element */
.history-item{
    margin: 10px;
    padding: 7px;
    cursor: pointer;
    border-radius: 12px;
}

.history-item:hover{
    background: #555;
    animation: ease-in 0.4s;
    -webkit-animation: ease-in 0.4s;
    -moz-animation: ease-in 0.4s;
    -o-animation: ease-in 0.4s;

}

.history-item img{
    width: 90px;
    height: 90px;
}

.history-item .card-text span{
    width: 120px;
    overflow: hidden;
    white-space: nowrap;
    display: inline-block;
    text-overflow: ellipsis;
}

/* Screen daptation for Quick Access */
@media screen and (max-width: 480px) { 
    .history-item{
        margin: 3px;
    }
    .history-item img{
        width: 50px;
        height: 50px;
    }
    .history-item .card-text span{
        width: 90px;
    }
}
@media screen and (max-width: 768px) { 
    .history-item{
        margin: 7px;
    }
    .history-item img{
        width: 70px;
        height: 70px;
    }
    .history-item .card-text span{
        width: 100px;
    }
}

.card{
    border:none;
}

.card-img-top{
    border-radius: 12px;
    border: 1px solid #000;
    box-shadow: 0 0 1px #000;
}

.card:hover .card-img-top{
    cursor: pointer;
    border: 2px solid #000;
    box-shadow: 0 0 4px #fff;
    transition: ease-in 0.3s;
}

.card:active .card-img-top{
    background-color: #fff;
}

#footer{
    background: linear-gradient(to bottom, rgba(30,0,0,0), #000);
}

/* logo size according to the screen size */
@media screen and (max-width: 1024px) { 
    .logo { font-size: 120px }
}
@media screen and (max-width: 768px) { 
    .logo { font-size: 90px }
}
@media screen and (max-width: 480px) { 
    .logo { font-size: 60px }
}