@charset "UTF-8";

#topImg{
	background-image: url("./head.jpg");
	animation: fadeIn 5s ease 0s 1 normal;

}
@keyframes fadeIn {
    0% {opacity: 0}
    100% {opacity: 1}
}

@-webkit-keyframes fadeIn {
    0% {opacity: 0}
    100% {opacity: 1}
}

@media screen and (min-width: 769px) {

	#news{
		position: absolute;
		text-align: left;
		right: 10vw;
		bottom: 80px;
		width: 30vw;
		min-width: 200px;
		border: 1px solid #fff;
		padding: 5px;
	
		background-color: rgba(0,0,0,0.5);
		border-radius: 5px;
	}
	#news div{
		border-top: 1px dotted #fff;
		padding: 5px 20px;
	}
}

@media screen and (max-width: 768px) {
	#news{
		position: absolute;
		text-align: left;
		right: 5vw;
		bottom: 80px;
		width: 50vw;
		border: 1px solid #fff;
		padding: 5px;
	
		background-color: rgba(0,0,0,0.5);
		border-radius: 5px;
	}
	#news div{
		border-top: 1px dotted #fff;
		padding: 5px 20px;
	}

}
@media screen and (max-width: 640px) {
	#news{
		position: absolute;
		text-align: left;
		right: 5vw;
		bottom: 80px;
		width: 90vw;
		border: 1px solid #fff;
		padding: 5px;
	
		background-color: rgba(0,0,0,0.5);
		border-radius: 5px;
	}
	#news div{
		border-top: 1px dotted #fff;
		padding: 5px 20px;
	}

}

#news{
	height: 15vh;
	overflow-y: scroll;
}