@font-face{
    font-family: Estedad;
    src: url('../fonts/Estedad.woff2');
}
*{
    box-sizing: border-box;
}
html,body{
    scroll-behavior: smooth;
}
    html{
        font-size: 17px;
    }
    body{
        font-family: Tahoma;
        background-color: skyblue;
        /*background-image: url(images/bg.JPG);*/
        background: linear-gradient(135deg,#d4edda,#196f3d);
            background-attachment: fixed;
    }
    a{
        text-decoration: none;
        color: deepskyblue;
    }
    a:hover{
        color: orangered;
    }
    input[type=text]{
        border: 1px solid black;
    }
    #container{
        background-color: rgba(255, 255, 255, 0.3);
    }
    p{
        text-align: justify;
    }
    text-center{
        text-align: center;
    }
    #up{
        position: fixed;
        right: 30px;
        bottom: 30px;
        margin: 0 auto;
        width: 50px;
        aspect-ratio: 1;
        background-image: url(../images/btn.png);
    }
    #up:hover{
        background-position: top right;
    }
    #help{
        width: 20px;
        aspect-ratio: 1;
        background-image: url(../images/nav_logo.png);
        background-posotion: -80px -191px;
    }
#help:hover{
background-position: -100px -191px;
}

    /*website structure*/
main{
    border: 10px solid black;
    width: 1000px;
    min-height: 1000px;
    margin: 0 auto;
    padding: 10px;
    border-image: url(../images/border.png) 20% stretch;

/*visibility: hidden;*/

}
header,aside,article,footer{
    background-color: white;
bordedr-radius: 10px;
    box-shadow: rgba(14, 63, 126, 0.04) 0px 0px 0px 1px, rgba(42, 51, 69, 0.04) 0px 1px, rgba(42, 51, 69, 0.04) 0px 1px 1px -0.5px, rgba(42,51, 69, 0.04)
}
header{
    min-height: 150px;
    grid-areo:header;

}
aside{
    grid-areo:aside;

    
}
article{
     grid-areo:article;
padding: 10px;
}
footer{
    grid-areo:footer;
    direction: ltr;
    text-align: center;
    letter-spacing: 7px;
}


    #main-menu ul{
        list-style-type: none;
        padding: 0px ;
        margin: 0;
    }
    #main-menu ul li{

    }
 #main-menu ul li a{
    padding: 7px 9px;
    margin: 3px 0px;
    background-color:  #196f3d;
    border-right: 7px solid #ffc000;
    display: block;
    color: white;
    width: 100%;
    height: 100%;
    transition: 0.2s;

 }
 #main-menu ul li a:hover{
    background-color: #196f3d;
    border-right: 7px solid #196f3d;
    box-shadow: -8px 8px 0px #ffc000;
 }

 #nav ul{
    list-style-type: none;
    margin: 0px;
    padding: 0px;
    text-align: center;
 }

 #nav ul li{
    display: inline-block;
 }

 #nav ul li a{
    padding: 0px 5px;
    display: block;
    width: 100%;
    height: 100px;
    background-color: #196f3d;
    color: #ffffff;
    border-radius: 10px 10px 0px 0px;
    border-bottom: 2px solid #ffc000;
    transition: 0.3s;
 }

 #nav ul li a:hover{
    background-color: #ffc000;
    border-bottom: 2px solid #333333;
    box-shadow: 0px -3px 8px #ddd;
 }
#box{
    width: 30px;
    aspect-ratio:1;
    margin: 0 auto;
    position: relative;
    transform: scale(0.6)
}
#box div{
    position: absolute;
}
#box div:first-child{
    width:
}

 @keyframes logoplay{
    from{
        transform: translateX(-300px);
        opacity: 0;
    }
    to{
        transform: translateX(0px);
        opacity: 1;
    }
 }
 #logo{
    animation: logoplay 3s;
 }
@media screen and(max-width: 1024px)
{
main{
width: 100%;
}
#nav{
display: none;
}
}

@media screen and (max-width: 500px){
main{
  grid-template-columns: auto;
  grid-template-rows: repeat(4,auto);
  grid-template-areas:
  'header'
  'aside'
  'article'
  'footer'
  ;
}
}




 body {
      font-family: "Vazirmatn", sans-serif;
      background: linear-gradient(135deg, #a8e6cf, #56ab2f);
      min-height: 100vh;
      margin: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      animation: fadeIn 1.2s ease;
    }

   @keyframes fadeIn {
      from {opacity: 0; transform: translateY(20px);}
      to {opacity: 1; transform: translateY(0);}
    }