@charset "utf-8";

.border-left {
    border-right: 1px solid #555;
}
.border-right {
    border-right: 1px solid #555;
}
.border-top {
    border-right: 1px solid #555;
}
.border-bottom {
    border-right: 1px solid #555;
}

#pentagon {
    position: relative;
    width: 54px;
    box-sizing: content-box;
    border-width: 50px 18px 0;
    border-style: solid;
    border-color: rgba(200, 200, 200, 0.9) transparent;
}
#pentagon:before {
    content: "";
    position: absolute;
    height: 0;
    width: 0;
    top: -85px;
    left: -18px;
    border-width: 0 45px 35px;
    border-style: solid;
    border-color: transparent transparent rgba(200, 200, 200, 0.9);
}

#space-invader {
    box-shadow: 0 0 0 1em rgba(0, 0, 0, 0.9),
    0 1em 0 1em rgba(0, 0, 0, 0.9),
    -2.5em 1.5em 0 .5em rgba(0, 0, 0, 0.9),
    2.5em 1.5em 0 .5em rgba(0, 0, 0, 0.9),
    -3em -3em 0 0 rgba(0, 0, 0, 0.9),
    3em -3em 0 0 rgba(0, 0, 0, 0.9),
    -2em -2em 0 0 rgba(0, 0, 0, 0.9),
    2em -2em 0 0 rgba(0, 0, 0, 0.9),
    -3em -1em 0 0 rgba(0, 0, 0, 0.9),
    -2em -1em 0 0 rgba(0, 0, 0, 0.9),
    2em -1em 0 0 rgba(0, 0, 0, 0.9),
    3em -1em 0 0 rgba(0, 0, 0, 0.9),
    -4em 0 0 0 rgba(0, 0, 0, 0.9),
    -3em 0 0 0 rgba(0, 0, 0, 0.9),
    3em 0 0 0 rgba(0, 0, 0, 0.9),
    4em 0 0 0 rgba(0, 0, 0, 0.9),
    -5em 1em 0 0 rgba(0, 0, 0, 0.9),
    -4em 1em 0 0 rgba(0, 0, 0, 0.9),
    4em 1em 0 0 rgba(0, 0, 0, 0.9),
    5em 1em 0 0 rgba(0, 0, 0, 0.9),
    -5em 2em 0 0 rgba(0, 0, 0, 0.9),
    5em 2em 0 0 rgba(0, 0, 0, 0.9),
    -5em 3em 0 0 rgba(0, 0, 0, 0.9),
    -3em 3em 0 0 rgba(0, 0, 0, 0.9),
    3em 3em 0 0 rgba(0, 0, 0, 0.9),
    5em 3em 0 0 rgba(0, 0, 0, 0.9),
    -2em 4em 0 0 rgba(0, 0, 0, 0.9),
    -1em 4em 0 0 rgba(0, 0, 0, 0.9),
    1em 4em 0 0 rgba(0, 0, 0, 0.9),
    2em 4em 0 0 rgba(0, 0, 0, 0.9);
    background: rgba(0, 0, 0, 0.9);
    width: 1em;
    height: 1em;
    overflow: hidden;
    /*margin: 50px 0 70px 65px;*/
}

/*region Arrow Up */
.arrow {
    border: solid black;
    border-width: 0 3px 3px 0;
    display: block;
    padding: 3px;
}

.right {
    transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
}

.left {
    transform: rotate(135deg);
    -webkit-transform: rotate(135deg);
}

.up {
    transform: rotate(-135deg);
    -webkit-transform: rotate(-135deg);
}

.down {
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
}






#myBtn {
    display: none; /* Hidden by default */
    position: fixed; /* Fixed/sticky position */
    bottom: 10px; /* Place the button at the bottom of the page */
    right: 10px; /* Place the button 30px from the right */
    z-index: 2; /* Make sure it does not overlap */
    border: none; /* Remove borders */
    outline: none; /* Remove outline */
    background-color: white; /* Set a background color */
    color: #111; /* Text color */
    cursor: pointer; /* Add a mouse pointer on hover */
    padding: 1em; /* Some padding */
    border-radius: 5px; /* Rounded corners */
    /*font-size: 18px; !* Increase font size *!*/
    /*width: 20px;*/
    /*height: 20px;*/

    &:hover {
        background-color: rgba(0, 247, 0, 1); /* Add a dark-grey background on hover */
        transition: 0.5s;
        /*border: 1px solid #111;*/
    }
}

















#overlay {
    position: fixed; /* Sit on top of the page content */
    display: none; /* Hidden by default */
    width: 100%; /* Full width (cover the whole page) */
    height: 100%; /* Full height (cover the whole page) */
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0,0,0,0.9); /* Black background with opacity */
    /*background-image: url("../images/backgrounds/bg_overlay.jpg");*/
    background-repeat: no-repeat;
    background-size: cover;
    background-position: right;

    color: white;
    z-index: 3; /* Specify a stack order in case you're using a different order for other elements */
    cursor: pointer; /* Add a pointer on hover */

    /*border: 1px solid green;*/

    /*display: flex;*/
    align-items: center;

    #text {
        /*border: 1px solid deeppink;*/
        position: fixed;
        /*margin-top: 50%;*/
        width: 100%;
        /*height: 100%;*/
        padding-left: 5%;

        p {
            /*font-family: 'Permanent Marker', cursive;*/
            font-family: 'Courgette', cursive;
            font-size: 2rem;
            line-height: 3rem;

            span {
                /*position: absolute;*/
                /*right: 0;*/
                /*border: 1px solid yellow;*/
                display: none;
            }
        }
    }
}

.closer {
    position: absolute;
    right: 32px;
    top: 32px;
    width: 32px;
    height: 32px;
    opacity: 0.3;
    z-index: 10;

    :hover {
        opacity: 1;
    }
    :before, :after {
        position: absolute;
        left: 15px;
        content: ' ';
        height: 33px;
        width: 2px;
        background-color: white;
    }
    :before {
        transform: rotate(45deg);
    }
    :after {
        transform: rotate(-45deg);
    }
}

/*endregion*/