style.scss

// basic flex for div disposition
@mixin flexNom {
    width: 300px;
    display: flex;
    flex-direction: column;
}

// function for flag div display (vertical or horizontal)
@mixin divLayout($isRow :true, $number:3) {
    div {
        border: 3px solid black;

        @if($isRow) {
            height: 200px;
            width: 30%;
        }

        @else {
            @if($number==3) {
                height: 66px;
            }

            @else {
                height: 100px;
            }
        }

    }
}

@mixin popUpBox() {
    border: 5px inset grey;
    background: white;
    margin: 5%;
    padding: 5%;
    box-shadow: 5px 5px 5px black;
}

h2 {
    font-size: 150%;
    color: black;
    text-shadow: 1px 1px 2px #F3CB83;
}

h1 {
    align-self: center;
}

// vertical line flag
#row3 {
    @include flexNom();
    @extend h1;

    div {

        display: flex;
        flex-direction: row;
        @include divLayout($isRow:true);
    }
}

// horizontal line flag
#column3 {
    @include flexNom();
    @extend h1;

    div {
        display: flex;
        flex-direction: column;
        @include divLayout($isRow:false, $number:3);
    }
}

// dual line flag
#row2 {
    @include flexNom();
    @extend h1;

    div {
        display: flex;
        flex-direction: column;
        @include divLayout($isRow:false, $number:2);
    }
}

// special css for czech flag (triangle mostly plus double div for border
#row2triangle {
    @include flexNom();
    @extend h1;

    div {
        display: flex;
        flex-direction: column;
        position: relative;
        border: 2px double grey;

        :first-child,
        :nth-child(2) {
            height: 100px;
            z-index: 0;
            border: 2px double grey;
        }

        #triangle {
            position: absolute;
            height: 192px;
            top: 6px;
            width: 97px;
            clip-path: polygon(0 0, 100% 50%, 0 100%);
            z-index: 2;
        }

        :last-child {
            position: absolute;
            height: 204px;
            width: 104px;
            clip-path: polygon(0 0, 100% 50%, 0 100%);
            z-index: 1;
            background-color: grey;
        }
    }
}

// class color only for the game 
.blue {
    background-color: rgb(48, 48, 194);
}

.red {
    background-color: red;
}

.white {
    background-color: white;
}

.yellow {
    background-color: yellow;
}

.black {
    background-color: black;
}

.green {
    background-color: green;
}

// html no border around the background
html,
body {
    width: 100%;
    height: 100%;
    margin: 0;
    background: rgb(26, 69, 85);
    background: linear-gradient(216deg, rgba(26, 69, 85, 1) 0%, rgba(75, 140, 146, 1) 31%);
}

// main page disposition for optimal smartphone display, work for computer but not as beautifull
body {
    display: flex;
    align-items: center;
    justify-content: space-around;
    flex-direction: column;

    // scoreboard box display
    #scoreBoard {
        margin-top: 5%;
        display: flex;
        flex-direction: row;
        justify-content: space-around;
        align-items: center;
        width: 90%;
        height: 10%;
        border-radius: 25px;
        background-color: #4b8c92;
        border: 3px double #F3CB83;
    }

    #flags {
        margin: 0;
        height: 60%;
        padding: 0;
    }

    #validation {
        height: 100px;
    }
}

// all button param for uniformity
button {
    border-radius: 10px;
    height: 50px;
    width: 150px;
    align-self: center;
    font-size: large;
}

// css to simulate popUp Box for introduction and game rules
#introduction {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 290px;
    height: 450px;
    margin: 0;
    @include popUpBox();

    p {
        padding: 0 10%;
    }
}

// same as previous for score
#points {
    align-self: center;
    justify-self: center;
    @include popUpBox();
    @include flexNom()
}

// when popup is active color the back in darkgrey
.popup {
    background-color: darkgray;
}

// time div for the actual flag guess
#time {
    margin: 0 35%;
    padding: 5px;
    border-radius: 5px;
    background-color: #4b8c92;
    border: 3px double #F3CB83;
}

// firework image size
#image {
    align-self: center;
    height: 192px;
    width: 192px;
    background:
        url('firework.png') 0px 0px;
}