@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');

*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-size: 16px;
} 

body{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: #f4f4f4;
}

header{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 48px;
    background-color: #1f1f1f;
    border: 1px solid #1f1f1f;
}

.content__wrapper{
    display: flex;
    flex-direction: column;
    background-color:#f4f4f4;
    padding: 32px;
    height: auto;
    width: 100%;
}

.content__section__wrapper{
    display: flex;
    padding: 24px;
    gap: 8px;
    flex-direction: column;
    justify-content: center;
    
}

.content__section__title{
    font-size: 1.5rem;
    line-height: 1.5rem;

}
.content__section__text{
    font-size: .875rem;
}

nav{
    display: flex;  
    height: 48px;
    width: 100%;
    justify-content: center;
    align-items: center;    
    background-color:#1f1f1f;
}
.container_a{
    
    display: flex;
    height: 100%;
    width: 100%;
    background-color: #f4f4f4;
    text-decoration: none;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

nav ul li{
    display: flex;
    height: auto;
    width:100%;
    align-items: center;
    border: 1px solid #1f1f1f;
    border-top: 2px solid #1f1f1f;
    list-style: none;
}

nav ul li:nth-child(1) {
    border-left: 2px solid #1f1f1f;  
    }

nav ul li:nth-child(3) {
    border-right: 2px solid #1f1f1f;  
    }

nav ul li a{
    display: flex;
    height: auto;
    width: 100%;
}

nav ul li:hover{
    background-color: #1a99d4; 
    transition: .5s;
    cursor: pointer;
}

.navLink{
    display: flex;
    word-wrap:break-word;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    font-size: 1rem;
    text-decoration: none;
    font-weight: 500;
    color: #080808;
    transition: .5s;
    
}

.navLink:hover{
    transition: .5s;
    
}

.content__section{
    display: flex;
    border: 1px solid #1f1f1f;
    width: 100%;
    height: auto;
}

.content__section__wrapper{
    max-width: 50%;
    border: 1px solid #1f1f1f;
    border-top: 0;
}

.content__section__image{
    max-width: 100%;
    height: 100%;     
}

.content__section__image__wrapper{
    width: 50%;
    max-height: 100%;
    border: 1px solid #1f1f1f;    
    border-top: 0; 
}


h1{
    color:#f1f1f1;
    font-size: 1.5rem;  
    font-family: "Montserrat";
     
      
}
h2{
    font-size:1rem ;
    font-family: "Poppins";
}
.primtrans{
  
    display: flex;
    justify-content: center;
}
.imagemtransistor{
    width: 50%;
    height: 100%;
}
span{
    font-size: 1rem;
    font-weight: 400;
}
p{
    font-size: 1rem;
    font-family:"Roboto" ;
}

.content__history__section {
    display: flex;
    background-color: antiquewhite;
    border: 1px solid #1f1f1f;
    border-top: 0;
    justify-content: center;
    align-items: center;
    padding: 32px;
}

.content__bellLabs__title {
    padding: 16px 32px;
    font-size: 2rem;
    border: 1px solid #1f1f1f;
    border-bottom: 0;
}

.content__bellLabs__title__transistores {
    padding: 48px 32px 16px 32px;
    font-size: 2rem;
    border: 1px solid #1f1f1f;
    border-bottom: 0;
}


.content__history__subtitle {
    font-size: 16px;
    width: 50%;
}

.content__history__subtitle__lp {
    font-size: 16px;
    width: 50%;
    padding: 32px;
}

.content__history__text {   
    width: 50%;
}

.content__history__text__lp {   
    width: 50%;
    padding: 16px;
}

.content__section__transistor {
    display: flex;
    flex-direction: column;
    border: 1px solid #1f1f1f;
    width: 100%;
    height: auto;
}

.content__bellLabs__inventors {
    display: flex;
    justify-content: space-between;
}


.content__bellLabs__inventor {
    display: flex;
    font-weight: 600;
    font-size: 1.125rem;
    flex-direction: column;
    height: 100%;
    justify-content: center;
    align-items: center;
}

.content__bellLabs__inventor__image{
max-width: 100%;
max-height: 100%;
}

.content__bellLabs__inventor__wrapper{
    display: flex;
    flex-direction: column;
    padding: 32px 0 0 0;
    width: 33.333%;
    height: auto;
    justify-content: center;
    align-items: center;
}

.content__bellLabs__inventor__wrapper:nth-child(1){
    border-left: 1px solid #1f1f1f;
}

.content__bellLabs__inventor__wrapper:nth-child(3){
    border-right: 1px solid #1f1f1f;
}

.content__bellLabs__versus {
    display: flex;
    width: 33.333%;
    height: auto;
    justify-content: center;
    padding: 16px;
    border: 1px solid #1f1f1f;

}

.content__howItWorks {
    display: flex;
    justify-content: space-around;
    align-items: center;
    background-color: #1f1f1f;
    color: #f4f4f4;
    
    padding: 36px;

}

.content__howItWorks__yellow {
    display: flex;
    justify-content: space-around;
    align-items: center;
    background-color:antiquewhite;
    color: #1f1f1f;
    
    padding: 36px;

}

.content__howItWorks__white {
    display: flex;
    justify-content: space-around;
    align-items: center;
    background-color: #f1f1f1;
    color: #1f1f1f;
    
    padding: 36px;

}

.content_repercution__wrapper > div{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: antiquewhite;
  width: 50%;
}

.content_repercution__wrapper > img{
  width: 50%;
}

.content_repercution__wrapper {
background-color: antiquewhite;
}

.content__howItWorks__title {
    font-size: 2rem;  
    max-width: 100%;  
}

.content_repercution__subtitle__computer{
  font-size: 1rem;
}

.content__howItWorks__title__black{
    font-size: 2rem;
}

.content__howItWorks__text {
    max-width: 50%
}

.content__what__happened__section {
    display: flex;
    border-top: 1px solid #1f1f1f;
}

.content__what__happened__title {
    display: flex;
    font-size: 2rem;
    padding: 64px;
    border: 1px solid #1f1f1f;
    width: 50%;
    justify-content: center;
    text-align: center;
    align-items: center;
}

.content__what__happened__wrapper {
    display: flex;
    padding: 64px;
    max-width: 50%;
    flex-direction: column;
    border: 1px solid #1f1f1f;
    gap: 24px;
}

.content__what__happened {

}

.content__summary__subtitle{
    font-size: 2rem;
    padding: 16px 32px;
    color: #f4f4f4;
    background-color: #1f1f1f;
    border: 1px solid #1f1f1f;
    display: flex;
    justify-content: center;
}

.content__summary__text {
    display: flex;
    padding: 32px;
    border: 1px solid #1f1f1f;
}

.content__types {
display: flex;
flex-direction: column;
}

.content__types__wrapper {
display: flex;
gap: 128px;
}

.content_repercution__wrapper {
    display: flex;
    justify-content: space-around;
    border: 1px solid #1f1f1f;
}

.content_repercution__subtitle {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 2rem;
    width: 100%;
    background-color: antiquewhite;
}

.content_repercution__image {
    max-width: 50%;
    max-height: 100%;
}

.content__types__title{
    font-size: 2rem;
}

.content__types__wrapper{
    display: flex;
    max-width: 100%;
    padding: 8px 32px 48px 32px;
    border: 1px solid #1f1f1f;
    border-top: 0;
}


span {
    font-weight: 700;
}

.content__types__card__wrapper{
    display: flex;
    flex-direction: column;
    max-width: 50%;
    padding-top: 16px;
}

.content__language__wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
}

