* {
    direction: rtl;
}

    @font-face {
        font-family: Yekan;
        src: url(Yekan.ttf);
    }

        @import url(https://fonts.googleapis.com/css?family=Exo:100);
/* Background data (Original source: https://subtlepatterns.com/grid-me/) */
/* Animations */
@-webkit-keyframes bg-scrolling-reverse {
  100% {
    background-position: 50px 50px;
  }
}
@-moz-keyframes bg-scrolling-reverse {
  100% {
    background-position: 50px 50px;
  }
}
@-o-keyframes bg-scrolling-reverse {
  100% {
    background-position: 50px 50px;
  }
}
@keyframes bg-scrolling-reverse {
  100% {
    background-position: 50px 50px;
  }
}
@-webkit-keyframes bg-scrolling {
  0% {
    background-position: 50px 50px;
  }
}
@-moz-keyframes bg-scrolling {
  0% {
    background-position: 50px 50px;
  }
}
@-o-keyframes bg-scrolling {
  0% {
    background-position: 50px 50px;
  }
}
@keyframes bg-scrolling {
  0% {
    background-position: 50px 50px;
  }
}
/* Main styles */
body {
  margin-top: 13.5em;
  color: #999;
  text-align: center;
  font-size: 16px;
  /* img size is 50x50 */
  background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAIAAACRXR/mAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAIGNIUk0AAHolAACAgwAA+f8AAIDpAAB1MAAA6mAAADqYAAAXb5JfxUYAAABnSURBVHja7M5RDYAwDEXRDgmvEocnlrQS2SwUFST9uEfBGWs9c97nbGtDcquqiKhOImLs/UpuzVzWEi1atGjRokWLFi1atGjRokWLFi1atGjRokWLFi1af7Ukz8xWp8z8AAAA//8DAJ4LoEAAlL1nAAAAAElFTkSuQmCC") repeat 0 0;
  -webkit-animation: bg-scrolling-reverse 0.92s infinite;
  /* Safari 4+ */
  -moz-animation: bg-scrolling-reverse 0.92s infinite;
  /* Fx 5+ */
  -o-animation: bg-scrolling-reverse 0.92s infinite;
  /* Opera 12+ */
  animation: bg-scrolling-reverse 0.92s infinite;
  /* IE 10+ */
  -webkit-animation-timing-function: linear;
  -moz-animation-timing-function: linear;
  -o-animation-timing-function: linear;
  animation-timing-function: linear;
  font-family: Yekan;

}
body::before {
  font-family: Yekan;
  content: "بیایید فردا را بسازیم !";
  font-size: 5em;
  font-weight: 100;
  font-style: normal;
}

p {
    text-align: right;
    font-size: 1.1em;
    color: #5c5c5c;
}

h4 {
    font-size: 1.2em;
    color: #5c5c5c;
}

a:visited {
    text-decoration: none;
}

::selection {
    background-color: #252525;
    color: white;
}

#container {
  display: flex;
  flex-direction: row;
  gap: 3%;
}

#about_me {
  flex: 8;
}

#buttons {
  display: flex;
  justify-content: stretch;
  align-items: stretch;
  flex-direction: column;
  flex: 1;
  gap: 5px;
}

.btn {
  flex-grow: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

#holder {
    background-color: #f4f4f4d1;
    padding-top: 1vh;
    padding-right: 2vw;
    padding-left: 2vw;
    padding-bottom: 2vh;
    max-width: 60%;
    margin: 3vh auto;
    border-radius: 40px;
    box-shadow: 1px 1px 19px rgb(169, 169, 169);
}

a:hover{
    color: green;
}

@media screen and (max-width:768px) {

    body::before {
        content: "بیایید فردا را بسازیم !";
        font-size: 2.5em;
    }

    p {
    font-size: 1em;
    }

    h4 {
        font-size: 1.1em;
    }

    #holder {
        max-width: 80%;
        padding-left: 10%;
        padding-right: 10%;
    }

}
@media screen and (max-width:414px) {

    body::before {
        content: "بیایید فردا را بسازیم !";
        font-size: 1.75em;
    }

    h4 {
        font-size: 1em;
    }
    p {
        font-size: 0.9em;
        text-align: justify;
    }

}