@import url(https://db.onlinewebfonts.com/c/f9b9a4fce362a3a9111c138859ccb422?family=Agency+FB+V2);



@font-face {

  font-family: "Agency FB V2";

  src: url("https://db.onlinewebfonts.com/t/f9b9a4fce362a3a9111c138859ccb422.eot");

  src: url("https://db.onlinewebfonts.com/t/f9b9a4fce362a3a9111c138859ccb422.eot?#iefix")format("embedded-opentype"),

    url("https://db.onlinewebfonts.com/t/f9b9a4fce362a3a9111c138859ccb422.woff2")format("woff2"),

    url("https://db.onlinewebfonts.com/t/f9b9a4fce362a3a9111c138859ccb422.woff")format("woff"),

    url("https://db.onlinewebfonts.com/t/f9b9a4fce362a3a9111c138859ccb422.ttf")format("truetype"),

    url("https://db.onlinewebfonts.com/t/f9b9a4fce362a3a9111c138859ccb422.svg#Agency FB V2")format("svg");

}



* {

  margin: 0;

  padding: 0;

  list-style: none;

  text-decoration: none;

  font-family: "Agency FB V2";

  font-size: 19.2px;

}



body {

  background-color: snow;

}



html::-webkit-scrollbar{

  width: 0;

}



.header {

  height: auto;

  width: 100%;

  position: fixed;

  z-index: 1;

  background-color: lightblue;

  display: flex;

  justify-content: center;

}



.pic {

  max-width: 100%;

  margin: auto;

}



#sidebar {

  width: 16%;

  background-color: lightblue;

  margin-left: 84%;

  min-height: 88vh;

  margin-top: -11.5%;

  position: fixed;

}



.nav-bar {

  display: flex;

  flex-direction: column;

  align-items: center;

 margin: -7.5%;

}



.navbar-1:hover {

  color: rgb(20, 149, 255);

  font-weight: bold;

}



.navbar-1 {

  color: black;

  font-weight: 600;

  margin-top: 60%;

  text-align: center;

  width: 240%;

  padding: 22%;

  background-color: #3F628E;

  border-radius: 8%;

  margin-left: -86%;



}



.navbar-2:hover {

  color: rgb(20, 149, 255);

  font-weight: bold;

}



.navbar-2 {

  color: black;

  font-weight: 600;

  margin-top: 62%;

  text-align: center;

  width: 220%;

  padding: 24%;

  background-color: rgb(63, 98, 142);

  border-radius: 8%;

  margin-left: -74%;

}



.navbar-3:hover {

  color: rgb(20, 149, 255);

  font-weight: bold;

}



.navbar-3 {

  color: black;

  font-weight: 600;

  margin-top: 40%;

  text-align: center;

  width: 150%;

  padding: 15%;

  background-color: #3F628E;

  border-radius: 8%;

  margin-left: -36%;

}



.program_info {

  text-align: center;

  padding-top: 16%;

  font-size: 32px;

  margin-right: 26%;

  

}



.program-info{

  padding-left: 13%;

}



.Hall-of-Fame-info {

  padding-left: 20%;

  margin-top: 1%;

}



.Silicon-info{

 text-align: center;

 padding-top: 2%;

 padding-right: 22%

}



.hamburger {

  display: none;

}



@import url('https://fonts.googleapis.com/css2?family=Jost:wght@200;300;400&display=swap');



.design-section {

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: flex-start;

  min-height: 100vh;

  padding: 100px 0;

  padding-right: 26%;

}



.design {

  display: flex;

  align-items: center;

  justify-content: center;

}



.timeline {

  width: 90%;

  height: auto;

  max-width: 900px;

  margin: 0 auto;

  display: flex;

  flex-direction: column;

}



.timeline-content {

  padding: 20px;

  background: lightblue;

  /* -webkit-box-shadow: 5px 5px 10px #1a1a1a, -5px -5px 10px #242424;

            box-shadow: 5px 5px 10px #1a1a1a, -5px -5px 10px #242424; */

  border-radius: 5px;

  color: white;

   padding: 2rem;

  transition: 0.4s ease;

  overflow-wrap: break-word !important;

  margin: 1rem;

  margin-bottom: 20px;

  border-radius: 12px;

  color: black;

}



.timeline-component {

  margin: 0px 20px 20px 20px;

}





