@media only screen and (max-width: 620px) and (min-width: 769px)  {
  /* For mobile phones and desktop: */
  body, .buttons, .background-container, .content-overlay, .grid-container, aside, header,nav , footer,.menu, .main, .right {
    width: 100%;
  }
}
    
 
body {
  
  margin: 0;
  padding: 0;
  font-family: sans-serif;
  min-height: 100vh; /* Ensures body takes full viewport height */
  display: flex; /* Helps in centering content if needed */
  justify-content: center;
  align-items: center;
}
.buttons{

border-radius: 0%;


}

.background-container {
  filter: blur(5px);/* temp blur*/
  position: fixed; /* Fixes the background to the viewport */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /*background-image: url("About me photos/F22_afterburn.jpg"); Replace with your image path */
  background-size: cover;
  background-position: center;
  z-index: -1; /* Puts it behind other content */
}

.content-overlay {
  background-color: rgba(255, 255, 255, 0.3); /* Semi-transparent background for visibility */
  padding: 20px;
  border-radius: 10px;  
  -webkit-backdrop-filter: blur(10px); /* For Webkit browsers */
  backdrop-filter: blur(10px); /* The key property for blurring */
  color: #333;
  text-align: center;
}


.grid-container {
  
  display: grid;
  grid-template-areas:
    "header header header"
    "nav nav nav"
    "asideL main asideR"
    "footer footer footer";
  grid-template-columns: 1fr 2fr 1fr;
  gap: 10px;
  padding: 10px;
}

aside.left {
  filter: blur(5px);/* temp blur*/
  grid-area: asideL;
  background-color: #f5f5f5;
  padding: 15px;
}
aside.right {
  filter: blur(5px);/* temp blur*/
  grid-area: asideR;
  background-color: #f5f5f5;
  padding: 15px;
}
.header>h1{
  text-align: center;
  font-size: 80px;
}
header {
  filter: blur(5px);/* temp blur*/
  grid-area: header;
  background-color: #3f51b5;
  color: white;
  padding: 20px;
  text-align: center;
}

nav {
  filter: blur(5px);/* temp blur*/
  grid-area: nav;
  background-color: #7986cb;
  padding: 15px;
}

nav ul {
  list-style: none;
  display: flex;
  justify-content: center;
  gap: 20px;
  padding: 0;
  margin: 0;
}

nav a {
  color: white;
  text-decoration: none;
  font-weight: bold;
}

main {
  filter: blur(5px);/* temp blur*/
  grid-area: main;
  background-color: #e8eaf6;
  padding: 15px;
}

aside {
  grid-area: aside;
  background-color: #f5f5f5;
  padding: 15px;
}

footer > p{
  filter: blur(5px);/* temp blur*/
  grid-area: footer;
  background-color: #3f51b5;
  color: white;
  text-align: center;
  padding: 10px;
} 

.centered {
      
   position:fixed; /* or fixed, depending on desired scrolling behavior */
    top: 0; /* Aligns to the bottom of the parent (body in this case) */
    width: 100%; /* Ensures it spans the full width for centering */
    text-align: center; /* Centers the text horizontally */
    padding: 10px 0; /* Add some padding for visual spacing */
    background-color: #dac9c9; /* Optional: background for visibility */
    opacity: .9;
   
}

::-webkit-scrollbar {
  display: none;
  width: 0;
}