* {
    box-sizing: border-box;
}

body {
    margin: 0;
}

/* Style the header */
.header {
    background-color: whitesmoke;
    border: 3px solid black;
    text-align: center;
}

/* Style the start button bar */
.start {

    background-color: #3366ff;
    display: flex;
    justify-content: center;
    border: 3px solid black;

}

/* Style the start button */
.start button {

    color: black;
    margin: 10px;
    border: 3px solid black;
    padding: 10px 40px;
    font-size: 15px;
    font-weight: bold;
}

/* Change color on hover */
.start button:hover {
    background-color: #ddd;
    color: black;
    cursor: pointer;
} 

/* Flex container to show user and computer heading*/
.player-flex-container {
    
    display: flex;
    border: 3px solid black;
    flex-direction: row;
    
}

/* styling four divs to display user & computer points & cards.*/
.player-flex-items {
    background-color: #f1f1f1;
  flex: 50%;
  border: 3px solid black;
  
}

/* Flex container to contain user & computer points & cards.*/
.flex-container {
    
    display: flex;
    border: 3px solid black;
    flex-direction: row;
    
}

/* styling four divs to display user & computer points & cards.*/
.flex-items {
    background-color: #f1f1f1;
  padding: 10px;
  flex: 25%;
  border: 3px solid black;
  
}


/* Responsive layout - makes the three columns stack on top of each other instead of next to each other */
@media screen and (max-width:600px) {
    .flex-container {
    flex-direction: column;
  }
  } 

/* Style the Draw button bar */
.draw {

    background-color: #3366ff;
    display: flex;
    justify-content: center;
    border: 3px solid black;

}

/* Style the Draw button */
.draw button {

    color: black;
    margin: 10px;
    padding: 10px 40px;
    border: 3px solid black;
    font-size: 15px;
    font-weight: bold;
}

/* Change color on hover */
.draw button:hover {
    background-color: #ddd;
    color: black;
    cursor: pointer;
}