@charset "UTF-8";

/*ページ全体の設定----------------------------------------*/
body{
	/*↓この2行はブラウザの内側の隙間をなくす魔法の呪文*/
	margin: 0;
	padding: 0;
	
	/*ページ全体の文字の色を白に設定（なくてもOK）*/
	color: #ffffff;
	
	/*ページ全体の書体を設定（なくてもOK）*/
	font-family: "YuMincho", "Hiragino Mincho ProN", "Yu Mincho";
	
	/*ページ全体の文字サイズの設定（なくてもOK）*/
	font-size: 2em;
	
}

h1{
	color: #000000;
	font-size: 1em;
}

/*mainの設定----------------------------------------*/
#main{
	/*main内の背景色を指定（なくてもOK）*/
	background-color: #cccccc;

	/*横幅を600pxに指定（なくてもOK）*/
	width: 800px;
	
	/*main内の内側に50pxの余白を設定（なくてもOK）*/
	padding: 50px;
	
	/*ここからFlexboxの設定*/
	/*↓これが超超超超超超超重要！この1行を消すと縦並びになる*/
	display: flex;
	
	/*エリア内のdivを等間隔に配置（なくてもOK）*/
	justify-content:space-around;
	/*エリア内で上下中央揃え（なくてもOK）*/
	align-items: center;
	
}

/*animalの設定----------------------------------------*/
.animal{
	width: 150px;/*横サイズの指定（なくてもOK）*/
	height: 150px;/*縦サイズの指定（なくてもOK）*/
	border-radius: 10px;/*四角形の角を丸く指定（なくてもOK）*/
	display: flex;/*Flexboxの設定（なくてもOK）*/
	justify-content: center;/*左右中央揃え（なくてもOK）*/
	align-items: center;/*上下中央揃え（なくてもOK）*/
	border: 5px solid #ffffff;/*白い枠線を設定*/
}



/*dogとcatとmouseの設定（背景色が違うだけ）--------------------*/
.dog{background-color: #6A59A3;}
.cat{background-color:#4357A6;}
.mouse{background-color:#328E34;}




/*main_flexの設定こっちはFlexboxの設定なし---------------------*/
#main_flex{
	/*main内の背景色を指定（なくてもOK）*/
	background-color: #999999;

	/*横幅を600pxに指定（なくてもOK）*/
	width: 800px;
	
	/*main内の内側に50pxの余白を設定（なくてもOK）*/
	padding: 50px;
	
}