body {
    height: 100vh;
    margin: 0;
    padding: 0;
    background-color: #263046;
    color: #d3cfcf;
    font-family: monospace;
}

main {
    display: flex;
    justify-content: center;
    align-items: center;
}

main.mainPage {
    display: inline;
}

ul.list {
    font-size: 1.8rem;
    margin-left: 10vw;
}

ul.list li {
    padding: 0.5rem;
}

button#readmore, button#readmore2{
    font-size: 1.9rem;
    background-color: #263046;
    border: none;
    color: #d3cfcf;
    font-family: system-ui;
}

button#readmore:hover, button#readmore2:hover{
    color: #427992;
    cursor: pointer;
}

div#info, div#info2 {
    max-width: 75vw;
    width: 100%;
    display: none;
}

div#info p, div#info2 p {
    background-color: #263046;
    border-radius: 1rem;
    padding: 0.5rem;
    border: 0.5rem solid #3ebfd6;
}

div#info a, div#info2 a {
    text-decoration: none;
    color: #3ebfd6;
}

div#info a:hover, div#info2 a:hover {
    color: #427992;
}

p.textParagraph {
    text-align: center;
    font-size: 2rem;
    margin: 0;
    padding-right: 5vw;
    padding-left: 5vw;
}

h1.welcome {
    text-align: center;
    font-size: clamp(2rem, 5vw, 3.5rem);
    margin-top: 0.7rem;
    margin-bottom: 3.5rem;
}

nav ul{
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    padding: 0.6rem;
    margin: 0;
    background-color:#11121a;
    list-style-type: none;
}

nav ul li a{
    text-decoration: none;
    color: #d3cfcf;
    font-size: 2rem;
}

nav ul li a:hover {
    color: #427992;
}

nav ul li a img:hover {
    outline: #427992;
    opacity: 60%;
}

.tic-tac-toe{
    width: 5rem;
}

.connect-four {
    width: 5rem;
}

#retryBlock {
    display: flex;
    justify-content: center;
    align-items: center;
}

#return {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    margin-bottom: 1.5rem;
}

#returnbtn {
    font-family: system-ui;
    border: solid #000000;
    text-transform: uppercase;
    margin-top: 5rem;
    margin-left: 0.7rem;
    width: 7.5rem;
    height: 3.4rem;
    font-size: 1.6rem;
    font-weight: 600;
    background-color: #3ebfd6;
    cursor: pointer;
    border-radius: 1.2rem;
    position: absolute;
    left: 0;
    cursor: pointer;
}

#returnbtn:hover {
    background-color: #3195a7;
}

#retrybtn {
    font-family: system-ui;
    border: solid #000000;
    text-transform: uppercase;
    width: 8.5rem;
    height: 3.75rem;
    font-size: 2.5rem;
    background-color: #43d63e;
    cursor: pointer;
    border-radius: 1.2rem;
    margin-bottom: 1.2rem;
}

#retrybtn:hover {
    background-color: #37ac33;
}

div#gamemode, div#score {
    text-align: center;
    font-size: 4.375rem;
    margin-bottom: 1.25rem;
    margin-top: 0.625rem;
}

div#score {
    font-size: 3.125rem;
}

#gamemode button {
    font-family: system-ui;
    border: solid #d3cfcf;;
    text-transform: uppercase;
    display: block;
    margin: 0.625rem auto;
    padding: 0.625rem 1.25rem;
    font-size: 1.5625rem;
    font-weight: 600;
    border-radius: 0.625rem;
    color: #d3cfcf;
}

#singlePlayerbtn {
    background-color: red;
}

#singlePlayerbtn:hover {
    background-color: #b90101;
}

#twoPlayerbtn {
    background-color: #3b82f6;
}

#twoPlayerbtn:hover {
    background-color: #225bd6;
}

#gamemode button:hover {
    cursor: pointer;
}

#diff {
    text-align: center;
    font-size: 4.375rem;
    margin-top: 0.625rem;
}

#level1 {
    background-color: #58d838;
}

#level1:hover {
    background-color: #4abd2d;
}

#level2 {
    background-color: #e0eb4d;
}

#level2:hover {
    background-color: #b4bd3e;
}

#level3 {
    background-color: #ff0000;
}

#level3:hover {
    background-color: #b90101;
}

#levels button {
    font-family: system-ui;
    border: solid #000000;
    text-transform: uppercase;
    display: block;
    margin: 0.625rem auto;
    padding: 0.625rem 1.25rem;
    font-size: 1.5625rem;
    font-weight: 600;
    border-radius: 0.625rem;
    color: rgb(0, 0, 0);
}

#levels button:hover {
    cursor: pointer;
}

p#textbtn {
    margin-top: 0.625rem;
    margin-bottom: 1.25rem;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 4.375rem;
    color: #d3cfcf;
}

#board {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.625rem;
    padding: 1.25rem;
    border-radius: 0.625rem;
    width: 29.375rem;
    background-color: #263046;
}

#board button {
    width: 9.375rem;
    height: 9.375rem;
    font-size: 6.25rem;
    border: 0.125rem solid #00ffff;
    box-shadow: 0 0 10px #00ffff33;
    background-color: #111;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 1.25rem;
    transition: all 0.15s ease;
}

