* {
    padding: 0;
    margin: 0;

    box-sizing: border-box;
}
body {
    height: 100vh;
    width: 100vw;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    gap: 1rem;

    overflow: hidden;
}
.square {
    height: 4rem;
    width: 4rem;

    border-color: black;
    border-width: 0;
}

.x {
    background: url('./assets/x.svg') no-repeat center;
    transform: rotate3d('180');
    transition: all 0.5s;
}
.o {
    background: url('./assets/o.svg') no-repeat center;
    transform: rotate3d('180');
    transition: all 0.5s;
}

.line {
    display: flex;
}

#first-line > .square:first-child {
    border-width: 0 2px 2px 0;
}
#first-line > .square:last-child {
    border-width: 0 0 2px 2px;
}

#second-line > .square:nth-child(2) {
    border-width: 2px
}

#third-line > .square:first-child {
    border-width: 2px 2px 0 0;
}
#third-line > .square:last-child {
    border-width: 2px 0 0 2px;
}

.win-message {
    background-color: green;
    color: white;

    padding: 2rem;
    border-radius: 25px;

    position: absolute;
    transition: all 1s;
    transform: translate(0%);
}
.inactive {
    transform: translateY(100vh);

    transition: all 1s ;
}

.new-game {
    background-color: green;
    color: white;

    padding: 0.5rem;
    border-radius: 1rem;
}