style.css

/*MAIN CSS*/
*{font-family:"Courier New";}
body { background-color:#FFF;}
h1 {text-align: center; font-size: 3em; color: #4CAF50;}
.card{
  background-color:#FFF;
  box-shadow: 0 2px 2px rgba(0,0,0,0.03), 0 3px 6px rgba(0,0,0,0.10);
  border: 1px solid #ccc;
}
#sectioner{
  display: grid;
  grid-template-columns: 20px 25% auto 20px 35% 20px;
  grid-template-rows: 20px auto 20px;
}
#main-div{
  grid-column: 3 / 4;
  grid-row: 2 / 3;
}
#information-div{
  grid-column: 2 / 3;
  grid-row: 2 / 3;
  
}

#information{
  font-size:2em;
  text-align:center;
  color: 555;
}

#moreinfo-div{
  display: block;
  padding: 25px;
  padding-top: 5px;
  grid-column: 5 / 6;
  grid-row: 2 / 3;
  z-index: 100;
  font-size: 1.4em;
  font-family: Open Sans;
}

#moreinfo-div h2{
  color: #4CAF50;
}

#moreinfo-div.hidden{
  display: none;
}

#moreinfo-div li{
  list-style-type: circle;
}
#mobile_w{
  display: none;
}


/*RESTART BUTTONS SYLE*/
.mainBtns{
  padding:3%;
  padding-left: 3%;
  margin: auto;
  margin-top: 25px;
  width:75%;
  font-size: .7em;
  display: flex;
  align-items: center;
  align-content: center;
  border-radius: 5px;
  border: 1px solid #ccc;

}

#moreinfo-button{
  padding:1%;
  padding-left: 2%;
  width:77%;
}

.mainBtns > img{
  vertical-align: middle;
  margin-right: 15px;
}

.mainBtns:hover{
  background-color: #83c985;
}
.mainBtns:active{
  background-color: #4CAF50;
}


#extra-div{

  grid-column: 5 / 6;
  grid-row: 2 / 3;
  border: 1px solid #ccc;
  border-top:none;
}

*.unselectable {
   -moz-user-select: none;
   -khtml-user-select: none;
   -webkit-user-select: none;

   /*
     Introduced in IE 10.
     See http://ie.microsoft.com/testdrive/HTML5/msUserSelect/
   */
   -ms-user-select: none;
   user-select: none;
}

/*TABS*/
 /* Style the tab */
 .tab {
  overflow: hidden;
  border: 1px solid #ccc;
  background-color: #f1f1f1;
}

/* Style the buttons that are used to open the tab content */
.tab button {
  background-color: inherit;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.3s;
}

/* Change background color of buttons on hover */
.tab button:hover {
  background-color: #ddd;
}

/* Create an active/current tablink class */
.tab button.active {
  background-color: #ccc;
}

/* Style the tab content */
.tabcontent {
  display: none;
  padding: 6px 12px;
  border: 1px solid #ccc;
  border-top: none;
  height:98%;  
} 

#tabParent{
  height:90vh; 
  width: 100%;
}

#derivation{
  width: 100%;
}

select {

  /* styling */
  background-color: white;
  border: thin solid 4CAF50;
  border-radius: 4px;
  display: inline-block;
  font: inherit;
  line-height: 1.5em;
  padding: 0.1em 3.5em 0.1em 0.5em;

  /* reset */

  margin: 0;      
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-appearance: none;
  -moz-appearance: none;
}


/* arrows */

select.classic {
  background-image:
    linear-gradient(45deg, transparent 50%, #4CAF50 50%),
    linear-gradient(135deg, #4CAF50 50%, transparent 50%),
    linear-gradient(to right, #83c985, #83c985);
  background-position:
    calc(100% - 20px) calc(1em + 2px),
    calc(100% - 15px) calc(1em + 2px),
    100% 0;
  background-size:
    5px 5px,
    5px 5px,
    2.5em 2.5em;
  background-repeat: no-repeat;
}

select.classic:focus {
  background-image:
    linear-gradient(45deg, white 50%, transparent 50%),
    linear-gradient(135deg, transparent 50%, white 50%),
    linear-gradient(to right, #83c985, #83c985);
  background-position:
    calc(100% - 15px) 1em,
    calc(100% - 20px) 1em,
    100% 0;
  background-size:
    5px 5px,
    5px 5px,
    2.5em 2.5em;
  background-repeat: no-repeat;

  outline: 0;
}


/* button */
.btn {
  border: 2px solid black;
  background-color: white;
  color: black;
  padding: 5px 12px;
  font-size: 16px;
  cursor: pointer;
  border-radius: 0.2em;
}

/* Green */
.success {
  border-color: #4CAF50;
  color: green;
}

.success:hover {
  background-color: #83c985;
  color: white;
}


.success:active {
  background-color: #4CAF50;
  color: white;
}

@media (orientation: portrait) {
  #sectioner{
    display: grid;
    grid-template-columns: 15px auto 15px;
    grid-template-rows: 50% 50%;
  }

  #information{
    font-size: 1.5em;
  }

  .mainBtns{
    padding:3%;
    padding-left:12%;
    margin: auto;
    margin-top: 10px;
    width:80%;
    font-size: 1em;
    display: flex;
    align-items: center;
    align-content: center;
    border-radius: 5px;

  }

  #moreinfo-button{
    display: none;
  }

  .mainBtns > img{
    vertical-align:middle;
    margin-right: 15px;
    width: 50px;
  }
  #extra-div{
    display: none;
  }
  #mobile_w{
    display: block;
    font-size: 0.6em;
  }
  #main-div{
    grid-column: 2 / 3;
    grid-row: 2 / 3;
  }
  #information-div{
    grid-column: 2 / 3;
    grid-row: 1 / 2;
  }
  #tabParent{
    height:75vh; 
    width: 100%;
  }
}