/*Imports Fonts*/
@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@500&display=swap');


html{
	/*Global Variables*/
	--aside-color-left: #f6cb06;
	--aside-color-right: rgb(255, 219, 160);
	--aside-border-size: 3.5px;
	--aside-stats-and-traits-font-sz: 15px;
	--space-after-nav: 50px;

	background-color: lightgoldenrodyellow;
}


/****************************************************/
/***********************  BODY  *********************/
/****************************************************/
body{
	display: grid;
	grid-template-columns: auto;
    margin: 0px;
    padding: 0px;
}


/****************************************************/
/********************  2 - Main  ********************/
/****************************************************/
main{
	display: flex;
	flex-wrap: wrap;

    align-items: flex-start;
    /*default is 'normal' which strecthes items;
      however, 'center' does not*/
    justify-content: center;
    gap: 2vw;
    margin: 2vw;

    /*workaround for small screened phones in which
      margin + aside is too wide*/
    @media only screen and (max-width: 380px) {
    	margin: 1vw;
    }
}

/****************************************************/
/*******************  2.1 - Aside  ******************/
/****************************************************/
aside{
	border: 1.5px solid black;
	border-radius: 5px;
	background-color: white;
	padding: 2px;
	/*flex-grow flex-shrink flex-basis*/
	flex: 1 0 0;
	max-width: 330px;
}

aside h1{
	text-align: center;
	background: var(--aside-color-left);
	margin: 0;
	font-size: 16px;
}

/*'#' is used to reference "ids"*/
#characterImage{
	display: block;
	width: 320px;
	margin: 0 auto;
}

.teamImage{
	cursor: pointer;
}

.wideTeamImage{
	height:320px;
}

/****************************************************/
/******************  2.1.1 - Stats  *****************/
/****************************************************/
.stats{
	border: var(--aside-border-size) solid white;
	/*collapses borders of adjacent table cells into
	  single unified borders*/
	border-collapse: collapse;
	background-color: var(--aside-color-right);
	text-align: center;
	width: 330px;
	font-size: var(--aside-stats-and-traits-font-sz);
	table-layout: fixed;
}

/*nth-child is a pseudo class*/
/*This block is targeting the first cell of 
  the table header & the first cell of each 
  row*/
.stats th:nth-child(1), .stats td:nth-child(1){
	width: 110px;
	font-family: Garamond;
	background: var(--aside-color-left);
	font-size: var(--aside-stats-and-traits-font-sz);
}

.stats td:nth-child(1){
	font-family: Roboto, Garamond;
}

.one{
	border-left: solid var(--aside-color-right);
}

.filled-in{
	background: red; 
	border: 2px solid var(--aside-color-right);
}

.filled-in-yellow{
	background: yellow; 
	border: 2px solid var(--aside-color-right);
}

/****************************************************/
/******************  2.1.2 - Traits  ****************/
/****************************************************/
.traits{
	width: 330px;
	font-size: var(--aside-stats-and-traits-font-sz);
	border: 1px solid white;
	font-family: 'Roboto', 'sans-serif';
}

.traits th:nth-child(1), .traits td:nth-child(1){
	background: var(--aside-color-left);
	font-weight: bold;
}

.traits th:nth-child(2), .traits td:nth-child(2){
	background: var(--aside-color-right);
}



/****************************************************/
/******************  2.2 - Article  *****************/
/****************************************************/
article{
	/*top, right, bottom, left*/
	background-color: white;
	border-radius: 10px;
	font-family: Roboto, Garamond;

	/*flex-grow flex-shrink flex-basis*/
	flex:1 0 0;
	min-width: 310px;
}

article h1{
	padding-left: 20px;
	padding-top: 25px;
	margin-bottom: 0px;
}

/*first-child is a pseudo class*/
h1:first-child{
	padding-top: 15px;
}

article p{
	padding-left: 20px;
	padding-right:  20px;
	margin-top: 5px;
	font-size: 18px;
}

article ol{
	padding-left: 45px;
	padding-right: 15px;
	font-size: 18px;
	margin-top: 5px;
}


/*horizontal rule aka a horizontal line*/
hr{
	width: 97%;
}