.previewX {
  color: rgba(255, 80, 80, 0.5);
}

.previewO {
  color: rgba(80, 220, 255, 0.5);
}

.win {
  animation: glowPulse 2.5s ease-in-out infinite;
}

@keyframes glowPulse {
  0% {
    text-shadow:
      0 0 2px currentColor,
      0 0 4px currentColor,
      0 0 6px currentColor;
    opacity: 0.85;
  }
  50% {
    text-shadow:
      0 0 4px currentColor,
      0 0 8px currentColor,
      0 0 12px currentColor;
    opacity: 1;
  }
  100% {
    text-shadow:
      0 0 2px currentColor,
      0 0 4px currentColor,
      0 0 6px currentColor;
    opacity: 0.85;
  }
}

#board button:hover {
  transform: scale(1.05);
}

.container {
    text-align: center;
}

p#statusText {
    text-align: center;
    font-size: 4.375rem;
    font-weight: 100;
    margin-bottom: 0.625rem;
    margin-top: 0.625rem;
}

#mode-selection {
    margin-bottom: 1.25rem;
}

#mode-selection button {
    font-family: system-ui;
    border: solid #d3cfcf;
    text-transform: uppercase;
    display: block;
    margin: 0.625rem auto;
    padding: 0.625rem 1.25rem;
    font-size: 1.5625rem;
    font-weight: 600;
    border-radius: 0.625rem;
    color: #d3cfcf;
}
  
#singlePlayerBtn {
    background-color: red;
}

#singlePlayerBtn:hover {
    background-color: #b90101;
}

#twoPlayerBtn {
    background-color: #3b82f6;
}

#twoPlayerBtn:hover {
    background-color: #225bd6;
}

#mode-selection button:hover {
    cursor: pointer;
}

#retryBtn {
    font-family: system-ui;
    border: solid #000000;
    text-transform: uppercase;
    width: 8.5rem;
    height: 3.75rem;
    font-size: 2.5rem;
    background-color: #43d63e;
    cursor: pointer;
    border-radius: 1.25rem;
    margin-bottom: 0.3125rem;
}

#retryBtn:hover {
    background-color: #37ac33;
}

#returnDiv {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    margin-bottom: 1.25rem;
}

#returnBtn {
    font-family: system-ui;
    border: solid #000000;
    text-transform: uppercase;
    margin-top: 4.375rem;
    margin-left: 0.625rem;
    width: 7.5rem;
    height: 3.4375rem;
    font-size: 1.5625rem;
    font-weight: 600;
    background-color: #3ebfd6;
    cursor: pointer;
    border-radius: 1.25rem;
    position: absolute;
    left: 0;
}

#returnBtn:hover {
    background-color: #3195a7;
}

#level-selection  {
    display: none;
}

#level-selection button {
    font-family: system-ui;
    border: solid #000000;
    text-transform: uppercase;
    display: block;
    margin: 0.625rem auto;
    padding: 0.625rem 1.25rem;
    font-size: 1.5625rem;
    font-weight: 600;
    color: black;
    border-radius: 0.625rem;
    color: rgb(0, 0, 0);
}

#levels-selection button:hover {
    cursor: pointer;
}

div#score2 {
    text-align: center;
    font-size: 3.125rem;
}

#level-1 {
    background-color: #58d838;
}

#level-1:hover {
    background-color: #4abd2d;
}

#level-2 {
    background-color: #e0eb4d;
}

#level-2:hover {
    background-color: #b4bd3e;
}

#level-3 {
    background-color: #ff0000;
}

#level-3:hover {
    background-color: #b90101;
}

div#level-selection button:hover {
    cursor: pointer;
}
  
.board {
    display: grid;
    grid-template-columns: repeat(7, 3.125rem);
    grid-gap: 1.75rem;
    grid-row-gap: 0.4375rem;
    justify-content: center;
    margin: 1.25rem auto;
}

.cell {
    width: 4.375rem;
    height: 4.375rem;
    background-color: #00bcd4;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0.125rem 0.3125rem rgba(0, 0, 0, 0.3);
    transition: all 0.15s ease;
}

.cell.highlightRed {
  background-color: red;
  opacity: 0.5;
  cursor: pointer;
  transform: scale(1.05);
}

.cell.highlightYellow {
  background-color: yellow;
  opacity: 0.4;
  cursor: pointer;
  transform: scale(1.05);
}

.cell.win {
  border: 0.1875rem solid #00ffcc;
  box-shadow: 0 0 15px #00ffcc, 0 0 30px #00ffcc;
  animation: pulseGlow 0.8s infinite alternate;
}

@keyframes pulseGlow {
  from { box-shadow: 0 0 10px #00ffcc; }
  to { box-shadow: 0 0 25px #00ffcc; }
}
  
.cell.red {
    background-color: red;
}
  
.cell.yellow {
    background-color: yellow;
}

button.hidden {
    display: none;
}

@media (max-width: 1500px) {
    html {
        font-size: 11px;
    }
    ul.list {
        margin-left: 8vw;
    }
}

@media (max-width: 800px) {
    html {
        font-size: 9px;
    }
    ul.list {
        margin-left: 4vw;
    }
}