body{
    background-color:#2c2c2c;
   
}

 /* Dropdown Button */
 .dropbtn {
background-color: #fffbee;
    color:#2c2c2c;
    padding: 16px;
    font-size: 16px;
    margin-top: 10px;
    cursor: pointer;
    border-radius: 50%;
    border-top-left-radius: 50%;
    border-top-right-radius: 50%;
    border-bottom-right-radius: 50%;
    border-bottom-left-radius: 50%;
    font-family: monospace, serif;
  }
  
  /* Dropdown button on hover & focus */
  .dropbtn:hover, .dropbtn:focus {
    background-color: #2c2c2c;
    border-radius: 50%;
    border-top-left-radius: 50%;
    border-top-right-radius: 50%;
    border-bottom-right-radius: 50%;
    border-bottom-left-radius: 50%;
    color: #fffbee;
  }
  
  /* The container <div> - needed to position the dropdown content */
  .dropdown {
    position: relative;
    display: inline-block;
    font-family: monospace, serif;
  }
  
  /* Dropdown Content (Hidden by Default) */
  .dropdown-content {
    display: none;
    position: absolute;
    background-color: #fffbee;
    min-width: 160px;
    z-index: 1;
    border-radius: 15%;
    
    
  }
  
  /* Links inside the dropdown */
  .dropdown-content a {
    color: #2c2c2c;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    border-radius: 25%;
   
  }
  
  /* Change color of dropdown links on hover */
  .dropdown-content a:hover {
    color:#fffbee;  
    background-color: #2c2c2c;
    border-radius: 10%;
    display: block;
}
  
  /* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */
  .show {display:block;} 


  #myBtn {
    display: none; /* Hidden by default */
    position: fixed; /* Fixed/sticky position */
    bottom: 20px; /* Place the button at the bottom of the page */
    right: 30px; /* Place the button 30px from the right */
    z-index: 99; /* Make sure it does not overlap */
    border: none; /* Remove borders */
    outline: none; /* Remove outline */
    background-color: #2c2c2c; /* Set a background color */
    color: white; /* Text color */
    cursor: pointer; /* Add a mouse pointer on hover */
    padding: 15px; /* Some padding */
    border-radius: 10px; /* Rounded corners */
    font-size: 18px; /* Increase font size */
  }
  
  #myBtn:hover {
    background-color: #325B7D; 
  }


  

  

  .gallery {
    display: grid;
    grid-gap: 5px;
    background-repeat: no-repeat;
    background-size: 2000px;
    background-color: #2c2c2c;
   
}



.gallery__item--1 {
    grid-column-start: 1;
    grid-column-end: 7;
    grid-row-start: 1;
    grid-row-end: 7;
  height: 50%;
  width: 50%;

}

.gallery__item--2 {
    grid-column-start: 4;
grid-column-end: 7;
grid-row-start: 2;
grid-row-end: 4;
    
}



.aboutMe{
    color: #fffbee;
    font-family:monospace, serif;
    font-size: 30px;
    font-weight: bolder;
    text-align: justify;
  
  }
  
  .aboutMe p{
    
    color: #fffbee;
    
    font-family: monospace, serif;
    font-size: 14px;
    max-width: 32em;
    text-align: justify;
  
  }








.portfolio{
  color: #fffbee;
 display: grid;
  font-family: monospace, serif;
  font-size: 30px;
  font-weight: bolder;
  float: inline-start;
  min-width: fit-content;
  text-align: center;

}


.stage{
    margin-top: 150px;
    padding-top: 100px;
  color: #fffbee;
  font-size: 30px;
  font-weight: bolder;
  text-align: center;
  border-top: 30px solid #fffbee;
  font-family: monospace, serif;


}

/*Contact Styles*/

* {
    box-sizing: border-box;
  }
  
  /* Style inputs */
  input[type=text], select, textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid #ccc;
    margin-top: 6px;
    margin-bottom: 16px;
    resize: vertical;
    background-color: #fffbee;
  }
  
  input[type=submit] {
    background-color: #2c2c2c;
    color: #fffbee;
    padding: 12px 20px;
    border: 5px inset #325B7D;
    cursor: pointer;
  }
  
  input[type=submit]:hover {
    background-color: #325B7D;
  }
  
  /* Style the container/contact section */
  .container {
    border-radius: 5px;
    background-color: #2c2c2c;
    padding: 10px;
  }
  
  /* Create two columns that float next to eachother */
  .column {
    float: left;
    width: 50%;
    margin-top: 6px;
    padding: 20px;
  }
  
  /* Clear floats after the columns */
  .row:after {
    display: table;
    clear: both;
  }
  
  /* Responsive layout - when the screen is less than 600px wide, make the two columns stack on top of each other instead of next to each other */
  @media screen and (max-width: 600px) {
    .column, input[type=submit] {
      width: 100%;
      margin-top: 0;
    }
  }
footer{
    padding:10px;
    border-top: 3px solid #325B7D;
    width: 100%;
}

footer p{
    color: white;
    padding-top: 10px;
    float:right;
    
}
 .footer_styles{
     padding-top: 10px;
     width:50px;
    
 }

 .email_us{
     width: 100%;
     border-radius: 10px;
 }

 .topLogo{
     width: 25%;
     float: right;
     margin-top: 10px;
     margin-right:100px;
 }

 a:visited {
  color:  #325B7D;
  text-decoration: none;
    }
    
    form{
      text-align: left;
    }

   .radio{
     float: right;
     padding-right: 158px;
    }

    .radio h1{
      font-size: 30px;
    }