/*removal of arrows that appear on the right side of textbox type="number*/
/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
/* Firefox */
input[type=number] {
  -moz-appearance: textfield;
}

canvas { /*canvas styling where animation is done on*/
    border: 1px solid black;
    background: rgb(2, 4, 7);
}

body {
margin: 0; /*overrides preset browser property so there is no margin for the container*/
    overflow: hidden; /*prevents use of scrollbar*/
    -webkit-user-select: none; /* prevents highlighting of text on different browsers */
    -ms-user-select: none; 
    user-select: none;
}

a {
    display: inline;
}

.paramBtn {
    position: absolute; /*absolute positioning to allow objects inside canvas container*/
    background: #051427;
    border-color: #a44322;
    border-radius: 5px;
    right: 10px;
    width: 90px;
    height: 80px;
    border-width: 3px;
    background-position: center; /* formatting the image */
    background-repeat: no-repeat;
 
}

#clearBtn {
    background-image: url("Icons/clearSimulationPlanet.png"); /* linking an image file in folder to the button*/
    background-size: 65px; /* editing size of image */
    top: 600px;
}
#timeBtn {
    background-image: url("Icons/timeDilation.png");
    background-size: 54px;
    top: 500px;
}
#physicsBtn {
    background-image: url("Icons/physics.png");
    background-size: 59px;
    top: 400px;
}
#objectBotBtn {
    background-image: url("Icons/ObjectBottom.png"); 
    background-size: 70px;
    top: 300px;
    border-bottom-width: 1px; 
    border-top-left-radius: 1px;
    border-top-right-radius: 1px;
}
#objectTopBtn {
    background-image: url("Icons/ObjectTop.png");  
    background-size: 63px;
    top: 220px;
    border-bottom-width: 1px;
    border-bottom-left-radius: 1px;
    border-bottom-right-radius: 1px;
}

/*parameter child popups*/
.paramChildBtn{
    position: absolute;
    display: none;
    background-color: #051427;
    border: 2px solid #530f1e;
    border-radius: 5px;
    right: 110px;
    top: 200px;
    height: 200px;
    width: 210px;
}


#objectTopChild {
    height: 110px;
    top: 179px;
}

#objectBotChild {
    height: 170px;
    top: 300px;
}
#physicsChild {
    height: 150px;
    top: 400px;
}
#timeChild {
    height: 175px;
    top: 500px;
}

.updateBtn {
    border-radius: 4px;
    border-width: 1px;
    background-color:#f8bc04;
}

/*Line divider */
#objTypeLine {
    background: rgb(54, 136, 184, 0.6);
    border-radius: 100px;
    position: absolute;
    height: 5px;
    width: 450px;
    right: 45px;
    top: 80px;
}

.objType{
    position: absolute;
    background: #051427;
    border-radius: 15px;
    border-width: 2px;
    border-color: #926759;
    opacity: 0.7;
    width: 60px;
    height: 50px;
    top: 18px;
    background-position: center; /* formatting the image */
    background-repeat: no-repeat;
}

.objType:active,
 .active { /*when the button stays clicked*/
    top: 16px;
    border-width: 3px;
    opacity: 1;
    border-style: outset;/* removing defualt button style */
    
}
#planetBtn {
    background-image: url("Icons/placePlanet.png");
    background-size: 66px;
    right: 400px;
}
#solarBtn {
    background-image: url("Icons/placeStar.png");
    background-size: 64px;
    right: 300px;
}
#asteroidBtn {
    background-image: url("Icons/placeAsteroids.png");
    background-size: 65px;
    right: 200px;
}
#blackHoleBtn {
    background-image: url("Icons/placeBlackHole.png");
    right: 100px;
}




#scenarioPresets { /*styling for the scenario preset buttons and positioning*/ 
    position: absolute;
    background: rgba(36, 113, 230);
    border-radius: 10px;
    border-width: 2px;
    border-color: white;
    opacity: 0.45;
    left: 10px;
    bottom: 40px;
    width: 55px;
    height: 55px;
    background-position: center; /* formatting the image */
    background-repeat: no-repeat;
    background-image: url("Icons/scenarioOrbit.png");
    background-size: 50px;
}

.scenarioBtn {
    position: absolute;
    display: none;
    background-color: rgba(127, 150, 179, 0.6);
    border-color: rgba(255, 255, 255, 0.6);
    border-radius: 5px;
    border-width: 1px;
    opacity: 0.8;
    left: 12px;
    bottom: 100px;
    width: 50px;
    height: 50px;
    background-position: center; /* formatting the image */
    background-repeat: no-repeat;
}

