body {
    background-image: url(../img/bg.jpg);
   
   font-family: monospace;
}
:root{
    --main-radius:5px;
    --main-padding:5px;
    --clr-primary: #651fff;
    --clr-gray: #37474f;
    --clr-gray-light: #b0bec5;
    }
.container {
    display: grid;
    height: 150vh;
    grid-template-columns:1fr 1fr 1fr 1fr;
    grid-template-rows: 0.2fr 0.2fr 1.2fr 0.2fr;
    grid-template-areas: "nav nav nav nav"
    "sidebar main main main"
    "content1 content2 content2 forads"
    "content3 content3 content3 content3"
    "footer footer footer footer";
    grid-gap:0.4rem;
    font-size: 12px;
    font-weight: bold;
    text-align: center;
 

}
.ver {
    display: flex;
    flex-wrap: wrap; 
    gap: 10px; 
}

nav {
    border:1px solid #000;
    grid-area: nav;
    border-radius:var(--main-radius);
    padding-top: var(--main-padding);
    border:var(--border) ;
    font-size:80px;
    float: left;
    font-family:Maletha-Collection-Signature-otf;
    padding: 20px;
    
}
main {
   
    grid-area: main;
    border-radius:var(--main-radius);
    padding-top: var(--main-padding);
    float: left;
    font-size: 13px;
    backdrop-filter:blur(5px);
    transition: transform 0.3s ease, background-color 0.3s ease;
    height: 100%;
}
#sidebar {
    
    grid-area: sidebar;
    border-radius:var(--main-radius);
    padding-top: var(--main-padding);

}
#content1 {
   
    grid-area: content1;
    border-radius:var(--main-radius);
    padding-top: var(--main-padding);
    backdrop-filter:blur(5px);
    transition: transform 0.3s ease, background-color 0.3s ease;
    height: 100%;

}
#content2 {
 
    grid-area: content2;
    border-radius:var(--main-radius);
    padding-top: var(--main-padding);
}
#content3 {
    grid-area: content3;
      border: 1px solid #000;
    grid-area: content3;
    border-radius:var(--main-radius);
    padding-top: var(--main-padding);

    font-size: 20px;
    transition: transform 0.3s ease, background-color 0.3s ease;
    backdrop-filter:blur(5px);
    text-align: left;

}

#forads {
    
    grid-area: forads;
    border-radius:var(--main-radius);
    padding-top: var(--main-padding);
    display: flex; 
    align-items: center;
    height: 100%;
   
    font-size: 15px;
    background-color: lightblue;
    max-width: 100%; /* Kenglikni konteynerga moslashtirish */

    justify-content: center; /* Gorizontal markazlashtirish */
}
.img1 {
    width: 200px; /* Rasmning kengligini belgilash */
    height: auto; /* Balandlikni saqlash */
    margin-right: 20px; /* Rasm bilan matn o'rtasidagi bo'shliq */
  }
  p {
    margin: 0; /* Matnning atrofidagi bo'shliqni olib tashlash */
  }
footer {
  
    grid-area: footer;
    border-radius:var(--main-radius);
    padding-top: var(--main-padding);
    font-size: 15px;
    
}
@media only screen and (max-width:960px) {
    .container {
        grid-template-columns:1fr;
        grid-template-rows: 0.4fr 0.4fr 2.2fr 1.2fr 1.2fr 1.2fr 1fr 1fr;
        grid-template-areas: 
        "nav"
        "sidebar"
        "main"
        "content1"
        "forads"
        "content2"
        "content3"
        "footer"
        ;
    }    
    }
    .box {
        flex: 1 1 200px; 
        height: 150px;
        background-color: lightblue;
        text-align: center;
        line-height: 150px; 
        border-radius: 8px;
        margin: 1px;
      }
      .box1 {
      
        height: auto;
        background-color: lightblue;
        text-align: center;
        line-height: 50px; 
        border-radius: 8px;
        margin: 2px;
        font-size:25px;
      }
      .box2 {
      
        height: auto;
        background-color: lightblue;
        text-align: center;
        line-height: 20px; 
        border-radius: 8px;
        margin: 2px;
        font-size:20px;
        padding: 1px;
      }
      .box3 {
      
        height: auto;
        background-color:#12ACD7;
        text-align: center;
        line-height: 20px; 
        border-radius: 8px;
        margin: 2px;
        font-size:20px;
        padding: 1px;
      }
      .box4 {
      
        height: auto;
        background-color:lightblue;
        text-align: left;
        line-height: 20px; 
        border-radius: 8px;
        margin: 2px;
        font-size:20px;
        padding: 1px;
      }
 
 
      @media (max-width: 768px) {
        .box {
          flex: 1 1 100%; 
        }
      }
      @media (max-width: 768px) {
        .box1 {
          flex: 1 1 100%; 
        }
      }
      a:link {
        color: black;
        text-decoration: none;
      }
      
      /* visited link */
      a:visited {
        color: green;
      }
      
      /* mouse over link */
      a:hover {
        color: white;
      }
      #content3 a:hover {
        color: rebeccapurple;
    }
      
      /* selected link */
      a:active {
        color: yellow;
      }
      .fortext {
        font-size: 12px;
        color: #EB4C42;
      }