#screen{
    background-color: rgb(212, 221, 221);
    opacity: 1;
    border-top: 1px solid  black;
    width: 97.5%;
    font-size: 30px;
    height: 50px;
}
body{
    margin-left:auto 0;
   background-size: cover;
   background-image: url('Images/texture.jpeg');
    width: 100%;
    height: 100%;
}
h1{
    text-align: center;
    font-size: 40px;
    font-family: 'Noto Serif', serif;
    text-shadow: 3px 2px 2px 4px rgb(156, 54, 54);
    color: cadetblue;
}
.nav-link{
    font-size: 22px;
    margin-left: 20px;
    background-color: rgb(18, 42, 87);
    border-radius: 10%;
    border: 1px solid black;
}
.nav-link:hover{
    font-size: 25px;
    margin-left: 20px;
    background-color: cornflowerblue;
    border-radius: 90%;
    transition: 1s linear;
    box-shadow: 2px 2px 2px 2px rgb(18, 42, 87);
}
#navbarSupportedContent{
    padding-left: 30px;
}
ul li{
    font-size: 30px;
}
#clear{
    min-width: 100px;
    min-height: auto;
    background-color:  rgb(183, 196, 236);
    color: white;
    opacity: 0.8;
    font-size: 30px;
    height: 50px;
    border-radius: 10%;
    margin-top: 0px;
    margin: 2px;
    margin-bottom: 0px;
    box-shadow: 2px 2px 2px 2px solid rgb(209, 214, 223);
}
#clear:hover{
    color:  rgb(255, 255, 255);
    background-color: rgb(14, 11, 65);
    transition:0.3s linear;
    zoom: 1;
}
.btn:hover{
    color: aliceblue;
    background-color: rgb(149, 152, 199);
    zoom: 1;
    transition:0.3s linear;
}
.btn{
    min-width: 90px;
    border-radius: 3px;
    height: 50px;
    background-color:  rgb(61, 75, 119);
    color: white;
    font-size: 30px;
    opacity: 0.87;
    box-shadow: 2px 2px 2px 2px solid rgb(209, 214, 223);
    margin: 2px;
}
#main{
    position: relative;
    text-align: center;
    max-width:fit-content;
    height: auto;
    background-image: url('https://images.pexels.com/photos/618833/pexels-photo-618833.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500');
    background-size: cover;
   border: 5px solid black;
    border-radius: 1%;
    margin:0 auto;
}
#history{
    display: none;
    background-color: rgb(129, 120, 179);
    width: fit-content;
    color: rgb(13, 63, 13);
    font-size: 30px;
    margin: 0 auto;
    border: 1px solid black;
}
#scientific{
border: 1px solid black;
width: fit-content;
margin:0 auto;
}
#simple{
    border: 1px solid black;
width: fit-content;
margin:0 auto;
}
#show{
text-align: left; font-style: italic;margin-bottom: 0px; color: rgb(173, 153, 153); font-size: 30px;width: fit-content; height: 50px;background-color: white;
}


@media screen and (max-width: 440px) {
      .btn{
        min-width: 50px;
    border-radius: 3px;
    height: 40px;
    background-color:  rgb(61, 75, 119);
    color: white;
    font-size: 20px;
    opacity: 0.87;
    box-shadow: 2px 2px 2px 2px solid rgb(209, 214, 223);
    margin: 2px;
      }
      h1{
        font-size: 30px;
    }
    #clear{
        min-width: 50px;
        height: 40px;
        background-color:  rgb(183, 196, 236);
        color: white;
        opacity: 0.8;
        font-size: 20px;
        height: 50px;
        border-radius: 10%;
        margin-top: 0px;
        margin: 2px;
        margin-bottom: 0px;
        box-shadow: 2px 2px 2px 2px solid rgb(209, 214, 223);
    }
  }

  @media screen and (max-width: 290px) {
    .btn{
      min-width: 30px;
  border-radius: 3px;
  height: 30px;
  background-color:  rgb(61, 75, 119);
  color: white;
  font-size: 15px;
  opacity: 0.87;
  box-shadow: 2px 2px 2px 2px solid rgb(209, 214, 223);
  margin: 2px;
    }
    #clear{
        min-width: 30px;
        height: 20px;
        background-color:  rgb(183, 196, 236);
        color: white;
        opacity: 0.9;
        font-size: 15px;
        height: 50px;
        border-radius: 10%;
        margin-top: 0px;
        margin: 2px;
        margin-bottom: 0px;
        box-shadow: 2px 2px 2px 2px solid rgb(209, 214, 223);
    }
    h1{
        font-size: 25px;
    }
}