body {
	font-family: 'PT Sans Narrow', sans-serif;
}

div {
	display:block;
}

*, *:before, *:after {
  box-sizing: border-box;
}


.title {
	font-size: 128px;
	font-weight: bold;
	min-height:580px;
	text-align: center;
	margin:auto;
	padding-top:250px;
	background-color:white; 
	color:#e2d7d3;
	background-image:url("../images/newsam.png");
	background-size:100%;
	background-repeat: no-repeat;
	overflow: hidden;

	opacity:0.8;
	transition-duration: 1.5s;
	transition-property: opacity;
	transition-delay: 0s;
	transition-timing-function: ease-in-out;
}
.title:before{
	content:"TOO GOOD AT GOODBYES";
}
.title:hover{
	padding-top:250px;
	opacity: 0.5;
	color:#a4a6a8;
	background-image:url("../images/newsam.png");
	background-size: 100%;
	background-repeat: no-repeat;
}
.title:hover:before{
	content:"sam smith";
}


.testline{
	font-size: 97px;
	font-weight:bold;
	text-align:center;
	padding-top: 79px;
	padding-bottom: 22px;
	letter-spacing: 0.032em;

	opacity:0.5;
	transition-duration: 1s;
	transition-property: opacity;
	transition-delay: 0s;
	transition-timing-function: ease-in-out;

}
.testline:before{
	content:"you must think that I'm stupid";

}
.testline:hover {
}

.testline:hover:before{
	animation-name: firstlines;
	animation-duration: 10s;
	
}


@keyframes firstlines{
	0% {content:"you must think that I'm stupid";}
	25% {content:"you must think that I'm a fool";}
	50% {content:"you must think that I'm new to this";}
	75% {content:"but I have seen this all before";}

}


.songbackground {
	background-color:white;
	opacity:0.3;
	transition-duration: 1.5s;
	transition-property: opacity;
	transition-delay: 0s;
	transition-timing-function: ease-in-out;

}
.songbackground:hover {
	opacity: 0.9;

}

.song{
}

.lyrics {
	font-size: 20px;
	text-align:center;
	padding-top: 40px;
	letter-spacing: 0.032em;

}



.chorus{
	padding-top: 40px;
	font-size: 50px;
	line-height: 100%;
	text-align:center;
	font-weight:bold;
	font-style:oblique;
}




.line {
	padding-top: 5px;
	color:#e2d7d3;

	opacity:1;
	transition-duration: 2.5s;
	transition-property: opacity;
	transition-delay: 0s;
	transition-timing-function: ease-in-out;
}
.line:hover {
	opacity:0.1;
	color:#d6c1ba;
	line-height: 105%;
}

.sad{
	opacity:1;
	color:#a1a2a3;
	line-height: 110%;
}
.sad:hover{
	opacity:1;
}

.backup {
	padding-top: 40px;
}


.noway {
	font-weight: bold;
	padding-top:10px;
	font-size: 26px;
	letter-spacing: 0.027em;
	text-align:center;
}
.noway:before {
	content:"No way that you'll see me cry";
}
.noway:hover {
	color:#6b7077;
}
.noway:hover:before {
	content:"(no way that you'll see me cry)";

}


.waytoo {
	font-weight: bold;
	padding-top:10px;
	font-size: 26px;
	letter-spacing: 0.027em;
	text-align: center;
}
.waytoo:before {
	content:"I'm way too good at goodbyes";
}
.waytoo:hover {
	color:#6b7077;
}
.waytoo:hover:before {
	content:"(I'm way too good at goodbyes)";
}



.topspace {
	height:50px;
}
.bottomspace {
	height:400px;
}

#test p {
    opacity: 0.3;
    margin-top: 25px;
    font-size: 21px;
    text-align: center;
    -webkit-transition: opacity 2s ease-in;
    -moz-transition: opacity 2s ease-in;
    -o-transition: opacity 2s ease-in;
    -ms-transition: opacity 2s ease-in;
    transition: opacity 2s ease-in;
}


.last {
	position:absolute;
	z-index: 1;
	padding-left: 223px;
	padding-top: 45px;
	background-color: white;
	padding-bottom: 60px;

	opacity:1;
	transition-duration: 2.5s;
	transition-property: opacity;
	transition-delay: 0s;
	transition-timing-function: ease-in-out;

}
.last:hover {
	opacity:0;
}

.goodbye {
	padding-top: 15px;
	position:absolute;
	font-size: 139px;

}