.navbar {
  display: flex;
  align-items: center;
  background-color: #212529 !important;
  height: 70px;
  
}

.navbar-brand {
  display: flex; /*showing logo and "disk sceduling" in column in header part*/
  align-items: center;
  font-weight: 700 !important;
  color: aliceblue;
  font-size: 19px;
  text-decoration: none;
}

.navbar-brand:hover{
  color: #81C3F1 !important;
  background-color: black;
  border: 1px solid rgba(0, 0, 0, 0.125);
  border-radius: 0.5rem;
 
}

.sticky-top {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 1020;
}



#logo {
  width: 60px;
  height: 60px;
  margin: 8px;
}

/* visualization*/
.block1 {
  display:flex; /*try remove it*/
  flex-direction: column;
  justify-content: center;
  width: 100%;
  background: #acaeae04;
  height: 680px;

}

 @-webkit-keyframes slideInUp {
  from {
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
    visibility: visible;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
} 

.txt{
  font-size: 100%;
  color: black;
  font-weight: bold;

}
.type-writer{
  left: 300px; font-size:30px;font-weight: 700; 
}
.include-k{
  left: 500px; font-size:30px;font-weight: 700;
}
.overlay {
  position: absolute;
  top: 80px;
  left: 0;
  right: 0;
  bottom: 0;
  content: '';
  opacity: .1;
  width: 50%;
  height: 90%;
  background: #3150b7;
}

.typing {
  font-size: 100%;
  color: black;
  font-weight: bold;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  height: 38px;
  animation-name: slideInLeft;
  
}

.arrow-box{
  display: flex;
  text-align: center;
  width: 40px;
  height: 100px;
}

.arrow-box img{
  width: 100%;
  height: 40%;
  margin-left: 730px;
  animation: up-to-down 1s ease infinite;
  animation-name: slideInUp;
  animation-direction: reverse;
}
/* .type-writer,.txt {
  border-right: 0.2rem solid black;
} */

.heading h1 {
  font-size: 3.5rem;
  font-weight:700;
}

hr{
  font-size: 200px;
  margin: 0px 0px;
  border-top: 2px solid;
} 
/*about*/
.about-k{
  text-align: center;
  font-size: 1.2rem;
}
.about-k:hover {
  cursor: pointer;
}


.infocard{
  background-color: #212529 !important;
  color: white;
  border: 1px solid rgba(5, 52, 81, 0.998);
  border-radius: 0.5rem;
  height: fit-content;
  width: 80vw;
  margin: 50px 130px;
  transition: all 0.5s ease;
  padding: 1rem 1rem;
}

.infocard:hover {
  transform: scale(1.02);
}

/* Algorithms */
/* 
.cards {
display: flex;
flex-direction: row;
justify-content: space-around;
align-items: flex-end;
flex-wrap: wrap;
margin-top: 30px;
background-color: #212529;
color:white;
width: 14rem;
height: 14rem; 
margin-left: 40px;
margin-right: 40px;
}


.algo-cards {
display:flex;
flex-direction: column;
justify-content: center;
align-items: center;
}

.algo-card-footer {
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 10px;
}

.algo-heading {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 15%;
font-weight: 600;
font-size: x-large;
border-bottom: 3px solid yellow;
text-align: center;
}


.cardsDSPR {
position: relative;
display: flex;
flex-direction: row;
width: 90%;
height: fit-content;
justify-content: space-around;
align-items: flex-end;
flex-wrap: wrap;
border: 5px solid;
background-color: #212529 !important;
}
.card-text{
display: flex;
  align-items: center;
  justify-content: flex-start;
  font-size: 1.1em;
  font-weight: bold;
  color: black;
  text-align: left;
} */

.card{
height: 200px;
background-color: #212529;
color:white;
border-radius: 0.5rem;
transition: all 0.5s ease;
width: 590px;  
}
.card :hover{
transform: scale(1.02);
}
.card-title{
border-bottom: 3px solid yellow;
color: white;
padding: 6px;
left: 200px;
font-weight: bold;
height: 20px;
font-size: 17px;
display: flex;
text-decoration: none;
justify-content: space-around;
}
.card-text{
padding: 1px;
margin: 5px 10px;
text-decoration: none;
size: 20px;
font-size: 1.0rem;
}
.algos{
display: flex;
}

/* fcfs */
.card-k{
height: 350px;
background-color: #212529;
color:white;
border-radius: 0.5rem;
margin: 20px;
transition: all 0.5s ease;
width: 350px; 

}
.card-k :hover{
transform: scale(1.02);

}
.card-title-k{
color: white;
padding: 6px;
left: 200px;
font-weight: bold;
height: 20px;
font-size: 2.0rem;
text-decoration: none;
justify-content: space-around;
border-bottom: 2px solid yellow;
display: flex;
}
.card-text-k{
padding-right: 20px;
padding: 2px;
size: 20px;
font-size: 1.0rem;
}
.card-body{
overflow-y: scroll;
height: 265px;
padding: 7%;
width: 300px;
margin: 0 auto;
/* white-space: nowrap; */
font-size: large;
}



@media only screen and (max-height: 1061px){
.card-k {
    transform: scale(0.8);
}
.card-k:hover {
    transform: scale(1.01);
} 
.card {
  transform: scale(0.8);
}
.card:hover {
  transform: scale(1.01);
} 
}


.About-part{
display: flex;
justify-content: space-around;
height: 600px;
}

/* navbar fix */

#navbar {
overflow: hidden;
background-color: #333;
}

