html {
  scroll-behavior: smooth;
}
body {
  margin: 0;
  font-family: system-ui, sans-serif;
  background-image: linear-gradient(115deg, rgba(23, 71, 140, 0.95) 0%, rgba(38, 101, 191, 0.77) 51%, rgba(42, 195, 156, 0.6) 100%);

  /* this breaks position sticky in Firefox */
  /* overflow-x: hidden; */
}

.sidenav {
  height: 100%;
  width: 0; 
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: black;
  overflow-x: hidden; 
  transition: 0.5s;
  padding-top: 60px; 
}

.sidenav a {
  padding: 8px 8px 8px 32px;
  text-decoration: none;
  font-size: 25px;
  color: white;
  display: block;
  transition: 0.3s;
}

.sidenav a:hover {
  border: 2px solid;
 text-shadow: 1px 1px RGB(96, 177, 228);
}

.sidenav .closebtn {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 36px;
  margin-left: 50px;
}

#main {
  transition: margin-left .5s;
}

.icon {
  font-size:40px;
font-weight:bold;
cursor:pointer;
background-color: rgba(166, 166, 166, 0.6);
border-style: solid;
padding-right: 10px;
padding-left: 10px;
padding-bottom: 4.5px;
  position: fixed;
  top: 2px;
  left: 10px;
}

#MATLAB {
  background-position: center;
  background-image: url("MATLAB_Background.png");
  background-size: contain;
  color: black;
  padding: 28px;
  text-align: center;
  font-size: 35px;
  text-shadow: 2px 2px RGB(96, 177, 228);
}

#MATLAB1 {
  padding: 50px;
  color: #fff;
  text-shadow: 1px 1px #2ac39c;
  border-bottom: 2px solid black;
}

#MATLAB2 {
  padding: 50px;
  color: #fff;
  text-shadow: 1px 1px #2ac39c;
  border-bottom: 2px solid black;
}

#MATLAB3 {
  padding: 50px;
  color: #fff;
  text-shadow: 1px 1px #2ac39c;
  border-bottom: 2px solid black;
}

#MATLAB4 {
  padding: 50px;
  color: #fff;
  text-shadow: 1px 1px #2ac39c;
  border-bottom: 2px solid black;
}

#Go_Back {
  padding: 20px;
}

.example_b {
width: 500px;
color: #fff !important;
text-decoration: none;
text-shadow: 1px 1px #2ac39c;
font-size : 20px;
background-image: linear-gradient(to right, #00d2ff 0%, #3a7bd5 51%, #00d2ff 100%);
padding: 20px;
border-radius: 50px;
display: inline-block;
border: 1px solid #888888;
transition: all 0.4s ease 0s;
}

.example_b:hover {
text-shadow: 0px 0px 6px rgba(255, 255, 255, 1);
-webkit-box-shadow: 0px 5px 40px -10px rgba(0,0,0,0.57);
-moz-box-shadow: 0px 5px 40px -10px rgba(0,0,0,0.57);
transition: all 0.4s ease 0s;
}

p, ul {
    padding: 0;
    margin: 0;
}

.button_cont1{
  float: left;
  width: 50%;
}

.row:after {
  content: "";
  display: table;
  clear: both;
}

@media all and (max-width: 1919px) and (min-width: 1000px) {
.button_cont1{
  width: 100%; 
  padding-bottom: 20px;
}
#MATLAB1 {
   padding: 50px 50px 30px 50px;
}
#MATLAB2 {
   padding: 50px 50px 30px 50px;
}
#MATLAB3 {
   padding: 50px 50px 30px 50px;
}
#MATLAB4 {
   padding: 50px 50px 30px 50px;
}
}

@media all and (max-width: 1000px) and (min-width: 600px) {
  .sidenav a {font-size: 15px; padding: 8px 8px 8px 32px;}
#MATLAB {
  padding: 10px;
}
#MATLAB1 {
   padding: 50px 50px 30px 50px;
}
#MATLAB2 {
   padding: 50px 50px 30px 50px;
}
#MATLAB3 {
   padding: 50px 50px 30px 50px;
}
#MATLAB4 {
   padding: 50px 50px 30px 50px;
}
 .button_cont1{
  width: 100%; 
  padding-bottom: 20px;
}  
.example_b {
     width: 450px;
     font-size : 18px;
     padding: 2px;}
}

