* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    font-family: Lato, sans-serif;
    font-size: 5vmin;
    --color-bgd: #202030;
    --color-orange: #D0bb94;
    --color-orange: #ff4500;
}

body {
    background-color: var(--color-bgd);
}

.container {
    user-select: none;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: stretch;
    min-width: 100vmin;
    max-width: 125vmin;
    height: 100vmin;
    margin: auto;
    background-color: var(--color-bgd);
    color: var(--color-orange);
}

.header {
    border: .1rem solid var(--color-orange);
    border-radius: 0.25em;
    padding: 0.2em 0.25em;
    display: flex;
    justify-content: space-between;
    align-items:stretch;
}

.header-title {
    font-size: 1rem;
    width: 50%;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
}

.winner { line-height: 0.9; }

.player-mark {
    font-size: 1.75rem;
    width: 1.4em;
    font-family: 'Roboto Mono', monospace;
    border: .1rem solid var(--color-orange);
    border-radius: 0.25em;
    text-align: center;
    transition: 0.35s;
}

.mark-highlight {
    color: var(--color-bgd);
    background-color: var(--color-orange);
}

.mark-animation { border-radius: .4em; animation: mark-rotation 2s ease-in-out infinite; }
@keyframes mark-rotation {
    0%   { transform: rotate(  0deg); }
    50%  { transform: rotate(180deg); }
    100% { transform: rotate(  0deg); }
}

.mark-tie {
    background-color: var(--color-bgd);
    color: var(--color-orange);
}

.material-icons { 
    font-size: 1.25rem;
    cursor: pointer;
}

.material-icons:hover { 
    text-shadow:
        0 0 0.15em var(--color-orange);
}

.md-dark { color: #ff450044; }

.player-type {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: 0.25s;
}

.comp-icon {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.comp-lvl {
    z-index: -1;
    position: absolute;
    bottom: .6em;
    font-size: .6em;
}

.btn-restart {
    width: 70%;
    text-align: center;
    font-size: .7rem;
    border: .15em solid var(--color-orange);
    border-radius: 0.35em;
    padding: 0 0.5em;
    cursor: pointer;
    transition: .25s;
}

.btn-restart:hover {
    color: var(--color-bgd);
    background-color: var(--color-orange);
    box-shadow:
        0 0 1em var(--color-orange);
    }

.grid-container {
    flex: .95;
    border: .1rem solid var(--color-orange);
    border-radius: 0.25rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
}

.main-grid {
    display: grid;
    grid-template-rows: repeat(3, 1fr);
    grid-template-columns: repeat(3, 1fr);
    justify-content: center;
    height: 100%;
    width: 100%;
}

.grid-item {
    font-size: 4rem;
    border: 0.02rem solid var(--color-orange);
    border-radius: 0.15rem;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: font-size 0.5s;
  }

  .hint {
    font-size: 3rem;
    color: var(--color-bgd);
    text-shadow: -1px -1px 5px #ff450055, 1px 1px 5px #000030;
  }

  .winner-cell {
    text-shadow: -1px -1px 5px #ff450055, 1px 1px 5px #000030;
    background: #ff4500bb;
    color:  #ff4500;
  }

  @media screen and (max-width: 500px) {
    .container {
        height: 120vmin;
    }
  }