calulator-css.css

@charset "utf-8";
/* CSS Document */

body{
	text-align:center;
	background-color:#ef1b6e;
}

#row-4 {
	display: none;
}

.show{
	display:block;
}

.none {
	display: none;
}

.show{
	display:block;
}

.screen{
	height:165px;
	background-repeat:no-repeat;
	background-size:100%;
	background-image:url(top-background.png);
}

#result{
	border:none;
	text-align:right;
	color:#3E4965;
	font-size:2rem;
	height:155px;
	width:282px;
	background-color:#FFA74F;
}


.row-2{
padding:4% 2% 3%;
}

.row-5{
/*padding:4% 2% 0%;*/
}



p,{
	color:#000;
}

.boy-icon{
	vertical-align:middle;
	display:inline-block;
	z-index:auto;
}

.girl-icon{
	vertical-align:middle;
display:inline-block;
	z-index:auto;
}
.hart{
	margin-left: -39px;
    width: 172px;
    margin-top: -4px;
}
.done{
	    margin-top: 14px;
    margin-right: -20px;
}

.top{
}

.h3-2{
	font-family: Calibri;
	color: #A50000;
}

.h3{
	margin-left: 102px;
	font-family: Calibri;
	color: #A50000;
}

#small-hart{
	height:108px;
	width:102px;
	vertical-align:middle;
	float:left;
}

#chang {
margin-bottom: -32px; 
   border-radius: 56%;
    width: 65px;
    height: 65px;
    background-image: url(swop.png);
    background-repeat: no-repeat;
    background-size: 100%;
    display: inline-block;
    border: none;
    background-color: #faebd705;
}
#chang:hover {
    background-image:url(swop-after-click.png);
  
}


input#yourName,input#yourName:valid{
	background-color: #f0f8ff00;
/*	font-size: large;
*/	text-align:center;
	display:inline-block;
	border:none;
	background-size:100%;
	background-repeat:no-repeat;
	background-image:url(boy-input.png);
	padding: 5%;
    border-radius: 100px;
	color: #A50000;
}

#trueLoveName,input#trueLoveName:valid
{
	background-color: #f0f8ff00;
/*	font-size: large;
*/	text-align:center;
	display:inline-block;
	border:none;
	background-size:100%;
	background-repeat:no-repeat;
	background-image:url(girl-input.png);
	padding: 5%;
    border-radius: 100px;
	color: #A50000;
}



.bottom {
	margin-left: 12%;
    width: 80%;
    /*background-image: url(big-hart.png);*/
    background-repeat: no-repeat;
    background-size: 100%;
    height: 164px;
}

#lovePercent{
	color: #ec3d3de0;
    font-size: 2rem
}
.after{
background-image:url(calulate-after-click.png);
}

#myBtn{
	background-color: #f0f8ff00;
		display:inline-block;
	background-repeat:no-repeat;
	background-size: 100%;
	background-image:url(calulate.png);
	padding: 5% 15%;
    border-radius: 10px;
    border: none;
}

#myBtn:hover{
		background-image:url(calulate-after-click.png);

}

.buttons{
	height:267px;
	display: inline-block;
    width: 78%;
    background-color: #FFBA75;
}

.emptey{
	display:inline-block;
	width: 61px;
}

#myForm{
	margin: 0 auto;
    width: 340px;
}

p {
    color: #c14a4a;
    font-family: sans-serif;
}

.calculator{
	border-radius: 15px;
	background-repeat:no-repeat;
	background-size:100%;
	background-image:url(background-3.png);
	width: 348px;
    margin: 0 auto;
    height: 560px;
	

}