/* allow all body thing to be center */
#middle {
  width:80%;
  margin: 1% 10%;
}


/*basic setup*/

header, body{
width: 100%;
display: flex;
flex-flow: column;
position: absolute;

}

#Menuid {
  text-align:center;
  font-size: 250%; 
  position: bottom;
  margin: 20px;
}

#Menuid a {
  color: rgb(27, 129, 24); 
}

img.logo {
  max-width: 340px;
  min-width: 180px;
}


nav {

  position: absolute;
  left: 360px;

}

#tcenter {
  width:80%;
  margin: 1% 8%;
}

#item img {
  margin-left: 30%;
}

#item a{
  width: inherit;
  display: block;
  position: inherit;
}

tr div{
  position: unset;
  margin-left: 8%;
  margin-right: 20%;
}

#anchor {
  margin-left: 4%;
}


#item p {
  width: 120%;
  margin-right: 9%;
  text-align: center;
  color: black;
}


#tcenter {
  position: inherit;

}

.fadeinimage {
  margin-left: 0.5%;
}

#item {
  margin-left: -7%;
  margin-right: 25%; 
}

img {
  -webkit-filter: drop-shadow(5px 5px 5px rgb(54, 54, 54));
  filter: drop-shadow(0px 2px 2px rgba(49, 49, 49, 0.884));
}

.smol {
  margin-left:69%;
}

body {
  font-family:Verdana, Geneva, Tahoma, sans-serif;
}

header {
  font-family:Arial, Helvetica, sans-serif;
  font-size: 100%;
}

@media screen and (max-width: 1024px) {
  #tcenter {
    width:100%;
    margin-left: -2%;
  }
 
  #item img{
    position: unset;

  }

  nav {
    position: absolute;
    right: 1%;

  }
  #item p {
    text-align: center;
    margin-right: 32%;
    color: black;
  }

  #item {
    margin-left: -7%;
    margin-right: 9%;
  }

}

@media screen and (max-width: 986px) {
  
#tcenter {
  width:100%;
  margin: 2% 1%;
}

nav {
  position: unset;
  margin-right: 20%;
}

header>div {
  display: block;
  position: unset;
  margin-left:1%;
}

#item p {
  text-align: center;
  color: black;
}

tr div{
  margin: 1% 1%;
}
}


/* allow smooth scroll*/
html {
  scroll-behavior: smooth;
}


/*position edit*/
#myBBtn {

  position: fixed;
  bottom: 10%;
  right: 8%;
  z-index: 1999;
  font-size: 18px;
  border: none;
  outline: none;
  background-color: rgba(19, 156, 42, 0.932);
  color: white;
  cursor: pointer;
  padding: 15px;
  border-radius: 25px;
}

#myBtn:hover {
  background-color: rgba(85, 85, 85, 0.603);
}




img {
border-radius: 10px 10px;
}
a {
text-decoration: none;
}

/* Responsive layout - makes the three columns stack on top of each other instead of next to each other */
@media screen and (max-width: 500px) {
  .column2 {
    width: 100%;
  }
}

/* background **/

html {
  background-image: url(../Images/white.jpg);
  background-size: fill;
  background-repeat: repeat;
}

 /* img logo intro */
.fadeinimage,p,img,h1, nav { animation-delay: 0s; 
    animation: fadeIn 2s; }

@keyframes fadeIn {
    0% { opacity: 0; }
    100% { opacity: 1; }
  }
/* for text and header*/
    .strong { 
        animation: fadeIn 2s;
    animation-delay: 2s; }
@keyframes fadeIn {
    0% { opacity: 0; }
    100% { opacity: 1; }
  }

  

/* logo slide in */
#slide,header {
    position:relative;
    right: 70px;
    -webkit-animation: slide 4s forwards;
    -webkit-animation-delay: 10s;
    animation: slide 1.5s forwards;
    animation-delay: 0s;
}
@keyframes slide {
    0% { right: 100; }
}
@keyframes slide {
    100% { right: 0; }
}

/*0 TOP BAR FOR CHOOSING */





  /*1 Style the links inside the navigation bar */
  .topnav a {
    float: right;
    color: #000000;
    text-align: center;
    padding: 43px 11px;
    text-decoration: none;
    font-size: 120%;
  }
  



  /*2 Change the color of links on hover */
  

  .topnav a:hover{
    background-color: rgba(243, 243, 243, 0.253);
    border-radius: 8px 8px;
    color: rgb(19, 156, 42);
  }
  
  /*3 Add a color to the active/current link */
  .topnav a.active {
    background-color: rgb(0, 0, 0);
    border-radius: 9px 9px;
    color: white;
  }

  /* header logo white line */
  header {
    background-color: rgba(235, 235, 235, 0.329);
    width: 100%;
    border-radius: 20px 20px;
    display:flex ; 
    flex-wrap: wrap-reverse;
  }