@media all and (max-width: 600px) and (min-width: 450px) {
  .sidenav a {font-size: 15px; padding: 8px 8px 8px 32px;} 
.icon {
  font-size:35px;
border: solid 3px;
padding-right: 9px;
padding-left: 9px;
padding-bottom: 4px;
left: 9px;
}
#MATLAB {
  font-size: 25px;
  padding: 9px;
}
#MATLAB1 {
   padding: 50px 50px 30px 50px;
}
#MATLAB2 {
   padding: 50px 50px 30px 50px;
}
#MATLAB3 {
   padding: 50px 50px 30px 50px;
}
#MATLAB4 {
   padding: 50px 50px 30px 50px;
}
 .button_cont1{
  width: 100%; 
  padding-bottom: 20px;
}  
.example_b {
     width: 300px;
     font-size : 12px;
     padding: 2px;}
}

@media all and (max-width: 450px) and (min-width: 350px) {
body {
 font-size: 15px;
}
  .sidenav a {font-size: 13px; padding: 6px 6px 6px 24px;} 
.icon {
  font-size:30px;
border: solid 3px;
padding-right: 7px;
padding-left: 7px;
padding-bottom: 3px;
left: 8px;
}
#MATLAB {
  font-size: 20px;
   padding: 4px;
}
#MATLAB1 {
   padding: 50px 50px 30px 50px;
}
#MATLAB2 {
   padding: 50px 50px 30px 50px;
}
#MATLAB3 {
   padding: 50px 50px 30px 50px;
}
#MATLAB4 {
   padding: 50px 50px 30px 50px;
}
.button_cont1{
  width: 100%; 
  padding-bottom: 20px;
} 
.example_b {
     width: 225px;
     font-size : 8.5px;
     padding: 5px;}
}

@media all and (max-width: 350px) and (min-width: 250px) {
body {
 font-size: 9px;
}
  .sidenav a {font-size: 9px; padding: 4px 4px 4px 16px;} 
  .example_b {
     width: 100px;
     font-size : 20px;
     padding: 2px;}
.icon {
  font-size:25px;
border: solid 2.5px;
padding-right: 7px;
padding-left: 7px;
padding-bottom: 3.5px;
left: 5px;
}
#MATLAB {
  font-size: 13px;
  padding: 10px;
}
#MATLAB1 {
   padding: 50px 50px 30px 50px;
}
#MATLAB2 {
   padding: 50px 50px 30px 50px;
}
#MATLAB3 {
   padding: 50px 50px 30px 50px;
}
#MATLAB4 {
   padding: 50px 50px 30px 50px;
}
.button_cont1{
  width: 100%; 
  padding-bottom: 20px;
}  
.example_b {
     width: 120px;
     font-size : 9px;
     padding: 3px;}
}

@media all and (max-width: 250px) and (min-width: 10px) {
body {
 font-size: 7.5px;
}
  .sidenav a {font-size: 8px; padding: 2px 2px 2px 8px;} 
  .example_b {
     width: 80px;
     font-size : 15px;
     padding: 2px;}
.icon {
  font-size:20px;
border: solid 2px;
padding-right: 6px;
padding-left: 6px;
padding-top: 1px;
padding-bottom: 3px;
left: 5px;
}
#MATLAB {
  font-size: 11px;
  padding: 0.5px;
}
#MATLAB1 {
   padding: 50px 50px 30px 50px;
}
#MATLAB2 {
   padding: 50px 50px 30px 50px;
}
#MATLAB3 {
   padding: 50px 50px 30px 50px;
}
#MATLAB4 {
   padding: 50px 50px 30px 50px;
} 
.button_cont1{
  width: 100%; 
  padding-bottom: 20px;
} 
.example_b {
     width: 100px;
     font-size : 7.5px;
     padding: 3px;}
}