*{
   margin: 0;
   padding: 0;
   box-sizing: border-box;
   font-family: Arial, Helvetica, sans-serif;
   font-color: #000000 
}

body {
	height: 100vh;
	font-color: #000000;
	background-color: #C1BFA2
	/*background-image: url('../images/Prescotontintrees.png');*/
	background-size: cover;
	background-position: center;
}

/*#navbar a:hover {
  background-color: #ddd;
  color: black;
}

#navbar a.active {
  background-color: ;
  color: #000099;
 }
*/

li{
 list-style: none; 
 }
 
a{
 text-decoration: none;
 color: #0066CC;
 Font-size: 1rem;
 justify-content: space-between;
 }

a:hover {
color: #FF0000
} 

   
.navbar {
  position: fixed;
  top: 0;
  width: 100%;
  Height: 60px;
  bottom: 0;
  min-width: 280px
  Max-width: 900px;
  background-color: #000066;
  margin: 0 auto;
  display: flex;
  Padding: 30px;
  align-items: center;
  justify-content: space-between;
  overflow: hidden;
  z-index: 999;
}

.logo {
   left: 50px;
   text-color: #FFFFFF ;
   }   

.navbar .logo a{
  font-size: 1.25rem;
  font-weight: bold;
  left: 50px;
  color: #FFFFFF;
}

.navbar .links {
  display: flex;
  gap: 2rem;
}

.navbar .toggle_btn {
  color: #fff;
  font-size: 1.5rem;
  cursor: pointer;
}

.action_btn { 
	Background-color: #339999;
    color: #000000;
    Padding: 0.5rem 1rem;
    Border: none;
    Outline: none;
    border-radius: 20px;
	font-size: 0.8rem;
	font-weight: regular;
	cursor: pointer;
	transition: scale 0.5 ease;
}

.action_btn:hover{
  scale: 1.05;
  color: #fff;
  }
  
.action_btn:active {
    scale: 0.95;
	  }
	  
/* Next Back Buttons>*/
b {
  text-decoration: none;
  font-size: .5vm;
  width: max-content;
  display: flex;
  padding: 8px 16px;
  align-items: right;
 justify-content: space-between;
  z-index: 1;
}

b:hover {
  background-color: #ddd;
  color: white;
}

/*.previous {
  background-color: #0099CC;
  color: white;
}

.next {
  background-color: #0099CC;
  color: white;
}

.round {
  border-radius: 50%;
}
/*End Next Back Button*/

/* DROPDOWN MENU*/
.dropdown_menu{
  position: fixed;
  right: 29px;
  top: 62px;
  height: 0px;
  width: 150px;
  /*opacity: .5;*/
  background-color: #36688D ;
  backdrop-filter: blur(25px);
   border-radius: 7.5px;
   overflow: hidden;
   transition: height 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
   z-index: 10;
 }
 
.dropdown_menu.open{
   height: 120px;
   font: #A7CEDA;
   opacity: .8;
   }
   
.dropdown_menu li {
  padding: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.dropdown_menu .action_btn {
  Width: 100%;
  display: flex;
  justify-content: center;
 }

.fa-solid fa-bars{
  right: 50px;
  }

/* start of Body*/
/*

.style1 {
color: #ffffff;
}

/*Resposnsive Media*/
@media (max-width: 1150px){
 .navbar .links,
 .navbar .action_btn{
   display: none;
  }
 .navbar .toggle_btn {
   display: block;
  }
.dropdown_menu{
    display: block;
  }}

@media (max-width: 576px){
  .dropdown_menu{
    Left: 2rem;
	width: unset;
}}
	
/*Mobile View*only screen and (min-width: 280px) and */
@media only screen and (min-width: 150px) and (max-width: 350px){
.container .container1,
.navbar .links,{
  display: block;
  width: 40%;
  Max width: 350px;
  Min-width: 200px;
}}

/*Tablet view*/
@media only screen and (min-width: 3511px) and (max-width: 600px){
.container .container1, 
.navbar .links,
 /*.navbar .action_btn*/{
  display: block;
  width: 65%;
  Max width: 780px;
  Min-width: 351px;
}}

/*Desktop view*/
@media (min-width: 601px) and (max-width: 1150px){
.container .container1  
.navbar .links,
 /*.navbar .action_btn*/{
  display: block;
   width: 90%;
  /* Max width: 1150px;
   Min-width: 781px;*/
}}

/* Screnn media for action_btn*/

/*Mobile View*only screen and (min-width: 280px) and */
@media only screen and (min-width: 150px) and (max-width: 350px){
.navbar .action_btn{
  display: block;
  width: 10%;
  Max width: 10%;
 /* Min-width: 10%;*/
}}
/*Tablet view*/
@media only screen and (min-width: 3511px) and (max-width: 600px){
.navbar .action_btn{
  display: block;
  width: 10%;
  Max width: 10%;
  /*Min-width: 10%;*/
}}

/*Desktop view*/
@media (min-width: 601px) and (max-width: 1150px){
.navbar .action_btn{
  display: block;
   width: 10%;
    Max width: 10%;
  /*Min-width: 10%;*/
}}