/* Navbar links */
#navbar a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px;
text-decoration: none;
}

/* Page content */
.content {
padding: 16px;
}

/* The sticky class is added to the navbar with JS when it reaches its scroll position */
.sticky {
position: fixed;
top: 0;
width: 100%;
}

/* Add some top padding to the page content to prevent sudden quick movement (as the navigation bar gets a new position at the top of the page (position:fixed and top:0) */
.sticky + .content {
padding-top: 60px;
}

/* implementation */

form{
align-items: center;
justify-content: center;
flex-direction: column;
width: 100%;
margin: 10px;
}
.last_button{
width: 8vw;
}



#controls {
position: relative;
display: flex;
flex-direction: column;
justify-content: center;
width: fit-content;
height: 70vh;
margin-left: 45px;
/* left:150px;   
top: 30px;*/
color: black;
font-size: 1.15em;
font-weight:bold;
}


.mb-3 {
margin-bottom: 2rem ;
font-weight: bold;

}
.buttons{
height: 100px;
border-radius: 2rem;
align-items: center;
}

#run, #reset-button {
width: initial;

}

/* 
.form-label {
color: black;
} */


.btn-dark{
color: #fff;
background-color: #1a1e21;
border-color: #191c1f;
height: 30px;
}

.running-algo {
position: relative;
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: center;
justify-content: space-around;
width: 90vw;
height: fit-content;
margin-top: 20px;
}

/* Preparing chart  */


.chart-wrapper {
position: relative;
display: flex;
justify-content: center;
align-items: center;
left: 400px;
top: -500px;
margin: 10px;
min-height: 50px;
width: 50vw;
height: fit-content;
}

.chart-display {
/* position: relative; */
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
margin: 15px;
width: 100%;
height: 100%;
transition: all 0.5s ease;
}

#chart-image {
width: 100%;
height: 70vh;
min-height: 400px;
display: flex;
justify-content: center;
align-items: center;
background-color: #777777;
color: #333;
font-size:2.5em;
font-weight:800;
text-align: center;
transition: all 0.3s ease-in;
border-radius: 5%;
}


/* #chart-image:hover {
transform: scale(1.05);
box-shadow:
0 2.8px 2.2px rgba(0, 0, 0, 0.034),
0 6.7px 5.3px rgba(0, 0, 0, 0.048),
0 12.5px 10px rgba(0, 0, 0, 0.06),
0 22.3px 17.9px rgba(0, 0, 0, 0.072),
0 41.8px 33.4px rgba(0, 0, 0, 0.086),
0 100px 80px rgba(0, 0, 0, 0.12);
} */

#chart-container {
width: 100%;
height: 100%;
}