.content__language__specific {
    display: flex;
    max-width: 33.33%;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.content__language__specific > img {
    display: flex;
    max-width: 100%;
    height: 400px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.content__language__specific:nth-child(1) {
    border-left: 1px solid #1f1f1f;
}

.content__language__specific:nth-child(3) {
    border-right: 1px solid #1f1f1f;
}

.content__language__text {
max-width: 100%;
padding: 16px;
}

.content__memory__wrapper{
display: flex;
padding: 32px;
gap: 64px;
border: 1px solid #1f1f1f;
justify-content: center;
}

.content__memory__wrapper > p{
width: 40%;
}

.content__memory__wrapper > div{
    display: flex;
    flex-direction: column;
    max-width: 50%;
}

.content__memory__wrapper > div > h2{
    font-size: 2rem;
    margin-bottom: 8px;
}

.content__memory__section{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 8px;
    background-color: antiquewhite;
}

.content__section__memory__wrapper{
    display: flex;
    border: 1px solid #1f1f1f;
}

.problems {
  display: flex;
  flex-direction: column;
  background-color: antiquewhite;
  gap: 16px;
  padding: 32px;
}

.content_repercution__wrapper > div {
padding: 48px;
}

.content_repercution__wrapper > div > h2 {
margin-bottom: 16px;
font-size: 1.5rem;
}

.content_repercution__wrapper > div > p {
margin-bottom: 8px;
font-size: 1.2rem;
width: 100%;
}

.content_repercution__wrapper__special{
  display: flex;
justify-content: center;
align-items: center;
}



@media (max-width: 480px) {
  body {
    font-size: 14px;
  }

  .navLink{
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 14px;
  }

  .content__howItWorks__title{
    font-size: 1.5rem
}

  .content__howItWorks__title__black{
    font-size: 1.5rem;
}


}

@media (max-width: 768px) {
  body {
    font-size: 14px;
  }

 
  h1{
    font-size: 1.1rem;
  }

  .content__section{
     display: flex;
     flex-direction: column;
  }

  .content__history__section{
    display: flex;
    flex-direction: column;
    
  }

  .content__section__wrapper{
    max-width: 100%;
  }

  .content__section__image{
    max-width: 100%;
  }

  .content__history__subtitle{
    width: 100%;
    margin-bottom: 16px;
  }

  .content__history__text{
    width: 100%;
  }

  .content_repercution__wrapper > div{
    width: 100%;
    padding: 16px;
  }

  .content_repercution__wrapper > img{
    width: 100%;
  }

  .content__howItWorks{
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
  }
 
  .content__howItWorks__yellow{
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
  }
  

  .content__howItWorks__title{
    max-width: 100%;
    margin-bottom: 16px;
  }
  .content__howItWorks__text{
    max-width: 100%;
  }

  .content__types__wrapper{
    display: flex;
    flex-direction: column;
    gap: 64px;
  }

  .content_repercution__wrapper{
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;

  }

  .content__types__card__wrapper{
    max-width: 100%;
    gap: 32px;
  }
  .content__types__text{
    width: 100%;
  }

  .content_repercution__wrapper > img{
    max-width: 100%;
  }

  .content__bellLabs__inventors{
    flex-wrap: wrap;
  }

  .content__history__text__lp{
    width: 100%;
  }

  .content__bellLabs__versus{
    justify-content: center;
    align-items: center;
    height: auto;
  }

  .content__language__wrapper{
    display: flex;
    flex-direction: column;
  }

  .content__language__specific{
    max-width: 100%;
  }

  .content__language__text{
    max-width: 100%;
  }
  
  .content__what__happened__section{
    display: flex;
    flex-direction: column;
    max-width: 100%;
  }

  .content__what__happened__title{
    width: 100%;
    height: 60px;
  }

  .content__what__happened__wrapper{
    max-width: 100%;
  }

  .content__memory__wrapper{
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .content__section__memory__wrapper{
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .content__memory__section{
    padding: 32px;
  }

  .content__memory__wrapper > div{
    max-width: 100%;
  }

  .content__memory__wrapper > div > p{
    max-width: 100%;
  }
}

@media (max-width: 1024px) {
  body {
    font-size: 16px;
  }

  .content__section{
     display: flex;
     flex-direction: column;
  }

  .content__history__section{
    display: flex;
    flex-direction: column;
    
  }

  .content__section__wrapper{
    max-width: 100%;
  }

  .content__section__image{
    max-width: 100%;
  }

  

  .content__bellLabs__title__transistores{
    align-content: center;
  }

  .content__types__card__wrapper > p{
    margin-bottom: 32px;
  }

  .content__types__card__wrapper{
    max-width: 100%;
  }

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

  .content__bellLabs__versus{
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .content__language__wrapper{
    display: flex;
    flex-direction: column;
  }

  .content__language__specific{
    max-width: 100%;
    margin-bottom: 32px;
  }

  .content__language__text{
    max-width: 100%;
    padding: 32px;
    margin-bottom: 16px;
  }
  
  .content__what__happened__section{
    display: flex;
    flex-direction: column;
  }

  .content__what__happened__section{
    display: flex;
    flex-direction: column;
    max-width: 100%;
  }

  .content__what__happened__title{
    width: 100%;
    padding: 48px;
    height: 40px;
  }

  .content__what__happened__wrapper{
    max-width: 100%;
  }

  .content__history__section{
    display: flex;
    flex-direction: column;
  }

  .content__history__text__lp{
    width: 100%;
  }

  .content__history__subtitle{
    margin-bottom: 16px;
    width: 100%;
    font-size: 1.125rem;
  }

  .content__history__text{
width: 100%;
  }

  .content__memory__section{
    margin-left: 32px;
  }

  .content__memory__section:nth-child(2){
    margin-left: 32px;
    padding: 32px;
  }

  .content__section__memory__wrapper{
     background-color: antiquewhite;
  }

  .content__language__specific:nth-child(1){
    border-left: 0;
  }

  .content__language__specific:nth-child(3){
    border-right: 0;
  }
}

@media (min-width: 2000px) {
  body {
    font-size: 40px
  }

  .content__section__memory__wrapper{
    background-color: antiquewhite;
  }

  .content__language__specific:nth-child(1){
    border-left: 0;
  }

  .content__language__specific:nth-child(3){
    border-right: 0;
  }
}