@import url('https://fonts.googleapis.com/css2?family=Teko:wght@300&display=swap');

body 
{
    margin: 0;
    padding: 0;
    font-family: sans-serif;
    overflow: hidden;
}

.background 
{
    width: 100%;
    height: 100%;
    /* overflow: hidden; */
    display: flex;
    /* justify-content: center; */
    /* margin-top: 1rem;
    margin-left: 5rem; */
    /* align-items: center; */
}

.background video 
{
    position: absolute;
    top: 0;
    left: 0;
    object-fit: cover;
    width: 100%;
    height: 100vh;
    pointer-events: none;
}

.background #pause-gif {
    top: 40vh;
    margin-left: 40vw;
    position: absolute;
    height: 12rem;
    display: none;
}

.background #pause-text {
    top: 65vh;
    margin-left: 44.2vw;
    position: absolute;
    font-size: 1.7rem;
    font-family: 'Teko', sans-serif;
    font-weight: 100;
    letter-spacing: 0.2rem;
    text-transform: uppercase;
    color: #fff;
    display: none;
}

.background .content 
{
    position: absolute;
    z-index: 1;
    /* max-width: 1000px; */
    margin: 0;
    /* text-align: center; */
}

.background .content h1 
{
    margin: 0;
    padding: 0;
    font-size: 4.5rem;
    text-transform: uppercase;
    color: #fff;
}

.background .content p 
{
    font-size: 1.5em;
    color: #fff;
    margin-block-start: 0em;
    margin-block-end: 0em;
}

.background .content .logo {
    position: absolute;
    font-size: 3.5rem;
    top: 0.5rem;
    left: 1rem;
    /* display: inline; */
}

.background .content h1 {
    font-family: 'Teko', sans-serif;
    font-weight: 100;
    font-size: 2.7rem;
    letter-spacing: 0.5rem;
    position: absolute;
    display: inline;
    top: 1.2rem;
    left: 5.3rem;
}

.background .content .themes {
    position: relative;
    top: 40vh;
    left: 1rem;
    font-size: 1rem;
    font-family: 'Teko', sans-serif;
    font-weight: 100;
    letter-spacing: 0.2rem;
    text-transform: uppercase;
}

.background .content .github .github-logo{
    height: 1.5rem;
    top: 95vh;
    margin-left: 1rem;
    position: absolute;
    filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(222deg) brightness(97%) contrast(86%);
}

.background .content .github h3 {
    display: inline;
    font-size: 1rem;
    color: #fff;
    position: absolute;
    top: 93.5vh;
    left: 3rem;
}

.background .content .controllers {
    top: 68vh;
    left: 37vw;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.background .content .controllers button {
    margin: 0rem 0.2rem;
    border: none;
    height: 3.125rem;
    width: 3.125rem;
    border-radius: 50%;	
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    outline: none;
    transition: 0.5s;
    background: rgba(255,255,255,0.1);
    position: relative;
}

.background .content .controllers button:hover{
    height: 4.375rem;
    width: 4.375rem;
}

.background .content .controllers i:before{
	color: #fff;
	font-size: 1.25rem;
}

.background .content .controllers .volume{
    margin: 0rem 0rem;
    border: none;
    height: 3.125rem;
    width: 3.125rem;
    border-radius: 50%;	
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    outline: none;
    transition: 0.5s;
    background: rgba(255,255,255,0.1);
    position: relative;
}

.background .content .controllers .volume i{
	cursor: pointer;
	padding: 0.5rem 0.75rem;
}

.background .content .controllers .volume:hover{
    height: 4.375rem;
    width: 4.375rem;
}

.background .content .controllers .volume #volume_show{
	background: rgba(245,245,245,0.1);
} 

input[type="range"] {
	-webkit-appearance: none;
	width: 20%;
	outline: none;
	height: 0.125rem;
	margin: 0 0.938rem;
}

input[type="range"]::-webkit-slider-thumb{
	-webkit-appearance: none;
	height: 0.938rem;
	width: 0.938rem;
	background: #FFF;
	border-radius: 50%;
	cursor: pointer;
}

.background .content .current_theme {
    position: relative;
    top: 50vh;
    left: 80vw;
    text-transform: uppercase;
    font-size: 1.8rem;
    font-family: 'Teko', sans-serif;
    font-weight: 100;
    letter-spacing: 0.2rem;
}

.background .content .themes .astext {
    background:none;
    border:none;
    margin:0;
    padding:0;
    cursor: pointer;
    text-transform: uppercase;
    font-size: 1.45rem;
    font-family: 'Teko', sans-serif;
    font-weight: 100;
    letter-spacing: 0.2rem;
    color: #fff;
    display: block;
}