@import url("https://fonts.googleapis.com/css?family=Montserrat:400,400i,700");

body { font-size: 16px; color: #404040; font-family: Montserrat, sans-serif; min-height:100vh; 
background: url("img/lights2a-pixabay.jpg") no-repeat center; background-size:cover;  margin: 0; padding: .5rem 0 2rem 0; box-sizing: border-box;
}

:root {
    --dhs-green: rgb(0, 100, 0);
    --dhs-gold: rgb(255, 192, 0);
    --clr-black: rgb(0, 0, 0);
}

.wrap-profile { height:100vh; width:100%; padding:.5rem 0 2rem 0;}
.wrap-banner { width:100%; display:flex; flex-direction:column; justify-content:center; align-items:center; background:white; }
.wrap-banner h2 { padding:0; margin:0; white-space:nowrap; font-weight:bolder; }
.wrap-title { width:100%; display:flex; flex-direction:row; justify-content:center; align-items:center;  }

.wrap-cards { width:100%; display:flex; flex-direction:row; flex-wrap:wrap; justify-content: center; align-items:flex-start; gap:1rem; }
@media(max-width: 768px)
{    .wrap-cards { width: 100%; }
}

/**************************************************/
/*  HOME PAGE            */
/**************************************************/
.wrap-search { padding:1rem 0; }
.searchform { display:flex; flex-direction:column; flex-wrap:nowrap; justify-content:center; align-items:center; }
input[type=text], textarea, input[type=search]  { margin:.3em; padding:.5em; border-radius:14px; border: 2px solid var(--dhs-green); font-size:1.1rem; font-weight:bolder; color:var(--dhs-green); }
input[type=button], input[type=submit], input[type=reset] {background:var(--dhs-green); color:white; border:none; border-radius:14px; padding:.5em 1em; text-decoration:none; margin:4px 2px; cursor:pointer;}
input[type=button]:hover, input[type=submit]:hover, input[type=reset]:hover { background: var(--dhs-gold); color:black;}

.card { background-color: #fff; max-width:250px; min-width:250px; display: flex; flex-direction: column; justify-content:flex-start; align-items:center; overflow: hidden; border-radius: 2rem; box-shadow: 0px 1rem 1.5rem rgba(0,0,0,0.5); padding:0 0 2rem 0; }
.cardpic { width:100%; display: flex; flex-direction: column; justify-content:flex-start; align-items:center; background:white;}
.cardpic img { height:15em; }
.card .bannerfill { width: 100%; height: 1rem; background:green; }
.card h3.name { color:var(--dhs-green); line-height:1; text-align: center; padding: .5rem 1rem 1rem; margin: 0;}
.card h4.inducted { color:black; text-align: center; padding: .5rem 1rem 1rem; margin:0;}
.card .stats { color:var(--dhs-gold); padding: 0; display:flex; flex-direction:column; justify-content:center; align-items:center; font-weight:bolder; }
/*.card .stats span { color: #FFC000;  font-weight:bolder; }*/


@media(min-width: 992px)
{    .searchform { flex-direction:row; flex-wrap:wrap;  }
}

/**************************************************/
/*  HALLOFFAME-PLAYER PAGE            */
/**************************************************/
.wrap-playercard { width:100%; display:flex; flex-direction:row; flex-wrap:wrap; justify-content:center; align-items:center; padding:2rem .5rem; }

.playercard { background-color: rgb(255, 255, 255,.9); width:90%; display:flex; flex-direction:column; border-radius:2rem; box-shadow: 0px 1rem 1.5rem rgba(0,0,0,0.5); padding:2rem 1rem;}
.playertoprow {  display:flex; flex-direction:row; flex-wrap:wrap; }
.playerbotrow {  display:flex; flex-direction:column;  }

.playercard .playertoprow .player-pic { flex:1; width:100%; display:flex; flex-direction:column; align-items:center; padding:0;    }
.playercard .playertoprow .player-detail { flex:1; width:100%; display:flex; flex-direction:column; align-items:flex-start; color:black; padding:0; font-weight:bolder;  }
.playercard .playertoprow .player-pic img { max-width:100%; min-width:250px; background:var(--dhs-green); border-radius: 1rem; box-shadow: 0px 1rem 1.5rem rgba(0,0,0,0.5); padding:.5rem;}
.playercard .playertoprow .player-detail h1.name { font-size:2.5rem; line-height:1; color:var(--dhs-green); padding:.5rem 0 1rem; margin: 0;}
.playercard .playertoprow .player-detail div { padding:0 1rem; }
.playercard .playerbotrow { padding:1rem 2rem; }

.backbtn { background:var(--dhs-green); color:white; border:none; border-radius:14px; padding:.5em 1em; text-decoration:none; cursor:pointer; white-space:nowrap;text-align:center; margin:0 1rem;   }
.backbtn:hover { background: var(--dhs-gold); color:black; }

.left, .right { flex:1; }

@media(min-width: 992px)
{   .wrap-playercard { padding:2rem 0;   }
    .playercard { width:75%; padding:2rem;}
    .playercard .playertoprow .player-pic { padding:0 .4rem 0 2rem; }
    .playercard .playertoprow .player-detail { padding:0 4rem 0 2rem;   }
    .playercard .playertoprow .player-pic img { max-width:400px; min-width:300px; }
}

/**************************************************/
/*  FOOTER            */
/**************************************************/
.footer {
    display:flex; flex-direction:column; flex-wrap:nowrap; justify-content:center; align-items:center; width:100%; color:white; margin:10rem 0 0; padding:0 2rem;
}
.footer a {color:white; padding:.5rem 0;}
.footer a:hover {color:var(--dhs-gold);}
@media(min-width: 992px)
{    .footer { flex-direction:row; flex-wrap:wrap; justify-content:space-between;  }
}