*{
    box-sizing: border-box;
}

main{
  display: grid;
  grid-template-columns: 200px auto;
  grid-template-rows: auto auto auto;
  grid-template-areas:
  'aside article'
  'footer footer';
  border: 10px solid rgb(0, 225, 255);
  width:1150px ;
  gap: 10px;
  margin: 0 auto;
  border-image:  url(../../images/border.png) 30 stretch;
  padding: 10px;
  margin-top: 60PX;
}
aside{
  grid-area: aside;
  min-height: 710px;
  float: right;
  border: 1px solid rgb(0, 225, 255);
/* From https://css.glass */
background: rgba(255, 255, 255, 0.72);
border-radius: 16px;
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
backdrop-filter: blur(5.7px);
-webkit-backdrop-filter: blur(5.7px);
}
article{
  grid-area: article;
  border: 1px solid rgb(0, 225, 255);
  min-height: 710px;
/* From https://css.glass */
background: rgba(255, 255, 255, 0.72);
border-radius: 16px;
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
backdrop-filter: blur(5.7px);
-webkit-backdrop-filter: blur(5.7px);
}
footer{
  grid-area: footer;
  border: 1px solid rgb(0, 225, 255);
  min-height: 100px;
/* From https://css.glass */
background: rgba(255, 255, 255, 0.72);
border-radius: 16px;
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
backdrop-filter: blur(5.7px);
-webkit-backdrop-filter: blur(5.7px);
}
html{
  text-align: start;
  -moz-box-align: end;
  box-decoration-break: end;
  direction: rtl;
}
.logo{

  width: 40px;
  object-fit: cover;
}
.loader2 {
  width:80px;
  margin:12px auto;
  height:80px;
  border-radius:50%;
  border:3px solid #000;
  border-left:red 3px solid;
  animation:div1 4s infinite linear;
  transform-style:preserve-3d;
  z-index: 999999;
  left: 0;
  bottom: 0;
  position: fixed;
}
.loader2 div {
  width:60px;
  margin:7px;
  height:60px;
  border-radius:20%;
  border:3px solid #000;
  border-right:red 3px solid;
  transform-style:preserve-3d;
  animation:div2 3s infinite linear
}

.loader2 div div  {
  width:40px;
  margin:7px;
  height:40px;
  border-radius:50%;
  border:3px solid #000;
  border-top:red 3px solid;
  transform-style:preserve-3d;
  animation:div3 2.5s infinite linear
}


@keyframes div1{
  0% {
    transform:rotate(-0deg) rotatex(0)
  }
  100% {
    transform:rotate(-360deg)rotatex(360deg)
  }
}

@keyframes div2{
  0% {
    transform:rotate(0deg) rotatey(0deg)
  }
  100% {
    transform:rotate(360deg) rotatey(360deg)
  }
}

@keyframes div3{
  0% {
    transform:rotate(0deg) rotatex(0deg)
  }
  100% {
    transform:rotate(360deg) rotatex(360deg)
  }

}
@keyframes me {
  0%{
      transform: translateY(-200px);
      opacity: 0;
  }
  50%{
      transform: translateY(40px);
      opacity: 0.5;
  }
  100%{
      transform: translateY(0px);
      opacity: 1;
  }
}
.menu{
  list-style-type: none;
  margin: 0px;
  padding: 0px;
}
.menu li a{
  padding: 7px;
  color: #E87A00;
  width: 100%;
  height: 100%;
  display: block;
  background-color: #045174;
  border-right: 7px solid #045174;
  transition: 0.4;
}
.menu li a:hover{
  background-color: #E87A00;
  border-left: 7px solid #045174;
  color: #045174;
  padding-right: 40px;
 
}
nav .l{
  color: #E87A00;
  background-color: #045174;
  border-bottom: 3px solid #E87A00;
  padding: 5px 8px;
  display: inline;
  width: 100%;
  height: 100%;
}

nav ul{
  list-style-type: none;
  margin: 0px;
  padding: 0px;
}
nav ul li a{
  background-color: #045174;
  padding: 5px 8px;
  display: block;
  color: #E87A00;
  width: 100%;
  height: 100%;
  border-bottom: 3px solid #045174;
  text-decoration: none;
  border-top:1px solid #E87A00;
  border-bottom: 1px solid #E87A00;;
}
nav ul li a:hover{
  background-color: #E87A00;
  transition: 0.6s;
}
.menu li { 
  animation: me 3s forwards;
  opacity: 0 ;
}
a{
  display: inline;
  text-decoration: none;
}
body{
  	margin: 0;
	width: 100%;
	min-height: 100vh;
	background: linear-gradient(-45deg, #060898c0, #0bff85, #00BEC5, #050833);
	background-size: 400% 400%;
	-webkit-animation: gradientBG 10s ease infinite;
	        animation: gradientBG 10s ease infinite;
}
@-webkit-keyframes gradientBG {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}
.card{
  float: right;
  border: 5px #E87A00;
  margin:5px ;
}
.btn-group{
  margin: 0 auto;
}
.bottoma:hover{
  color:white;
  background-color: #045174;
}
.bottoma{
  color: #045174;
  border: 1px solid #045174;
  padding: 5px;
  border-radius: 10px;
}
button {
  padding: 10px 20px;
  background-color: #4CAF50;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
.si{
  background-image:linear-gradient(142deg, rgba(0,179,178,1) 42%, rgba(231,61,255,1) 85%);
padding: 10px 20px;
 display: inline;
  border-radius: 4px;
  color:white
  
}

  @font-face {
    font-family: vazir;
    src: url(../font/Vazir.woff);
  }
body{
  font-family: vazir;
  font-weight: normal;
}
@media screen and (max-width: 1000px)
{
  main{
    width: 100%;
    grid-template-columns: 1fr; 
    grid-template-areas:
  'article'
  'footer';
  }
  aside{
   display: none; 
  }
  article{
    width: 100%;
  }
}