#solarSysBtn {
    background-image: url("Icons/SolarSystem.png");
    background-size: 54px;
    bottom: 105px;
}
#binarySysBtn {
    background-image: url("Icons/binarySystem.png");
    background-size: 50px;
    bottom: 163px;
}
#unstableSysBtn {
    background-image: url("Icons/unstableSystem.png");
    background-size: 56px;
    bottom: 221px;
}
#lagrSysBtn {
    background-image: url("Icons/lagrangeSystem.png");
    background-size: 150px;
    bottom: 279px;
}
#eightSysBtn {
    background-image: url("Icons/figureEight.png");
    background-size: 57px;
    bottom: 337px;
}






/*switch styles and animations */
.switch {
    position: relative;
    margin-left: 7px;
    display: inline-block;/*like inlineblock but width and height can be set */
    width: 35px;
    height: 20px;
}  
.switch input {/*resetting default styles*/
    opacity: 0;
    width: 0;
    height: 0;
  }
.slider {
    position: absolute;
    cursor: pointer; /*changes appearance of cursor upon hover*/
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgb(179, 179, 182);
    transition: .15s;/*transition effect for the slider toggle*/
    /*transition lasts 0.15 seconds*/
}
.slider:before {/*:before inserts before the content of the slider element*/ /*pseudoelement*/
    position: absolute;
    content: "";
    height: 12px;
    width: 12px;
    left: 4px;
    bottom: 4px;
    background-color: rgb(255, 255, 255);
    transition: .15s;
}
input:checked + .slider {
    background-color: rgb(49, 49, 184);
}
input:checked + .slider:before {
    transform: translateX(15px);
}
.slider.round {
    border-radius: 15px;
}
.slider.round:before {
    border-radius: 45%;
}


/*info Event handling divs*/


.infoBox {
    position: absolute;
    display: none;
    bottom: -95px;
    left: 100px;
    height: 130px;
    width: 310px;
    background-color: rgb(21, 29, 53);

    border: 2px  #dadada81; /* creation of glow effect via shadows */
    border-radius: 5px;
    outline: none;
    border-color: #9ecaed;
    box-shadow: 0 0 100px #9ecaed;

    transition-timing-function: ease-out;
    transition: bottom 0.75s;
}
.infoBox:hover { /*pseudo class for interacting div with mouse*/
    bottom: 5px;
    box-shadow: 0 0 20px #9ecaed;
}
.infoBoxQuit { /*exit button styling for infoBox */
    font-family:'Catamaran', sans-serif;
    float: right;
    margin: 5px;
    border: none;
    background-color: rgba(255, 255, 255, 0.1)
}
#lagrSysBox{
    height: 195px;
    width: 455px;
}

#eightSysBox{
    height: 169px;
    width: 390px;
}

/*disabling popup button*/
.infoToggle {
    font-family:'Catamaran', sans-serif; /*importing fonts externally*/
    color: rgb(0, 0, 0);
    position: absolute;
    width: 64px;
    height: 45px;
    top: 20px;
    left: 20px;
    background-color: rgb(175, 221, 175) ;
    border-color: rgb(125, 224, 112);
    border-width: 3px;
    border-radius: 4px;
    opacity: 0.9;

}

.infoToggle:active, .info {
    background-color: rgb(255, 203, 203);
    border-color: rgb(233, 68, 68);
    opacity: 0.3;
}


/* HEX CODES:
#000000 black
#051427 dark blue
#530f1e burgundy
#a44322 deep orange
#f8bc04 yellow */

span {
    font-family: 'Alegreya', serif;
    font-size: 15px;
    color:antiquewhite;
}
h1 {
    font-family: 'Alegreya', serif;
    font-size: 15px;
    color: #e6e2e79f;
    margin-left: 10px;
}

h2{
    font-family:'Catamaran', sans-serif;
    font-size: 15px;
    margin: 0px;
    color: rgb(196, 196, 196);
}
p {
    font-family: 'Alegreya', serif;
    font-size: 14px;
    color: white;
    display: block;
}

a { 
    font-family: 'Alegreya', serif;
    font-size: 14px;
    color: rgb(202, 177, 177);
    margin-left: 10px; 
    display: inline;
}

.boxPara {
    margin-left: 10px;
    margin-bottom: 0px;
    margin-top: 5px;
    margin-right: 10px;
}

.hoverMe {
    display: inline;
    font-family: 'Open Sans', sans-serif;
    margin: 8px;
    color: rgb(231, 33, 33);
}