:root{
  bg1: var(color gold)
}

@font-face {
    font-family: Vazirmatn;
    src: url('../fonts/webfonts/Vazirmatn-Thin.woff2') format('woff2');
    font-weight: 100;
    font-style: normal;
    font-display: swap;
  }
  
  @font-face {
    font-family: Vazirmatn;
    src: url('../fonts/webfonts/Vazirmatn-ExtraLight.woff2') format('woff2');
    font-weight: 200;
    font-style: normal;
    font-display: swap;
  }
  
  @font-face {
    font-family: Vazirmatn;
    src: url('../fonts/webfonts/Vazirmatn-Light.woff2') format('woff2');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
  }
  
  @font-face {
    font-family: Vazirmatn;
    src: url('../fonts/webfonts/Vazirmatn-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
  }
  
  @font-face {
    font-family: Vazirmatn;
    src: url('../fonts/webfonts/Vazirmatn-Medium.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
  }
  
  @font-face {
    font-family: Vazirmatn;
    src: url('../fonts/webfonts/Vazirmatn-SemiBold.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
  }
  
  @font-face {
    font-family: Vazirmatn;
    src: url('../fonts/webfonts/Vazirmatn-Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
  }
  
  @font-face {
    font-family: Vazirmatn;
    src: url('../fonts/webfonts/Vazirmatn-ExtraBold.woff2') format('woff2');
    font-weight: 800;
    font-style: normal;
    font-display: swap;
  }
  
  @font-face {
    font-family: Vazirmatn;
    src: url('../fonts/webfonts/Vazirmatn-Black.woff2') format('woff2');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
  }
  

body{
    font-family: Vazirmatn, Verdana, Geneva, Tahoma, sans-serif;
}

.header{
  justify-items: center;
  line-height: 1rem;
}

.maintitle{
  font-size: 3rem;
  color: black;
  font-weight: bold;
}

.subtitle{
  font-size: 1.5rem;
  color: grey;
  font-weight: bold;
}

h1 {
  width: auto;
  height: 3em;
  color: black;
  display: flex;
  justify-content: center;
  align-items: center;
  background: linear-gradient(to right, orange, green);
  background: radial-gradient(rgb(255, 255, 255), red);
  text-shadow: 0 0 10px gold;
  box-shadow: 0 0 10px rgba(0, 0, 0, 50%);
}

h2,h3 {
  width: auto;
  height: 2em;
  color: rgb(3, 3, 0);
  display: flex;
  justify-content: center;
  padding: 0.4rem;
  align-items: center;
}

h3 {
  margin: auto;
}

.flexes {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  flex-wrap: wrap;
  flex-grow: 1;
  
}

.flex {
  background-color: skyblue;
  border: 1px dashed black;
  border-radius: 10px;
  padding: 0.5rem;
  width: 20rem;
  flex-grow: 1;
  margin: 0.5rem;
  justify-items: center;
}

.flex-one {
}

.flex-two {
}

.flex-three {
}

.grids {
  background-color: white;
  display: grid;
  /*rows / columns*/
  grid-template: 200px 50fr 50fr 100px / 33% 33% 33%;
  justify-items: stretch;
  align-items: stretch;
}

.grid {
  font-size: 1.4rem;
  border: 1px dashed black;
  border-radius: 10px;
  padding: 0.5rem;
  align-items: top;
  justify-items: center;
  /*width: 20rem;*/
  margin: 0.5rem;
}

.grid-one {
  grid-row: 1;
  grid-column: 1 / -1;
  line-height: 0.5;
  background-color: var(bg1);
}

.grid-two {
}

.grid-three {
}

.grid-four {
}

.grid-five {
}

.grid-six {
  grid-column: 1 / span 3;
}

.media-flexes {
  background-color: gold;
  border: 1px solid grey;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  flex-grow: 1;
}

.mediaflex {
  border: 1px dashed black;
  border-radius: 10px;
  padding: 0.5rem;
  width: 20rem;
  flex-grow: 1;
  margin: 0.5rem;
}

.mediaflex-one {
  background-color: rgb(255, 100, 100);
}

.mediaflex-two {
  background-color: rgb(97, 252, 97);
}

.mediaflex-three {
  background-color: rgb(143, 253, 253);
}

.mediaflex-four {
  background-color: rgb(255, 100, 100);
}

.mediaflex-five {
  background-color: rgb(97, 252, 97);
}

.mediaflex-six {
  background-color: rgb(143, 253, 253);
}

@media screen and (min-width: 600px) {
    .media-flexes{
        flex-direction: row;
    }
}