/*Basic Elements*/
/*Defines basic background color and gradient*/
html {
background-color:#d94a3a;
background:linear-gradient(to right,#706F6B 0%,#d94a3a 4%,#d94a3a 96%,#706F6B 100%);
} 

/*defines line height for the whole webpage,sets max width text can stretch to. margin 1rem auto centers the text and establishes padding.
Poppins is a font brought in from google fonts.*/
body {
background-color:#d94a3a;
text-align: center;
font-family: "Poppins", Arial, sans-serif;
line-height: 1.5;
max-width: 1000px;
margin: 1rem auto;
}

p{
color:#1f1f1f
}

main {
background-color:#d94a3a;
}

/*Code for "virtual pokedex" at top of page, establishes border and
spacing for said border*/
h1 {
color: #1f1f1f;
background-color: #ffffff;
border: 1px solid #706F6B;
width: fit-content;
margin: 1rem auto
}


h2, h3, h4 {
background-color: #ffffff;
border: 1px solid #706F6B;
width: fit-content;
margin: 1rem auto;
color: #1f1f1f;
}

nav {
background-color: #ffffff;
border: 1px solid #706F6B;
}


section {
background-color: #ffffff;
border: 1px solid #706F6B;
padding: 15px 30px;
margin: 1rem 0;
/*border-radius curves the edges of all of my section elements, making the
webpage look far more presentable.*/
border-radius: 12px;
}

header {
background-color: #d94a3a;
width: fit-content;
margin: 1rem auto;
}

footer {
background-color: #ffffff;
border: 1px solid #706F6B;
padding: 0.5rem 1rem;
margin: 1rem auto;
width: fit-content;
}

/*Table Elements*/
tr {
background-color: #ffffff;
border: 1px solid #706F6B;
/*this line of code defines behavior for when rows are hovered over,
which is used later in the code to establish some features.*/
transition: transform 0.1s ease, background-color 0.1s ease;
}

td {
background-color: #ffffff;
border: 1px solid #706F6B;
}

th {
background-color: #ffffff;
border: 1px solid #706F6B;
/*No border on top as to keep display clean. Having a border on top
would add a line between the text and table, so I manually removed it.*/
border-top: none;
}

/*setting up table so that it doesn't take up too much space, and is scrollable on mobile*/
table {
background-color:#d94a3a;
margin: 1rem auto;
/*width at 95 percent so that when the text hover effect goes into 
action, the table row doesn't get blocked off by the edge of the border.*/
width: 95%;
/*making it so every table cell is its own block, but remains tightly
knit with the rest of the elements.*/
border-collapse: separate;
border-spacing: 0;
border-top: 1px solid;
}

/*establishing sizes for images*/
table img {
max-width: 80px;
height: auto;
}

/*keeps the table from overflowing on mobile screens*/
.tablemobile {
overflow-x: auto;
border: none;
}

/*Other Elements*/
p a {
background-color: #ffffff;
}

a {
/*making sure hyperlinks arent underlined*/
text-decoration: none;
color: #1f1f1f;
}

img {
max-width: 100%;
height: auto;
}

ol {
/*turning ordered lists into flexbox assets, making them wrap around the box and center*/
display:flex;
gap: 30px;
flex-wrap: wrap;
background-color:#ffffff;
justify-content: center;
}

nav ul {
/*turning unordered list into flexbox assets*/
display: flex;
flex-flow: wrap;
justify-content: space-evenly;
list-style: none;
gap: 10px;
padding: 3px 3px;
}

/*parent child relationship with the source boxes inside the parent box.
Both of these are inside of a third container which contains the "sources"
text.
*/

.parent {
display: flex;
flex-wrap: wrap;
justify-content: center;   
gap: 30px;
background-color: #ffffff;
border: none;
}

.child1, .child2 {
flex: 1 1 300px;
padding: 15px 20px;
box-sizing: border-box;
background-color: #ffffff;
display: flex;            
flex-direction: column;
text-align: center;     
border: none; 
}

.child1 h2, .child2 h2 {
margin-bottom: 10px;
}

/*containers for the sources text.*/
.todo {
background-color: #ffffff;
border: 1px solid #706F6B;
max-width: 1000px;
margin: 20px auto;      
padding: 20px;
box-sizing: border-box;
}

.todo > h2 {
text-align: center;        
margin-bottom: 25px;
}

/*A container for my pokedex table, I am using this to space out
the text I have above the table from the table itself.*/
.dextable {
background-color: #ffffff;
border: 1px solid #706F6B;
max-width: 1000px;
margin: 1rem auto;
}

/*Added this so I can insert it where I want borders removed.*/
.noborder {
border: none;
background-color: transparent;
}

/*HOVER EFFECT*/
tbody tr:hover {
transform: scale(1.05);
box-shadow: 0 0 12px rgb(255, 255, 255); 
}

/*making it so that the virtual pokedex and page list stay at the top of the
page. The z index value is to prevent the audio files for pokemon cries
being displayed above the sticky, as when I didn't have the assignment,
they would be displayed over top of this section. The z index makes the sticky
the highest priority thing on the page.*/
.topbox {
position: sticky;
top: 0;
background-color: #d94a3a;
z-index: 1000;
}

/*nesting flexbox ol inside of this, this is simply a container.*/
.typelist {
background-color: #ffffff;
border: 1px solid #706F6B
}


/*
POKEDEX COLORS
Background - d94a3a
Border - 706f6b
Text - 1f1f1f
Text Background - ffffff
*/