/* 

TABLE OF CONTENTS

*/

/* BACKGROUND */
.black-background{background: black;}

.center-text{text-align: center;}

.nav-bar{
    padding-top: 0.2em;
    padding-bottom: 0.2em;
    background: white;
    margin-bottom: clamp(5px, 5vw, 30px);
}
.page-title{
    font-size: clamp(5px, 10vw, 40px);
    text-decoration: none;
    font-weight: bold;
    color: black;
}

.puzzle-board-container{
    position: absolute;
    width: 95vw;
    height: 95vw;
    max-width: 550px;
    max-height: 550px;
    left: 50%;
    translate: -50%;
}

.puzzle-sector-container {
    max-width: 95vw;
    max-height: 95vw;
    display: grid;
    grid-template-areas:
    "a   aa   b   bb   c"
    "c1  c2  c3   c4  c5"
    "d   dd   e   ee   f"
    "f1  f2  f3   f4  f5"
    "g   gg   h   hh   i";
}

.puzzle-number-container {
    display: grid;
    grid-template-areas:
    "a   b   c"
    "d   e   f"
    "g   h   i";
    
}
.number-box {
    width: clamp(1px, 10vw, 60px);
    height: clamp(1px, 10vw, 60px);
    padding: 0px;
}
.gapx{
    width: clamp(1px, 2.5vw, 5px);
}
.gapy{
    height: clamp(1px, 2.5vw, 5px);
}
.obscure{
    font-size: 5px;
    color: white;
}
.absolute{
    position: absolute;
    
}
.relative{
    position: relative;
}
.white{
    background: white;
}
.number-0{ background: url(../box_backgrounds/number_0.png); background-size: 100%; }
.number-1{ background: url(../box_backgrounds/number_1.png); background-size: 100%; }
.number-2{ background: url(../box_backgrounds/number_2.png); background-size: 100%; }
.number-3{ background: url(../box_backgrounds/number_3.png); background-size: 100%; }
.number-4{ background: url(../box_backgrounds/number_4.png); background-size: 100%; }
.number-5{ background: url(../box_backgrounds/number_5.png); background-size: 100%; }
.number-6{ background: url(../box_backgrounds/number_6.png); background-size: 100%; }
.number-7{ background: url(../box_backgrounds/number_7.png); background-size: 100%; }
.number-8{ background: url(../box_backgrounds/number_8.png); background-size: 100%; }
.number-9{ background: url(../box_backgrounds/number_9.png); background-size: 100%; }

.sector-highlight-type-multi{ background: url(../box_backgrounds/background_sector_multi2.png); background-size: 100%; }
.row-highlight-type-multi{ background: url(../box_backgrounds/background_row_multi2.png); background-size: 100%; }
.column-highlight-type-multi{ background: url(../box_backgrounds/background_column_multi2.png); background-size: 100%; }

.button{
    border: none;
    background: transparent;
    background: url(../box_backgrounds/number_0.png); 
    background-size: 100%; ;
}

#highlight-button-area{
    margin: clamp(1px, 2vw, 10px);
    margin-top: clamp(1px, 10vw, 40px);
    display: flex;
    gap: clamp(1px, 7vw, 40px);;
    justify-content: center;

}
.highlight-button{
    width: clamp(1px, 12vw, 70px);
    height: clamp(1px, 12vw, 70px);
    padding: 0px;
}
#highlight-multi{
    background: url(../box_backgrounds/highlight_multi2.png); background-size: 100%;
}