/*
Copyright (c) Daniel Sunderman
All Rights Reserved
Unauthorised copying of this file and all related files from my website, via any medium is strictly prohibited.
Proprietary and confidential
Written by Daniel Sunderman 2019
*/

html, body {
    margin: 0px;
    padding: 0px;
    width:100%;
    height: 100%;
    min-height: 485px;
  
    background-color: black;
    color: white;
    font-size: 16px;
    font-family: Arial, serif, Times;
}





/*A container for the forground layer of text and images to be display in */


.ForegroundLayer{
    width: 75%;
    height: 100%;
    
    position: absolute;
    left: 0%;
    top: 0%;
    margin: 0;
    z-index: 100;
    visibility: visible;
}

text {
    display: block;         /*padding works with width, which works with display*/
    width: auto;
    padding-left: 5%;
    margin: 0;
}

/*A Console to display information about buttons pressed and about fracta*/
.myConsoleLog{
    position: absolute;
    text-align: right;
    top:0%;
    left: 80%;
    width: 20%;
    
    height: 60%;
    z-index: 100;
    float: left;
    display: block;
    padding: 0;
    margin: 0;
    padding-top: 45px;
    overflow: hidden;
    visibility: visible;
}

.myConsoleLog p{
    font-size: 1rem;
    z-index: 200;
    display: block;
    padding: 0;
    margin: 0;
    
}

/*A container for the background fractal to be display in*/


.BackgroundLayer{
    width: 100%;
    height: 100%;
    position: static;
    left: 0;
    top: 0;
    padding: 0;
    margin: 0;
    z-index: -999;
    display: block;
}


/*The style for the canvas*/

#canvas {


    width:  100%;
    height: 100%;

    display: block;
    position: static;    
    
    z-index: -100;
    background-color: black;
    background-position: right;
    background-attachment: static;
    background-repeat: no-repeat;
    background-size: auto 100%;
    
}


/*Style for the buttons to control fractal*/

.mainButtons {
    border-radius: 8px;
    background-color: white;
    color: black;
    border: 1px solid black;
    
    outline: none;
}
.mainButtons:hover {
    background-color: grey;
    color: white;
}




/*A Hide or Show button to hide or display text and buttons in front of fractal*/
.hideButton {
    background-color: brown;
    height: 38px;
    width: auto;
    border: none;
    display: block;
    float: right;
    
}
.hideButton button{
    background-color: brown;
    color: white;
    border-radius: 8px;
    border: 1px solid black;
    outline: none;
    height: 100%;
    width: auto;
    display: block;
    padding-left: 6px;
    padding-right: 6px;
}
.hideButton button:hover {
    background-color: grey;
}

.infoText {
    display: inline;
    padding: 5px;
    
}

#AboutSection {
    display: none;
    position: absolute;
    width: 90%;
    height: 80%;
    top: 5%;
    left: 5%;
    color: black;
    background-color: rgb(240,130,60);
    z-index: 1000;
    border: 3px solid black;
    overflow:auto;
}

#AboutSection text{
    padding: 1%;
}

#CloseElementButton{
    width: 100%;
    height: 20px;
    position: sticky;
    top: 0;
    right: 0;
    z-index: 99999999;
    margin: 0;
    padding: 0;
}

#closeAboutButton {
    padding: 3px;
    margin: 0px;
    display: block;
    border-left: 1px solid black;
    border-bottom: 1px solid black;
    border-top: 0px;
    border-right: 0px;
    
    background-color:red;
    position: fixed;
    right: 0;
    top: 0;
    position: absolute;
}


/*Sliders to adjust the rbg values*/
.sliderCont {
    width: 90%;
    max-width: 500px;

}

.slider {
    -webkit-appearance: none;
    width: 75%;
    min-width: 250px;
    min-height: 10px;
    height: 15px;
    background: #d3d3d3;
    outline: none;
    opacity: 0.7;
    -webkit-transition: .2s;
    transition: opacity .2s;
  }
  
  .slider:hover {
    opacity: 1;
  }
  
  .slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 25px;
    height: 25px;
    background: orange;
    cursor: pointer;
  }
  
  .slider::-moz-range-thumb {
    width: 25px;
    height: 100%;
    background: #4CAF50;
    cursor: pointer;
  }




/*Overides mainStyle properties for mobile screens*/

@media screen and (max-width:500px) {

    html, body {
        font-size: 14px;
        margin: 0;
    }

    .ForegroundLayer{
        width: 100%;

    }

    .myConsoleLog{
        width: 100%;
        top: 90%;
        height: 15%;
        left: 0%;
        text-align: left;
        padding-top: 0;
        margin-top: 0;
    }

    .myConsoleLog p {
        padding-top: 0;
        margin-top: 0;
        font-size: 0.8rem;
    }

    .hideButton button {
        padding-left: 3px;
        padding-right: 3px;
    }

}