::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-thumb {
    background: rgba(90, 90, 90);
}

::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.2);
}

body,
html {
    height: 100%;
    width: 100%;
    border: 0;
    margin: 0;
    padding: 0;
    background-color: black;
    scroll-behavior: smooth;
    z-index: -2;
    position: relative;
}

.bg-image {
    background-color: black;
    position: fixed;
    float: left;
    top: 0;
    z-index: -1;
    /*z-index: 100;*/
    /* The image used */
    background-image: url("background.png");
    /* Add the blur effect */
    filter: blur(8px) brightness(50%);
    -webkit-filter: blur(8px) brightness(50%);
    /* Full height */
    height: 100%;
    width: 100%;
    /* Center and scale the image nicely */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
}

.gallery {
    /*position:absolute;
	top:0;
	height: 100%;
	width: 100%;
	overflow:scroll;*/
    /*z-index: 99;*/
    margin: 5px;
    min-height: 100%;
}

#titleScreen {
    position: relative;
    width: 100%;
    height: 100%;
}

h1 {
    position: absolute;
    color: white;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    font-family: KhatijaCalligraphy;
    font-size: 70pt;
    font-style: normal;
    text-shadow: 4px 4px #000;
    width: 100%;
    text-align: center;
}

.arrowDown {
    background-image: url("arrowDown.png");
    background-position: center;
    background-repeat: no-repeat;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 30px;
}

@font-face {
    font-family: MusicMagic;
    src: url("font/Music\ Magic\ Personal\ Use.ttf");
}

@font-face {
    font-family: KhatijaCalligraphy;
    src: url("font/Khatija\ Calligraphy.ttf");
}