@media screen and (min-width: 320px) {

  .timeline {

    display: grid;

    grid-template-columns: 1fr 3px 1fr;

  }



  .timeline-middle {

    position: relative;

    background-image: linear-gradient(45deg, #3F628E, #3F628E, #3F628E);

    width: 3px;

    height: 100%;

  }



  .main-middle {

    opacity: 0;

  }



  .timeline-circle {

    position: absolute;

    top: 0;

    left: 50%;

    width: 15px;

    height: 15px;

    border-radius: 50%;

    background-image: linear-gradient(45deg, #3F628E, #3F628E, #3F628E);

    -webkit-transform: translateX(-50%);

    transform: translateX(-50%);

  }

}



.asm-pic {

  width: 60px;

  position: relative;

  left: 80%;

  top: -75%;

}



.fort-pic {

  width: 60px;

  position: relative;

  left: 85%;

  top: -78%;

}



.cobal-pic {

  width: 60px;

  position: relative;

  left: 80%;

  top: -70%;

}



.lisp-pic {

  width: 60px;

  position: relative;

  top: -69%;

  left: 80%;

}



.c-pic {

  width: 65px;

  position: relative;

  top: -65%;

  left: 80%;

}



.c-picutre {

  width: 60px;

  position: relative;

  left: 83%;

  top: -75%;

}



.python-pic {

  width: 60px;

  position: relative;

  left: 80%;

  top: -72%;

}



.java-pic {

  width: 60px;

  position: relative;

  left: 84%;

  top: -82%;

}



.js-pic {

  width: 60px;

  position: relative;

  left: 80%;

  top: -73%;

}



.ruby-pic {

  width: 60px;

  position: relative;

  left: 78%;

  top: -62%;

}



.swift-pic {

  width: 60px;

  position: relative;

  top: -70%;

  left: 80%;

}



.back-button {

  padding: 1%;

  display: flex;

  justify-content: center;

  position: relative;

  border-radius: 5%;

  max-width: 150px;

  color: white;

  background-color: #3F628E;

  font-weight: 600;

  margin-left: 33.5%;

  margin-top: -4%;

}



.mobile-menu{

  display: none;

}



@media (max-width: 625px) {





    .timeline-middle {

    position: relative;

    background-image: linear-gradient(45deg, #3F628E, #3F628E, #3F628E);

    width: 3px;

    height: 100%;

  }



  #sidebar {

    display: none;

  }



  .program_info {

    text-align: center;

    padding-top: 60%;

    font-size: 32px;

    margin-right: 26%;

    

  }

  

  .program-info{

    padding-left: 13%;

  }



  .Hall-of-Fame-info {

    padding-left: 15%;

    margin-top: 1%;

  }



  /* .timeline {

    width: 90%;

    height: auto;

    max-width: 900px;

    margin: 0 auto;

    display: flex;

    flex-direction: column;

    padding-left: 20%;

  } */



  .fort-pic {

    width: 60px;

    position: relative;

    left: 70%;

    top: -70%;

  }



  .c-pic {

    left: 70%;

  }

  

  .c-picutre {

    width: 60px;

    position: relative;

    left: 70%;

    top: -75%;

  }



  .cobal-pic {

    width: 60px;

    position: relative;

    left: 70%;

    top: -62%;

  }

  

  .lisp-pic {

    width: 60px;

    position: relative;

    top: -69%;

    left: 70%;

  }



  .python-pic {

    width: 60px;

    position: relative;

    left: 70%;

    top: -72%;

  }

  



  .back-button {

    padding: 1%;

    display: flex;

    justify-content: center;

    position: relative;

    border-radius: 5%;

    max-width: 100%;

    color: white;

    background-color: #3F628E;

    font-weight: 600;

    margin-left: 28%;

    margin-top: -4%;

    margin-bottom: 5%;

  }



  .block-1 {

    padding-block: 23%;

    border-radius: 10%;

    max-height: 50%;

    text-align: center;

    display: block;

    color: black;

    max-width: 50%;

    background-color: #3F628E;

    margin-left: 25%;

    margin-top: 25%;

    font-weight: 600;

  }



  .mobile-menu {

    display: none;

    position: fixed;

    top: 0;

    right: 0;

    background-color: lightblue;

    width: 100%;

    max-width: 100%;

    padding: 10px;

    z-index: 1;

}



.mobile-menu a {

    padding: 10px 20px;

    text-decoration: none;

    color: white;

    display: block;

    transition: 0.3s;

}



.mobile-menu a:hover {

    background-color: #555;

}



.hamburger {

    display: block;

    position: fixed;

    top: 125px;

    right: 10px;

    font-size: 30px;

    cursor: pointer;

    color: #3F628E;

    z-index: 2;

}



}



@media  (width: 1440px){



  .program_info {

    text-align: center;

    padding-top: 22%;

    font-size: 32px;

    margin-right: 26%;

}



  #sidebar {

    width: 16%;

    background-color: lightblue;

    margin-left: 84%;

    min-height: 88vh;

    margin-top: -16%;

    position: fixed;

  }





 

  .navbar-1 {

    color: black;

    font-weight: 600;

    margin-top: 60%;

    text-align: center;

    width: 220%;

    padding: 22%;

    background-color: #3F628E;

    border-radius: 8%;

    margin-left: -90%;

  

  }

  

  

  

  .navbar-2 {

    color: black;

    font-weight: 600;

    margin-top: 62%;

    text-align: center;

    width: 210%;

    padding: 20%;

    background-color: rgb(63, 98, 142);

    border-radius: 8%;

    margin-left: -80%;

  }

  

 

  

  .navbar-3 {

    color: black;

    font-weight: 600;

    margin-top: 40%;

    text-align: center;

    width: 140%;

    padding: 15%;

    background-color: #3F628E;

    border-radius: 8%;

    margin-left: -36%;

  }

 

  .back-button {

    padding: 1%;

    display: flex;

    justify-content: center;

    position: relative;

    border-radius: 5%;

    max-width: 100%;

    color: white;

    background-color: #3F628E;

    font-weight: 600;

    margin-left: 32%;

    margin-top: -4%;

    margin-bottom: 5%;

  }





}