@font-face {
    font-family: "Georgia italic";
    src: url(font/Georgia_Italic.ttf);
}

@font-face {
    font-family: "McFont";
    src: url(font/McRegular-Bmg3.otf);
}


* {
    font-family: Helvetica, monospace;
    margin: 0;
    padding: 0;
    position: relative;
    box-sizing: border-box;
    overflow: hidden;
}


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

    .hint a {
        display: none;
    }

    .content img {
        width: 15vmin;
        height: 15vmin;
    }

    div.under {
        font-size: 3.25vmin;
    }

    div.title p {
        margin-top: 0vmax;
        font-size: 11.95vmin;
    }

    div.backgr img {
        width: 90vmin;
        margin-top: 10vh;
    }
    iframe.spotifyembed {
        width: 44.5vh;
    }
    
    div.social #discord {
        height: 11.8vmin;

        
    }
	
	div.slidecontainer{
		display: none;
	}
}

body,html {
    height: 100%
}

body {
    display: flex;
    justify-content: center;
    align-items: center;
    background: #000;
}

.title p {
    font-size: 4.95vmin;
    font-family: "Georgia italic" ;
    text-shadow: none;
    color: rgb(187, 67, 255);
    letter-spacing: .35vmin;
    transition: color 2s ease;
}

.hint {
    z-index: 1;
    color: #000;
    mix-blend-mode: difference;
    position: fixed;
    padding-bottom: 82vmin;
    font-size: 2.35vmin;
    letter-spacing: .3vmin;
    opacity: 0.7;
}

.slidecontainer{
	z-index: 1;
	color: rgb(101, 62, 124) ;
	mix-blend-mode: difference;
	position: absolute;
	font-size: 1.1vmin;
	letter-spacing: .1vmin;
	opacity: 0.7;
	top: 19px;
	right: 34px;
}


.slider {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 15px;
    border-radius: 5px;  
    background: #2e2d2d;
    outline: none;
    opacity: 0.7;
    -webkit-transition: .2s;
    transition: opacity .2s;
  }
  
  .slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 15px;
    height: 15px;
    border-radius: 50%; 
    background: rgb(187, 67, 255);
    cursor: pointer;
  }
  
  .slider::-moz-range-thumb {
    width: 25px;
    height: 25px;
    border-radius: 50%;
    background: rgb(187, 67, 255);
    cursor: pointer;
  }



.link-image {
    width: 4vmin; 
    height: auto;
    transition: 0.3s; 
}

.link-image#steam:hover {
    content: url('/icon/steam2.png'); 
}

.link-image#spotify:hover {
    content: url('/icon/spotify2.png'); 
}

#discord {
    margin-bottom: 0.5vh;
}

#discord {
    cursor: pointer;
    transition: transform 0.3s ease;
}


.link-image#discord:hover {
    content: url('/icon/dc2.png');
}

.music {
    width: 5vh;
    margin-left: 1vh;
    margin-right: 1.5vh;
}

.music:hover {
    content: url('/icon/music2.png'); 
}

.mutetext {
    position: relative;
    font-size: 2.5vh;
    font-family: "McFont";
    color: rgb(72, 43, 153);
}


.backgr {
    object-fit: cover;
    width: 100vw;   
    height: 70vh;      
    position: fixed;  
    top: 15%;      
    left: 0;
    text-align: center;
}

.content {
    text-shadow: 1px 1px 1px #000;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    mix-blend-mode: difference;
    
    opacity: 0.9;
    font-family: Helvetica, monospace;
    margin-top: 10vh;
}


.social {
    text-shadow: 0px 0px 4px #777;
    margin-top: 3.7vmin;
    font-size: 2.35vmin;
    letter-spacing: .5vmin;
}


.social a {
    text-decoration: none;
    color: #000
}


.under {
    z-index: 1;
    color: rgb(101, 62, 124);
    mix-blend-mode: difference;

    position: absolute;
    bottom: 8.6px;
    right: 9.1px;
    opacity: 0.4;
}


.spotifyembed {
    z-index: 1;
    color: rgb(101, 62, 124);
    mix-blend-mode: difference;
    position: absolute;
    bottom: 8.6px;
    left: 9.1px;
    opacity: 0.9;
    width : 60vh;
}