:root {
    --pipes-main: #9fc5c5;
    --white: #fefefe;
}
body {
    display:flex;
    flex-direction: column;
    align-items: center;
    min-width:22.5rem;
    min-height:100vh;
    margin:0;
    background-color: var(--white);
    font-family: 'Courier New', Courier, monospace;
}
body * {
    box-sizing: border-box;
    background-color: transparent;
    border:none;
    padding:0;
}
.main-header {
    display: flex;
    align-items: center;
    justify-content: center;

    width:100%;
    height:9rem;
    border-bottom:0.125rem var(--pipes-main) solid;
    background: var(--pipes-main);
}
.main_logo {
    display: flex;
    align-items: center;
    margin:2rem;
    color:var(--white);
    font-size: 2rem;
    font-weight: 700;
    text-decoration: none;
}
.logo {
    width:2rem;
    height:2rem;
    margin:0 1rem;
}
.logo svg {
    fill: var(--white);
}
.main-nav ul {
    display: flex;
    align-items: center;
    margin: 2rem;
    list-style-type: none;
    
}
.main-nav li {
    flex-grow: 0;
}
.main-nav li a {
    display: flex;
    align-items: center;
    flex-grow: 0;
    color:var(--white);
    text-decoration: none;
}
.main-nav a svg {
    width:1rem;
    height:1rem;
}

.content {
    flex-grow: 1;
    min-width:22.5rem;
    display:flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 2rem 0;
}

.title-grid .cell {
    width:2.25rem;
    height:2.25rem;
    transition: transform 0.5s ease-in-out;
}
.puzzle-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width:100%;
    margin:1rem;
}
.puzzle {
    position:relative;
    margin:1rem 0 3rem;
}

.mask {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position:absolute;
    top:0;
    left:0;
    z-index:2;
    width:100%;
    height:100%;
    padding:2rem;
    border-radius: 1rem;
    background-color: var(--pipes-main);
    color:var(--white);
    transition: 0.5s ease-in-out;
}
.mask.open {
    display: flex;
}
.mask h2 {
    font-size: 1rem;
    margin:0 0 1rem 0;
}
.mask p {
    margin:0.5rem 0 0 0;
    font-weight: 500;
    font-size: 1rem;
}
.mask button {
    width:100%;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    line-height: 1rem;
    padding:0.5rem;
    margin:0.5rem;
    color:var(--pipes-main);
    border:0.25rem var(--pipes-main) solid;
    border-radius: 0.75rem;
    font-weight:700;
    font-size: 1rem;

}
.mask button svg {
    fill:var(--white);
    width:1rem;
    height:1rem;
    margin:0 0.25rem 0 0;
}
.mask button:hover {
    color:var(--white);
    background-color: var(--pipes-main);
}
.rules_mask {
    background-color: var(--pipes-main);
}
.win_mask {
    background-color: #5c8e64;
}
.new_mask {
    color:var(--pipes-main);
    background-color: var(--white);
}

.cell_grid {
    display: grid;
    gap:0.25rem;
    transition: 0.5s ease-in-out;
    width:100%;
}
.cell {
    display:flex;
    width:3.75rem;
    height:3.75rem;
    padding:0;
    margin:0;
    border:none;
    background-color: transparent;
    transition: transform 0.2s linear;
}
.cell:disabled {
    visibility:hidden;
}
.puzzle .cell:hover svg {
    filter: brightness(71%);
}
.cell path {
    fill: var(--pipes-main);
}
.cell.filled path {
    fill: #539898;
}
.cell.loop path {
    fill: #a05050;
}
.cell.locked:disabled path {
    visibility:visible;
    fill: #5c8e64;
}
.cell svg, .cell path {
    z-index: -1;
}
.clock_wrapper {
    display: grid;
    grid-template-columns: auto auto;
    justify-content: center;
    column-gap: 0.5rem;
    width:20.5rem;
    margin:1rem;
}
.clock_wrapper .pause_button {
    display:flex;
    border:0.25rem solid var(--pipes-main);
    border-radius: 0 1rem 1rem 0;
    padding:0.75rem;
    align-items: center;
}
.clock_wrapper .pause_button:disabled {
    filter:saturate(0);
}
.clock_wrapper .pause_button svg {
    width:2.25rem;
    height:2.25rem;
    fill:var(--pipes-main);
}
.clock_wrapper .pause_button:enabled:hover {
    background-color: var(--pipes-main);
}
.clock_wrapper .pause_button:enabled:hover svg{
    fill: var(--white);
}
.clock_wrapper .pause_button span {
    display: none;
    width:0;
}
.clock {
    display: grid;
    grid-template-columns: repeat(8, auto);
    border:0.25rem solid var(--pipes-main);
    border-radius: 1rem 0 0 1rem;
    padding:0.5rem;
}
.clock .cell {
    width:1rem;
    height:1rem;
}


.controls {
    display: flex;
    justify-content: space-between;
    width:100%;
    max-width: 20.5rem;
}
.puzzle_control {
    display: flex;
    flex-direction: column;
    align-items: center;
    width:4.5rem;

    border:0.25rem solid var(--pipes-main);
    padding:0.75rem;
    border-radius: 1rem;

    background-color: transparent;
    color:var(--pipes-main);
    font-size: 1rem;
    font-weight: 700;
}
.puzzle_control svg {
    width:2rem;
    height:2rem;

    margin-bottom:0.5rem;
    fill:var(--pipes-main);
}
.puzzle_control:enabled:hover {
    background-color: var(--pipes-main);
    color:var(--white);
}
.puzzle_control:enabled:hover svg {
    fill:var(--white);
}
.puzzle_control.open {
    background-color: var(--pipes-main);
    color:var(--white);
}
.puzzle_control.open svg {
    fill:var(--white);
}
.puzzle_control:disabled {
    filter:saturate(0);
}


footer {
    background-color: var(--pipes-main);
    width:100%;
    height:9rem;
    padding:3rem;
    margin: 2rem 0 0 0;
}