/*
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%;
  
    background-color: rgb(0, 0, 0);
    color: white;
    font-size: 16px;
    font-family: Arial, serif, Times;
}



/*Container for the whole website */
.container {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0%;
    
    /*To compensate for the size of the nav. */
    padding: 0px;
    margin: 0px;
    z-index: 50;
}

/*Text for the background images, adds a border*/
#text {
    color: white;
    text-shadow: -1px -1px 0 #000,
    -1px 1px 0 #000,
    1px 1px 0 #000,
    1px -1px 0 #000;
    z-index: 2000;
    display: block;
    width: auto;
    padding: 3%;    /*Sets the padding for the text so it doesn't go against boder*/
  
}


/*Div1 has text and picture*/
#div1 {
    color: white;
    width: 100%;
    height: 50%;
    position: static;
    padding: 0px;
    margin: 0px;
    z-index: 100;
    font-size: 1rem;
    text-align: center;
    display: flex;
    align-items: center;
    
}

/*The container for the text on the left side*/
#div11{
    z-index: 200;
    display: flex;
    padding: 0;
    margin: 0; 
    justify-content: center;
    width: 60%;

}


/*The container for the image on the right side*/
#div1i {
    
    display: flex;
    width: 40%;
    min-width: 250px;
    height: 100%;
    z-index: 200;
    background-position: right;
    background-repeat: no-repeat;
    background-size: auto 100%;
   
   
}

/*Div two has just a background image and text on the left side*/
#div2 {
    display: flex;
    font-size: 1rem;
    color: white;
    width: 100%;
    height: 50%;
    position: static;
    background-position: center;
    background-size: auto 115%;
    z-index: 100;
    text-align: center;
    align-items: center;
    padding: 0;
    margin: 0;
    
}

/*Div for the text on the left side*/
#div22{
    z-index: 400;
    width: 60%;
    min-width: 300px;
    padding: 0;
    margin: 0;
    justify-content: center;
    display: flex;
}

/*Rotate images that don't display correctly*/
.rotateimg90 {
    -webkit-transform:rotate(90deg);
    -moz-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    transform: rotate(90deg);
}
/*----------------------------------------------------------------------------------------------*/

/* Container for the bubbles*/
div.partcont {
    width: 100%;
    /*Number of containers/2+5%*/
    height: 405%;
    display: block;
    position: static;
    left: 0%;

    /*To compensate for the size of the nav*/
    top: 0px;
    margin: 0px;
    z-index: -100;
    padding: 0;
}

#canvas {
    width: 100%;
    height: 100%;
    
    background-position: right;
    background-repeat: no-repeat;
    background-size: auto 100%;
    z-index: -99;
    
}

/*----------------------------------------------------------------------------------------------*/
/*Colors for the main page*/
#ran {
    color: rgb(190, 65, 43);
}
#ran2 {
    color: rgb(42, 153, 42);
}
#ran3 {
    color: rgb(194, 143, 14);
}
#ran4 {
    color: rgb(52, 166, 241);
}
#ran5 {
    color: rgb(1, 145, 121);
}
#ran6 {
    color: rgb(216, 29, 29);
}
#ran7 {
    color: rgb(92, 109, 106)
}
#ran8 {
    color: rgb(128, 73, 231)
}
/*----------------------------------------------------------------------------------------------*/

/*----------------------------------------------------------------------------------------------*/

/*When screen size is bigger than 500 px change nav and top of webpage */

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

       
    #div11 {
        min-width: 400px;
    }

    #div22 {
        min-width: 400px;
    }
}
/*When screen is smaller change the size of elements so that they are ontop of one another. */

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

    html, body {
	font-size: 14px;
	margin: 0;
	
    }
    
    /*How the navigation bar looks on a small screen when not expanded*/
   
       
    /*Reset the content for mainPage when on a small screen */
    div.partcont{
        /*Number of Containers +single pics/2 + 5%*/
	    height: 605%;
    }
      
    #text {
        font-size: 1rem;
        padding: 3%;
    }
    
    #div1{
   	    height: 100%;
	    margin: 0;
        display: block;
        width: 100%;
    }
    
    #div11 {
	    width: 100%;
	    height: 50%;
	    display: flex;
	    justify-content: center;
        align-items: center;
   
    }
    
    #div1i {
	width: 100%;
	height: 50%;
	top: 50%;
	left: 0%;
	display: flex;
	background-position: right;
	background-repeat: no-repeat;
	background-size: 100% auto;
    }

    #div2 {
	height: 50%;
	display: block;
	 
    }	
    
    #div22 {
	width: 100%;
    height: 100%;
   	text-align: center;
	display: flex;
	align-items: center;
    justify-content: center;
   
    }
    
    
}



/*----------------------------------------------------------------------------------------------*/

/*----------------------------------------------------------------------------------------------*/


/*css for settings button and settings elements*/


/*Settings button on navigation bar*/
/*Same as hide show button on fractal page*/
.settingsButton {
    background-color: brown;
    height: 38px;
    width: auto;
    border: none;
    display: block;
    float: right;
    
}
.settingsButton 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;
}
.settingsButton button:hover {
    background-color: grey;
}

/*Settings container for all the settings buttons
*/
#settings {
    display: none;
    position: fixed;
    background-color: rgba(82, 42, 42, 0.61);
    color:white;
    width: 600px;
    
    max-width: 95%;
    max-height: 90%;
    right: 0;
    
    top: 38px;
    
    z-index: 100000;
    padding: 3%;
    padding-top: 0;
    margin: 0;
    
    
}  
#settings h3 {
    padding: 1%;
    margin: 0;
}
#defaultButton{
    background-color: black;
    border-color: white;
    border-width: 1px;
    color: white;
    position: inline;
    font-size: 1rem;
    margin: 0;
    padding: 1%;
}

#sliderTable {
    width: 100%;
    margin: 0;
    padding: 0;
}
#sliderTable td{
    padding: 7px;
}
#sliderTable td:nth-child(2){
    width: 80%;
}
#sliderTable td:nth-child(3){
    min-width: 80px;
}


.settingsSlider {
    width: 100%;
    padding-top: 15px;
    padding-bottom: 15px;
    
}

.slider {
    -webkit-appearance: none;
    width: 100%;
    min-width: 200px;
    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: rgb(87, 85, 85);
    cursor: pointer;
}

.slider::-moz-range-thumb {
    width: 25px;
    height: 100%;
    background: #4CAF50;
    cursor: pointer;
}