@font-face {
  font-family: Montserrat-Regular;
  src: url('../fonts/montserrat/Montserrat-Regular.ttf'); 
}

@font-face {
  font-family: Montserrat-Bold;
  src: url('../fonts/montserrat/Montserrat-Bold.ttf'); 
}

@font-face {
  font-family: Montserrat-ExtraBold;
  src: url('../fonts/montserrat/Montserrat-ExtraBold.ttf'); 
}

@font-face {
  font-family: Montserrat-Medium;
  src: url('../fonts/montserrat/Montserrat-Medium.ttf'); 
}

@font-face {
  font-family: "San Francisco Display Thin";
  font-style: normal;
  font-weight: 400;
  src: url(https://applesocial.s3.amazonaws.com/assets/styles/fonts/sanfrancisco/sanfranciscodisplay-thin-webfont.eot?#iefix) format("embedded-opentype"), url(https://applesocial.s3.amazonaws.com/assets/styles/fonts/sanfrancisco/sanfranciscodisplay-thin-webfont.woff2) format("woff2"), url(https://applesocial.s3.amazonaws.com/assets/styles/fonts/sanfrancisco/sanfranciscodisplay-thin-webfont.woff) format("woff"), url(https://applesocial.s3.amazonaws.com/assets/styles/fonts/sanfrancisco/sanfranciscodisplay-thin-webfont.ttf) format("truetype"), url("fonts/sanfrancisco/sanfranciscodisplay-thin-webfont.svg#San Francisco Display Thin") format("svg")
}

@font-face {
  font-family: "San Francisco Display Medium";
  font-style: normal;
  font-weight: 400;
  src: url(https://applesocial.s3.amazonaws.com/assets/styles/fonts/sanfrancisco/sanfranciscodisplay-medium-webfont.eot?#iefix) format("embedded-opentype"), url(https://applesocial.s3.amazonaws.com/assets/styles/fonts/sanfrancisco/sanfranciscodisplay-medium-webfont.woff2) format("woff2"), url(https://applesocial.s3.amazonaws.com/assets/styles/fonts/sanfrancisco/sanfranciscodisplay-medium-webfont.woff) format("woff"), url(https://applesocial.s3.amazonaws.com/assets/styles/fonts/sanfrancisco/sanfranciscodisplay-medium-webfont.ttf) format("truetype"), url("fonts/sanfrancisco/sanfranciscodisplay-medium-webfont.svg#San Francisco Display Medium") format("svg")
}

* {
	margin: 0;
	padding: 0;
}

body, hmtl {
	background-image: url(../images/Sequoia-Dark-blur.jpg);
	background-size: cover;
	min-height: 100vh;
	cursor: url(../cursors/normal-select.svg),auto;
	//background: linear-gradient(45deg, #F44336, #2196F3);
}

.container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 220px;
    height: 50vh;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
}

.pphoto {
    height: 128px;
    width: 128px;
    border: 1px solid #d3d3d3b8;
    border-radius: 100vh;
    box-shadow: 0px 0px 30px 9px #2f2f2f47;
    overflow: hidden;
    margin: 0px 0px 20px 0px;
}

img.photo {
	position: relative;
	top: -13px;
	left: -13px;
	width: 154px;
}

.user {
    font-family: 'Montserrat-Regular';
    color: #f3f3f3d1;
    font-size: 22px;
    text-shadow: 1px 1px 5px #1e1e1ede;
    text-align: center;
}

.passenter {
    position: relative;
    display: inline-flex;
    height: 35px;
    width: 200px;
    flex-direction: row-reverse;
    align-items: center;
    margin: 80px 0px 0px 0px;
}

#password {
font-family: 'Montserrat-Regular';
    font-size: 14px;
    position: absolute;
    left: 0;
    height: 35px;
    width: 100%;
    text-align: center;
    border: 1px solid #d1d1d1a8;
    border-radius: 15px;
    background: linear-gradient(0deg, #86c0d33b, #a8cdeb17);
    color: #ffffffcf;
    padding: 0 40px 0 20px;
    box-sizing: border-box;
    outline: none;
    text-shadow: 0px 0px 5px #2b2b2b8c;
    //cursor: url(../cursors/text-select.svg),auto;
    box-shadow: 0px 0px 10px 5px #2525251f;
}

#password:focus {
	border: 1px solid white;
}

#password::placeholder {
	color: #ffffffcf;
}

#go {
	z-index: 1;
}

.fa-circle-arrow-right {
	font-size: 26px;
	padding: 0 4px 0 0;
	color: #e1e1e1cf;
	text-shadow: 0px 0px 5px #2b2b2b8c;
}

.fa-circle-arrow-right:hover {
	color: white;
}

.wrongpass {
	animation: wrngpsw .2s linear;
    -webkit-animation: wrngpsw .2s linear;
}

@keyframes wrngpsw {
	0%{
		border-color: red;
		transform: translate(-10px);
	}
	25%{
		transform: translate(10px);
	}
	50%{
		transform: translate(-10px);
	}
	75%{
		transform: translate(10px);
	}
	100% {
		border-color: #d1d1d1a8;
		transform: unset;
	}
}


@media (min-width: 650px) and (max-width: 992px) {
	.container {
		height: 80vh;
	}
}