@charset "utf-8";

/* CSS Document */

/* Fading Transition Effect */
@-webkit-keyframes fade {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}
@-moz-keyframes fade {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}
@-o-keyframes fade {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}
@keyframes fade {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}

/* Zoom-In Transition Effect*/
@-webkit-keyframes scale {
  0%   { transform: scale(0.5,0.5); }
  100% { transform: scale(1,1); }
}
@-moz-keyframes scale {
  0%   { transform: scale(0.5,0.5); }
  100% { transform: scale(1,1); }
}
@-o-keyframes scale {
  0%   { transform: scale(0.5,0.5); }
  100% { transform: scale(1,1); }
}
@keyframes scale {
  0%   { transform: scale(0.5,0.5); }
  100% { transform: scale(1,1); }
}

body{font-family: 'Montserrat', sans-serif;color:#222121;}
p{font-family: 'archivoregular', sans-serif;color:#222121;}
footer {font-family: 'Montserrat', sans-serif;padding:40px; text-align:center;font-size:15px;line-height:1.75;color:#222121;}

.top-box{margin:0 auto;display:grid; grid-template-columns:auto;background-color:white; position: fixed;top: 0; width: 100%; right:5px; z-index: 1; float:right; padding-top:10px; justify-content: center;}

header{margin:0 auto;animation-name: fade; animation-duration: 3s; animation-fill-mode: forwards;}
nav{padding-top:5px;
	text-align:center;
	margin:0 auto;
	font-size:20px;
	height:50px;
	animation-name: fade;
 	animation-duration: 3s; 
 	animation-fill-mode: forwards;}


.menu a {
    clear:both;
    color:#222121;;
    margin:0 auto;
    line-height:50px;
    text-align:right;
  	-webkit-transition: 1s ease-in-out;
    -moz-transition: 1s ease-in-out;
    -o-transition: 1s ease-in-out;
    transition: 1s ease-in-out;}

nav a:hover, nav a:focus {
	background-color:#222121;
	color:white;
	padding: 20px;
}

.label {
     margin:0 auto;
     font-size: 30px;
     color:#292929;
     line-height:50px;
     display:none;
     width:25px;
     float:left;


}
#toggle
	{display:none;}

#middle-box
	{display:grid; grid-template-columns:50em auto;grid-template-rows:auto;grid-column-gap:10px;justify-content:center;}

#header-text
	{grid-column:1 / -1; margin-top:180px; border:dotted thick #222121; text-align: center; font-size:12px;}
#news-section
	{margin:0 auto;padding-top:5px;}
article
	{display:flex;flex-direction:row;padding-bottom:20px;padding-top:20px;padding-right:10px;border-bottom:groove thin;margin:0 auto;font-size:20px;line-height:1.75;}
.post
	{margin:0 auto;}
h2
	{font-size:25px;text-align:left;}



@media screen and (max-width:1024px){
.vertical-line{display:none;}
.top-box
	{margin:0 auto;display:flex; flex-direction: row; width:100%; top:0px; right:5px; z-index: 1;float:left;padding-top:10px;justify-content: center;}
header
	{margin:0 auto;}
	
nav
	{font-size:20px;
    height:60px;
	margin-top:20px;}

.menu a 
	{clear:both;
    color:#564D43;
    line-height:50px;}

nav a:hover, nav a:focus
	{background-color:white;
	color:#222121;}
	
.label {
    display:block;
    cursor:pointer;
	background-color: white;
	border:groove thin lightgray;
	width:fit-content;
	padding-left:15px;
	padding-right:15px;
	font-size:40px;}

	
.menu {
    width:100%;
    height:100%;
    display:none;
	margin-left:-125px;}
	
.menu a {
	color:white;
	font-size:15px;
	margin: 0 auto;
    display:block;
    border-bottom: thin solid white;
    background-color:#222121;
	text-align: center;
	width:200%;}
	
#toggle:checked + .menu {display:block;}
	
}



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

	and (max-width:1024px)

{
	#middle-box
	{display:grid; grid-template-columns:45em auto;grid-column-gap:10px;justify-content:center;padding-top:100px;}

#header-text
	{grid-column:1 / -1; margin-top:50px; border:dotted thick #222121; text-align: center;}
#news-section
	{margin:0 auto;padding-top:5px;}

article
	{display:flex;flex-direction:row;padding-bottom:20px;padding-top:20px;border-bottom:groove thin;margin:0 auto;justify-content:center;}
	
	h2{font-size:20px;text-align:left;padding-right:10px;}
}



@media only screen

	and (max-width : 768px){

	#middle-box{display:grid; grid-template-columns:30em auto;grid-column-gap:10px;justify-content:center;}

	#header-text{grid-column:1 / -1;text-align:center;}

	#news-section{margin:0 auto;border-bottom:groove thin;}

	article{display:flex;flex-direction:column;justify-content: center;}


}



@media only screen

and (min-width : 481px)

and (max-width : 768px) {
	#middle-box{display:grid; grid-template-columns:25em auto;grid-column-gap:10px;justify-content:center;}

	#header-text{grid-column:1 / -1;text-align:center;}

	#news-section{margin:0 auto;border-bottom:groove thin;}

	article{display:flex;flex-direction:column;justify-content: center;}

}


@media only screen

and (max-width : 480px) {


	#middle-box{display:grid; grid-template-columns:25em auto;grid-column-gap:10px;justify-content:center;}

	#header-text{grid-column:1 / -1;text-align:center;}

	#news-section{margin:0 auto;border-bottom:groove thin;}

	article{display:flex;flex-direction:column;justify-content: center;}


}



	

@media only screen and ( min-width : 321px ) and (max-width : 481px ){
	#middle-box{display:grid; grid-template-columns:25em auto;grid-column-gap:10px;justify-content:center;margin:0 auto;}
	
	#header-text{grid-column:1 / -1;text-align:center;margin-top:120px;}

	article{display:flex;flex-direction:column;margin:0 auto;}
	
	.post{justify-content: center;}

}

	

@media only screen

and (max-width : 320px) {

.menu a{
    clear:both;
    text-decoration:none;
    color:#564D43;
    line-height:50px;}

nav a:hover, nav a:focus {
   	background-color:white;
	color:#222121;}
	
.label {
    display:block;
    cursor:pointer;
	width:fit-content;
	padding-left:5px;
	padding-right:5px;
	padding-top:0px;
	font-size:20px;}
	
.menu {
    width:100%;
    height:100%;
    display:none;}
	
.menu a {
	color:white;
	font-size:15px;
	margin: 0 auto;
    display:block;
    border-bottom: thin solid white;
    background-color:#222121;
	text-align:center;
	width:200%;}
	
#toggle:checked + .menu {
     display:block;}

	#middle-box{display:grid; grid-template-columns:15em auto;grid-column-gap:10px;justify-content:center;margin:0 auto;}
	
	#header-text{grid-column:1 / -1;text-align:center;margin-top:120px;}

	article{display:flex;flex-direction:column;margin:0 auto;}
	
	.post{justify-content: center;}
	h1{font-size:15px;}
	h2{font-size:15px;padding:5px;text-align:left;}

	p{font-size:15px;}

}