body {
    /*
    background-repeat: no-repeat;
    background-size:contain;
	background-position: center; 
    */

    background-size: cover;               
    background-repeat: no-repeat;
    background-position: center top;
	background-color: #131313;
}

html,
body {
   margin: 0;
   padding: 0;
   height: 100%;
}

html {
    width: 100%;
}

.container {
    min-height: 98%;
    position: relative;
}

#content {
    width: 50%;
    max-width: 600px;
    position:relative;
    margin:auto;
    padding: 20px;
}

#logo {
    text-align: center;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

#search {
	margin-top: 20px;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.img-fluid {
	max-width: 100%;
	height: auto;
}

.suggestion-extra {
    
}

/*
Credits: 
https://stackoverflow.com/questions/643879/css-to-make-html-page-footer-stay-at-bottom-of-the-page-with-a-minimum-height-b
*/
#footer {
    position:absolute;
    bottom:0;
    left: 0;
    right: 0;
    height: 30px;
}

@media only screen and (max-width:1200px) {

    #content {
        width: 100%;
    }

}

@media only screen and (max-width:768px) {
    
    #logo h1 {
        font-size: 24px;
    }

}

@media only screen and (max-width:615px) {
    
    #logo h1 {
        letter-spacing: 12px;
    }

    #logo p {
        letter-spacing: 8px;
    }

}

@media only screen and (max-width:564px) {
    
    #logo h1 {
        font-size: 20px;
        letter-spacing: 6px;
    }

    #logo p {
        font-size: 14px;
        letter-spacing: 4px;
    }

}

@media only screen and (max-width:450px) {
    
    #logo h1 {
        font-size: 20px;
        letter-spacing: 0px;
    }

    #logo p {
        font-size: 14px;
        letter-spacing: 0px;
    }

}