/* Name: Howard Xing */
/* Last Edited: June 16, 2023 */
/* File Name: style.css */



/*Style sheet for website*/

/* Global changes for tags */
a {
	text-decoration: none;
	color: white;
}

a:hover {
	color: red;
}

ul {
	font-size: 2vw;
}

h6 {
	font-size: 1vw;
}

iframe {
	height: 300px;
	width: 100%;
}


/* Common styles paired with a class*/

.centered { 
	text-align: center;
	
}

.newroman {
	font-family: "times new roman", serif;
}

.whitetext {
	color: white;
}

.redtext {
	color: rgb(255, 0, 0);
}

.tantext {
	color: rgb(210,180,140);
}

.roboto {
	font-family: "Roboto condensed", sans-serif;
}




/* The body and the background image */
body {
	background-image: url('images/background.jpg');
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-size: cover;
	padding: 5%;
}


/* Main section of the page*/
.main {
  padding: 2%;
  border-bottom-left-radius: 10px; 
  border-bottom-right-radius: 10px; 
  background-color: rgb(100, 100, 100);
}


/* Page heading*/
.main h1 {
	font-weight: bolder;
	font-size: 5vw;
	
}

/* Page subheading */
.main h2 {
	font-weight: bold;
	font-size: 4vw
}

/* Page subheading */
.main h3 {
	font-weight: bold;
	font-size: 3vw;
}


/* Page paragraphs*/
.main p {
	font-size: 2vw;
	padding: 0.5%;
	text-align: justify-all;
	padding-left: 2%;
	padding-right: 2%;
}

/* Navigation buttons in bottom of homescreen*/
#homepagebuttons {
	display: flex;
	flex-wrap: wrap;
	padding: 1%;
	height: 100%;
	width: 100%;
	justify-content: center;
	
}

.box {
	background-color: rgb(75, 75, 75);
	padding: 3%;
	font-size: 2vw;
	height: 325px;
	width: 275px;
	text-align: center;
	margin: 20px;
	border-radius: 15px;
	
}

.box:hover {
	background-color: rgb(0, 0, 0);
	transform: scale(1.25);
	transition: 0.5s;
	
}

#homepagebuttons  img {
	padding-top: 5%;
	height: 60%;
	width: 80%;
}


/* Top menu */
.header {
  background-color: rgb(50, 50, 50);
  padding: 2%;
  border-top-left-radius: 10px; 
  border-top-right-radius: 10px; 
}

/* Website name/title */
.header > h1 {
	font-weight: bolder;
	font-size: 3.25vw;
	
}

/*The header menu buttons*/

.menu-buttons {
	text-align: right;
}
	
/* Styles navbar buttons*/
.menu-buttons a {
	padding-left: 2%;
	padding-right: 2%;
	font-size: 2vw;
}

/* adds navbar colors */
.menu-buttons a:link, .menu-buttons a:visited{
	color: rgb(200, 0, 0);
}

/* Makes hovered nav-bar buttons change color when hovered over or when active*/
.menu-buttons a:hover, .menu-buttons a:link.here, .menu-buttons a:visited.here{
	color: rgb(255, 255, 255);
	background-color: rgb(0, 0, 0);
	border-radius: 5px;
}

/* Gives transition time animation for header buttons when hovered*/
.menu-buttons a:hover {
	transition: 1s;
}



/* Entente powers subheading */
#entente {
	color: rgb(0, 0, 255);
}

#central {
	color: rgb(150, 0, 0);
}

/* Styling tables */
#nation-data, .battletable {
	width: 100%;
	
}
#nation-data th, #nation-data tr, #nation-data td, .battletable th, .battletable tr, .battletable td {
	border: 1px white solid;
	padding: 0.5%;
}

#nation-data td {
	font-size: 1.3vw;
}

#nation-data th {
	font-size: 1.8vw;
}

.battletable td {
	font-size: 1.8vw;
}

.battletable th {
	font-size: 2.3vw;
}


#nation-data td, .battletable td {
	background-color: rgb(125, 125, 125);
}

#nation-data th, .battletable th {
	color: white;
	background-color: rgb(75, 75, 75);
}

#nation-data td:hover {
	color: yellow;
	background-color: black; 
	font-weight: bold;
	transform: scale(1.25);
	transition: 0.5s;
}

/*Creates a box for a section*/
.sectionbox {
	border-radius: 15px;
	background-color: rgb(150, 150, 150);
	padding: 2%;
	margin-bottom: 3%;
}

/* Creates small section for images on battles */
.battle-img {
	float: right;
	height: 40%;
	width: 40%;
}

.battle-img > img {
	height: 60%;
	width: 100%;
}

#map:hover {
	width: 50%;
	height: 50%;
	transition-duration: 0.5s;
}

/* Makes a gap for images so the text doesn't mix with images */
.rightimage {
	margin-right: 40%;
}


/* Edits images for nations*/

.nation-img{
	display: block;
	margin-right: auto;
	margin-left: auto;
	height: 25%;
	width: 25%;
	text-align: center;
	
}

/* Edits style for validator */
.validator {
	height: 10%;
	width: 10%;
}

#final {
	width: 100%;
	height: 300px;
}

/* America */
.AMERICA {
	font-weight: bolder;
	color: rgb(10, 49, 97);
}