/*  ===== MOBILE styles (reside at the top and are inherited by all devices) ===== */
/*  ===== See tablet, desktop, and print @media queries at the bottom. */


/*   ----- Imports  -----  */
  /* @import 'node_modules/modern-normalize/modern-normalize.css';  npm install modern-normalize  Resets elements for browser consistency.  https://www.npmjs.com/package/modern-normalize */         
  /* @import "component1.css";   Component-specific stylesheets, if any.   */
  /* @import url(//fonts.googleapis.com/css?family=Font+Name); Add fonts from a hosted services like Google Fonts.   */
  @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');


/*   ----- Variables  -----  */
/* :root {
  --custom-color-name:;
  --custom-embellishment-name:;
} */

/*  ----- Viewport ----- elements inherited by all remaining elements ----- */
body {       /* Can alternatively define in html {}. */
  background-color: rgb(145, 64, 32);
  /* background-image:; */
  color: rgb(237, 75, 12);
  font-family: "Roboto", sans-serif;
  height: 100%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
}

button {
    background-color: rgb(25, 99, 92);
    color: silver;
    height: 50px;
    width: 200px;
    font-size: 20px;
}

.container {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: black;
    border: 5px solid rgb(25, 99, 92);
    border-radius: 5px;
    padding-bottom: 51px;
    margin: 8px;
    /* added position for roundDiv */
    position: relative; 
}

.myButtons {
    border: 5px outset rgb(145, 64, 32);
    border-radius: 5px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content:space-between;
}

.players {
    color: rgb(25, 99, 92);
    font-size: 46px;
    display: flex;
    align-items: center;
    justify-content: space-around;
    margin-top: 20px;
    z-index: 1;
}

.human,
.computer {
    background: rgb(0, 0, 0);
    width: 100px;
    height: 100px;
    border: 3px solid rgb(25, 99, 92);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.scores {
    color: rgb(25, 99, 92);
    padding-top: 50px;
    font-size: 200px;
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-top: 20px;
    justify-content: space-around;
    z-index: 1;
}

.humanScore,
.computerScore {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

#vline {
    position:absolute;
    top:277px;
    left:50%;
    bottom:0; 
    /* margin:0; */
    border:none;
    border-right: 4px dotted rgb(25, 99, 92);
}

/* h1 {
    color:silver
} */

h2 {
    color: silver;
    font-style: italic;
}