:root {
  --black: black;
  --white: white;
  --red: red;
  --yellow: yellow;
  --border: clamp(3px, 0.7vw, 5px) solid var(--black);
  --border-dashed: dashed var(--black) 1px;
  --border-duble: double clamp(5px, 1.4vw, 7px) var(--white);
  --border-duble-black: double clamp(5px, 1.4vw, 7px) var(--black);
  --border-dashed-hover-white: dashed var(--white) 0.2vw;
  --border-dashed-hover: dashed var(--black) 0.2vw;
  --radius: clamp(5px, 3vw, 10px);
  --stroke-width: 5px;
  --width: 100%;
  --transition: ease-in-out 0.1s;
  --box-shadow: inset 0 0 2.5vw var(--white);
  --box-shadow_hover: inset 0 0 5vw var(--black);
  --scale: 0.96;
}

@font-face {
  font-family: 'vazir';
  src: url('/../font/vazirmatn-black.ttf') format('truetype');
}

@font-face {
  font-family: 'material-icons';
  src: url(/../font/material-icons.woff2) format('woff2');
}

* {
  direction: rtl;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  align-items: center;
  text-align: center;
  flex-wrap: wrap;
  font-family: vazir, Vazirmatn, sans-serif;
  position: relative;
}

body, main.container, main.main{
    display: flex;
}

body, main.container, main.main{
    justify-content: space-evenly;
}

body, main.container, main.main{
    width: 100%;
}

body, main.container{
    padding: 1%;
}

body, main.container,
footer.footer{
    border: var(--border);
}

main.main{
    flex-direction: column;
}

a {
  text-decoration: none;
}

.material-icons{
    font-family: material-icons;
}

.red{
    color: var(--red);
}

.black {
    text-shadow:
        0px 0px clamp(5px,1vw,7px) var(--white),
        0px 0px clamp(10px,2vw,14px) var(--white),
        0px 0px clamp(15px,3vw,21px) var(--white);
    color: var(--black);
}

body {
    gap: clamp(13px,2.3vw,100vw);
    }
}