body{
    background-image: url("../images/jahallo.jpg");
    justify-content: center;
    text-align: center;
}
        .topnav { 
    background-color: #F0F4EF;
    overflow: hidden;
    text-align: center;
    margin: auto;
    padding: 15px;
    width: fit-content;
    border-radius: 25px;
    padding-left: 45px;
    padding-right: 45px;
  }
  
  .topnav a { 
    color: #0D1821;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
    border-radius: 25px;
  }
  
  .topnav a.active {    
    background-color: blueviolet;
    color: white;
    padding-left:42.5px;
    padding-right: 42.5px;
  }

  h1{
    color: white;
  }
  button {
    background-color: blueviolet;
    padding: 14px 20px;
    margin: 8px 0;
    border: none;
    cursor: pointer;
    border-radius: 25px;
    color: white;
  }
  button.right {
    margin-left: 40px;
  } 

  /* styles.css */

/* To center everything in game */
.game{ 
	display: flex; 
	flex-direction: column; 
	height: 100vh; 
	width: 100vw; 
	justify-content: center; 
	align-items: center; 
} 

/* Title of the game */
.title{ 
	position: absolute; 
	top: 0; 
	font-size: 4rem; 
	z-index: 2; 
} 

/* Score Board */
.score{ 
	display: flex; 
	width: 30vw; 
	justify-content: space-evenly; 
	position: absolute; 
	top: 70px; 
	z-index: 1; 
} 

/* Score */
.p-count,.c-count{ 
	text-align: center; 
	font-size: 1.5rem; 
	margin-top: 1rem; 
} 

/* displaying three buttons in one line */
.options{ 
	display: flex; 
	width: 50vw; 
	justify-content: space-evenly; 
	margin-top: 2rem; 
} 

/* Styling on all three buttons */
.rock, .paper, .scissor{ 
	padding: 0.8rem; 
	width: 100px; 
	border-radius: 10px; 
	background: green; 
	outline: none; 
	border-color: green; 
	border: none; 
	cursor: pointer; 
} 

.move{ 
	font-size: 2rem; 
	font-weight: bold; 
} 

/* Reload button style */
.reload { 
	display: none; 
	margin-top: 2rem; 
	padding: 1rem; 
	background: green; 
	outline: none; 
	border: none; 
	border-radius: 10px; 
	cursor: pointer; 
} 

.result{ 
	margin-top: 20px; 
	font-size: 1.2rem; 
} 

.title{ 
	justify-content: center; 
}
.board {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 5px; /* Decreased the gap between cells to 5px */
}
.cell {
	width: 100px;
	height: 100px;
	background-color: lightgray;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 24px;
	cursor: pointer;
}
/* To center everything in game */
.game{ 
	display: flex; 
	flex-direction: column; 
	height: 100vh; 
	width: 100vw; 
	justify-content: center; 
	align-items: center; 
} 

/* Title of the game */
.title{ 
	position: absolute; 
	top: 0; 
	font-size: 4rem; 
	z-index: 2; 
} 

/* Score Board */
.score{ 
	display: flex; 
	width: 30vw; 
	justify-content: space-evenly; 
	position: absolute; 
	top: 70px; 
	z-index: 1; 
} 

/* Score */
.p-count,.c-count{ 
	text-align: center; 
	font-size: 1.5rem; 
	margin-top: 1rem; 
} 

/* displaying three buttons in one line */
.options{ 
	display: flex; 
	width: 50vw; 
	justify-content: space-evenly; 
	margin-top: 2rem; 
} 

/* Styling on all three buttons */
.rock, .paper, .scissor{ 
	padding: 0.8rem; 
	width: 100px; 
	border-radius: 10px; 
	background: green; 
	outline: none; 
	border-color: green; 
	border: none; 
	cursor: pointer; 
} 

.move{ 
	font-size: 2rem; 
	font-weight: bold; 
} 

/* Reload button style */
.reload { 
	display: none; 
	margin-top: 2rem; 
	padding: 1rem; 
	background: green; 
	outline: none; 
	border: none; 
	border-radius: 10px; 
	cursor: pointer; 
} 

.result{ 
	margin-top: 20px; 
	font-size: 1.2rem; 
} 

.title{ 
	justify-content: center; 
}

h2 {
	color: white;
}

label { /* gjer label kvit */
	color: white;
}