@charset "utf-8";
@import url("../webfonts/DancingScript_Bold/stylesheet.css");
@import url("../webfonts/DancingScript_Medium/stylesheet.css");
@import url("../webfonts/Oswald_VariableFont_wght/stylesheet.css");




@media screen{
	body{
		background-image: url("../images/cat/backgroundEN.jpg");
		background-size: cover;
		background-repeat: no-repeat;
		background-attachment: fixed;
	}
	.btn-secondary{
		width: 200px;
		height: 50px;
		font-family: "DancingScript Bold";
		text-align: center;
		font-size: 20px;
		background-color: black;
		margin-left: auto;
		margin-right: auto;
		margin-top: -2px;
		margin-bottom: 5px;
	}
	.btn-secondary a{
		text-decoration: none;
		color: white;
	}
	.btn-secondary:hover{
		background-color: white;
	}
	.container-fluid{
		margin-top: 80px;
		margin-right: 100px;
		width: 600px;
		text-align: center;
	}
	.container-fluid h1{
		color: rgba(255,255,255,1.00);
		text-shadow: 0px 0px 5px rgba(255,255,255,1.00);
		margin-bottom: 3px;
		margin-top: 3px;
		font-family: "DancingScript Bold";
		font-size: 60px;
	}
	#p1{
		color: rgba(107,107,107,1.00);
		margin-bottom: 3px;
		margin-top: 3px;
		font-family: "DancingScript Medium";
		font-size: 40px;
	}
	#p2{
		color: rgba(52,52,52,1.00);
		margin-bottom: 3px;
		margin-top: 3px;
		font-family: "Oswald VariableFont wght";
		font-size: 20px;
	}
	.cats{
		display: none;
	}
}

@media screen and (max-width:300px){
	
	.container-fluid{
		width: 300px;
		text-align: center;
		margin-left: 5px;
		margin-right: 5px;
		background-color: rgba(92,0,92,1.00);
		border-radius: 10px;
	}
	body{
		background-image: -webkit-linear-gradient(270deg,rgba(255,0,122,1.00) 0%,rgba(255,135,228,1.00) 48.70%,rgba(255,0,122,1.00) 100%);
		background-image: -moz-linear-gradient(270deg,rgba(255,0,122,1.00) 0%,rgba(255,135,228,1.00) 48.70%,rgba(255,0,122,1.00) 100%);
		background-image: -o-linear-gradient(270deg,rgba(255,0,122,1.00) 0%,rgba(255,135,228,1.00) 48.70%,rgba(255,0,122,1.00) 100%);
		background-image: linear-gradient(180deg,rgba(255,0,122,1.00) 0.00%,rgba(255,135,228,1.00) 48.70%,rgba(255,0,122,1.00) 100%);
	}
	.container-fluid h1{
		color: rgba(255,255,255,1.00);
		text-shadow: 0px 0px 5px rgba(255,255,255,1.00);
		margin-bottom: 3px;
		margin-top: 3px;
		font-family: "DancingScript Bold";
		font-size: 40px;
	}
	#p1{
		color: rgba(107,107,107,1.00);
		margin-bottom: 3px;
		margin-top: 3px;
		font-family: "DancingScript Medium";
		font-size: 30px;
	}#p2{
		color: rgba(0,0,0,1.00);
		margin-bottom: 3px;
		margin-top: 3px;
		font-family: "Oswald VariableFont wght";
		font-size: 20px;
	}
	.btn-secondary{
		width: 200px;
		height: 50px;
		font-family: "DancingScript Bold";
		text-align: center;
		font-size: 20px;
		background-color: rgba(167,0,138,1.00);
		margin-left: auto;
		margin-right: auto;
		margin-top: -2px;
		margin-bottom: 2px;
	}
	.btn-secondary a{
		text-decoration: none;
		color: white;
	}
	.btn-secondary:hover{
		background-color: rgba(255,0,217,1.00);
	}
	
	
}

@media screen and (min-width:301px) and (max-width:700px){
	body{
		background-color: white;
		background-image: none;
	}
	.container-fluid{
		margin-left: auto;
		margin-right: auto;
		background-color: rgba(66,66,66,0.61);
		border-radius: 10px;
		margin-top: -40px;
		z-index: 999;
	}
	.cats{
		display: block;
	}
	#cat1{
		margin-top: 0px;
		height: 150px;
	}
	#cat2{
		margin-top: -50px;
		height: 200px;
		margin-left: 450px;
	}
	.btn-secondary{
		margin-top: 5px;
	}
	
}
@media screen and (min-width:701px) and (max-width:900px){
	.container-fluid{
		margin-left: auto;
		margin-right: auto;
	}
}