.dropdown{
  position:relative; 
  display: block;
}

.dropdown-content{
  display:none;
  position:absolute; 
  background-color:#f9f9f9;
  min-width:150px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  padding: 12px 16px;
  z-index: 1;
}

.dropdown:hover .dropdown-content {
  display: block;
}

body{
  text-align:left; 
  width:72%; 
  margin:auto; 
  font-size:20px;
  font-family:Rubik;
}   
  
h1{
  border-left:25px solid rgb(250,50,50);
  border-bottom:25px solid rgba(1,10,100,0.5); 
  border-right:25px solid rgb(250,50,50); 
  border-top:35px solid rgba(1,10,100,0.5);
  text-align:center; 
  background-color:rgba(1,10,100,0.9); 
  color: white; 
  font-variant:small-caps; 
  background-image:linear-gradient(rgba(1,10,100,0.1),rgba(1,10,100,0.3));
  font-family: Bungee;
}
  
 h2{
    background-color:rgba(1,10,100,0.9); 
    color:white; 
    border: 10px solid cyan; 
    border-radius: 15px; 
    font-variant:small-caps;
}
  
 h3{
    background-color:rgba(1,10,100,0.9); 
    color:white; 
    width:100%;
    margin:auto; 
    background-image:linear-gradient(rgb(250,50,50), rgb(150,100,50));
    font-variant:small-caps; 
    text-align:center; 
    font-size:35px; 
    margin-top:75px;
}
  

  
  ol li{
    text-align: center; 
    font-family:Ubuntu;
}
  
  ul li, ol li{
    list-style-position:inside; 
    text-align:left;
    margin-top:20px;
    margin-bottom:20px;
}
  
#divone{
  background-color: white; 
  text-align: center;
}
  
#divone>p{
  display:inline; 
  padding: 15px;
}
  
  .col{column-count:3;
  column-gap: 10px;
  column-rule-style: solid;
  column-rule-width: 15px;
  column-rule-color: purple;
  column-width: 40%;}
  
  #buttonn{
    background-color:rgb(250,50,50); 
    color:white; 
    font-size:35px; 
    border:5px solid rgb(250,50,50); 
    border-radius:15px; 
    width:100%; 
    background-image:linear-gradient(rgb(250,50,50),rgb(150,100,50)); 
    text-align:center;
}
  
  button{
    background-color:rgba(1,10,100,0.9);
    color:white; font-size:35px; 
    border:5px solid rgb(250,50,50); 
    border-radius:15px; 
    width:100%; 
    background-image:linear-gradient(rgb(250,50,50),rgb(150,100,50)); 
    display:block;
}
  
  .new-from-old{
    background-color:rgba(1,10,100,0.7); 
    border-left:5px solid rgb(250,50,50);
    border-right:5px solid rgb(250,50,50);
    color:white;
    font-size: 20px; 
    overflow:auto; 
    font-family:Rubik;
}
  
  .discriminant{
    background-color:black; 
    color:white; 
    border-top:4px solid rgb(250,50,50);
    border-right:5px solid rgb(250,50,50);
    border-bottom:6px solid rgb(250,50,50);
    font-size:20px; 
    overflow:auto; 
    font-family:Rubik;
    width:72%;
    margin:auto;
    padding:10px;
}
  
  .discriminant>b, .discriminant>mark{
    background-color:black; 
    color:yellow;
}
  
  .discriminant>a{
    text-decoration:none; 
    color:yellow;
}
  
  mark{
    background-color:purple; 
    color:white; 
    font-variant:small-caps; 
    font-weight:bold;
}
  
  mark>i{
    font-style:italic; 
    background-color:blue; 
    color:white;
}
  
  mark>a{
    color:yellow; 
    font-variant:small-caps; 
    text-decoration:none;
}
  
  @keyframes change{
    0%{background-color:red; color:white;}
    20%{background-color:tomato; color:black;}
    40%{background-color:powderblue; color:black;}
    50%{background-color:purple; color:white;}
    60%{background-color:green; color:white;}
    80%{background-color:white; color:red;}
    100%{background-color:blue; color:yellow;}
  }
    
    mark{
     animation-name:change;
      animation-duration:15s;
      animation-iteration-count:infinite;
    }
  
  hr{
    width:70%; 
    border:5px dashed rgb(250,50,50);
}
  
  .different-font{
    font-family:Ubuntu; 
    color:black;
}
  
  .skip{
    text-align:center; 
    font-size:30px; 
    font-variant:small-caps;
}
  
  .jump{
    display:grid; 
    grid-template-columns:repeat(6,1fr); 
    grid-gap:10px;
}
 

  .jump>div{
    background-color:rgba(1,10,100,0.9); 
    color:white; 
    font-size:24px; 
    font-variant:small-caps; 
    text-align:center; 
    font-family:Rubik;
}
  
  .jump>div a{
    color:white;
}
  
  .jump>div:hover{
    background-color:black; 
    color:red;
}

@media screen and (max-width: 900px){
  .jump{grid-template-columns:auto;}
}
 
 .dual-degree{
  grid-column:5/7;
  grid-row:2/4;
  padding-top:35%;
  }

@media screen and (max-width:900px){
    .dual-degree{grid-column:1/2; grid-row:12/13; padding-top:5%;} 
  }
  
  .counter-example{
  grid-column:2/5;
  }

@media screen and (max-width:900px){
  .counter-example{grid-column:1/2;} 
  }
  
  label,input{
    display:block;
}
  
   .outsider{
     margin-top:25px; 
     margin-bottom:125px; 
     font-family:Ubuntu;
}
  
  .outside{
    margin-top:100px; 
    font-family:Ubuntu;
}
  
  table{
  border-collapse:collapse;
  width:50%;
  margin:auto;
  }
  
  th,td{
  text-align:center;
  padding:5px;
  }
  
  th{
  background-color:green;
  color:white;
  }
  
  tr:nth-child(even){
  background-color:lightgrey;
  }
  tr:nth-child(odd){
  background-color:grey;
  }

.disadvantage{
 color:red; 
}
  

/* width */
::-webkit-scrollbar {
  width: 25px;
}

/* Track */
::-webkit-scrollbar-track {
  box-shadow: inset 0 0 10px green; 
  border-radius: 10px;
}
 
/* Handle */
::-webkit-scrollbar-thumb {
  background: blue; 
  border-radius: 10px;
  height:100px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #b30000; 
}