@font-face {
    font-family: 'dank_monoitalic';
    src: url('fonts/dank_mono_italic_thefontsmaster.com-webfont.woff2') format('woff2'),
         url('fonts/dank_mono_italic_thefontsmaster.com-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'dank_monoregular';
    src: url('fonts/dank_mono_regular_thefontsmaster.com-webfont.woff2') format('woff2'),
         url('fonts/dank_mono_regular_thefontsmaster.com-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

*,
::after,
::before {
  box-sizing: border-box;
}

html,body{
  font-size: 100%;
  height: -webkit-fill-available;
  margin: 0;
  padding: 0;
} /*16px*/

:root {
  /* Define color */
  --black: #323232;
  --red: #ec4646;
  --yellow: #fed049;
  --green: #00af91;
  --blue: #a4ebf3;
  --purple: #7868e6;
  --lightgrey: #f3f4ed;
  --grey: #cdd0cb;
  --darkgrey: #4b5d67;
  --white: white;

  --purl: #524763;
  --purl-20: #6a5c80;
  --purl-60: #b8afc5;
  --darkPurl: #373142;
  --xtraPurl: #191324;
  --grey: #d8d8d8;
  --green: #cbe56c;
  --green-20: #daed97;
  --teal: #82d8d8;
  --teal-20: #b1e7e7;
  --red: #e54b4b;
  --red-20: #f08484;
  --pink: #cf256d;
  --black: #333;
  --black-20: #4f4f4f;
  --black-40: #828282;
  --black-60: #bdbdbd;
  --white-60: #e0e0e0;
  --white-40: #f2f2f2;
  --white-20: #f5f4f6;
  --white: #fff;

  /*Define Colors Intentions */
  --background: var(--lightgrey);
  --card-bg:#fffffe;
  --border:2px solid #121629;
  --font-color:#121629;
  --main:#b8c1ec;

  /* Theme-Color  */


  /* Define Fonts */
  --headingFont: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  --bodyFont: "dank_monoregular", sans-serif;
  --styedFont:"dank_monoitalic",sans-serif;


  /* Define Font Size  */
  --small-text: 0.8em;
  --h1: 3.052rem;
  --h2: 2.441rem;
  --h3: 1.953rem;
  --h4: 1.563rem;
  --h5: 1.25rem;

  /* Other Var  */
  --border-radius:0.25em;

  /* box shadow*/
  --shadow-1: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
  --shadow-2: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
    0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --shadow-3: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
    0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --shadow-4: 0 20px 25px -5px rgba(0, 0, 0, 0.1),
    0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

body {
	font-weight: 400;
	line-height: 1.5;
	color: var(--font-color);
  background-color: var(--white-60);
}

  p {
	margin-bottom: 1.5rem;
	max-width: 40em;
  }
  
  h1,
  h2,
  h3,
  h4,
  h5 {
	margin: 0;
	margin-bottom: 1.38rem;
	font-weight: 400;
	line-height: 1.3;
	text-transform: capitalize;
  }
  
  h1 {
	font-size: var(--h1);
  }
  
  h2 {
	font-size: var(--h2);
  }
  
  h3 {
	font-size: var(--h3);
  }
  
  h4 {
	font-size: var(--h4);
  }
  
  h5 {
	font-size: var(--h5);
  }
  
  small,
  .text-small {
	font-size: var(--small-text);
  }
  
  a {
	text-decoration: none;
  }
  
  ul {
	list-style-type: none;
	padding: 0;
  }
  
  /* Image  */
  
  img{
	width: 100%;
	object-fit: cover;
	display: block;
	border-radius: var(--border-radius);
  }

label {
	display: block;
}

/* form */

form {
	width: 90vw;
	max-width: var(--fixed-width);
	background: var(--white);
	border-radius: var(--border-radius);
	box-shadow: var(--shadow-2);
	padding: 2rem 2.5rem;
	margin: 3rem auto;
  }
  label {
	display: block;
	font-size: var(--small-text);
	margin-bottom: 0.5rem;
	text-transform: capitalize;
	letter-spacing: var(--letter-spacing);
  }
  input , textarea {
	width: 100%;
	padding: 0.375rem 0.75rem;
	border-radius: var(--border-radius);
	background: var(--background);
	border: 1px solid var(--black);
	margin-bottom: 1rem;
  }
  
  
  textarea {
	height: 7rem;
  }
  ::placeholder {
	font-family: inherit;
	color: var(--darkgrey);
  }

  select{
    padding: 8px 12px;
    width: 100%;
    margin-bottom: 2rem;
    font-family: var(--headingFont);
    font-size: 1rem;
    appearance: none;
    border: 2px solid transparent;
    border-radius: 3px;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-color: var(--background);
    background-image: url('/Assets/down-arrow.png');
    background-repeat: no-repeat;
    background-size: 16px;
    background-position:right 15px top 50%;
    letter-spacing: 0.5px;
    cursor: pointer;
  }

  select:hover,select:focus{
    border: 2px solid var(--font-color);
    outline: none;
  }

  select option{
    background-color: var(--white-20);
    margin-top: 30px;
    font-family: var(--bodyFont);
  }

  button{
    display: block;
    margin: 1rem auto;
    padding: 0.5rem 0;
    width: 100%;
    font-size: 1.2rem;
    font-weight: 600;
    cursor: pointer;
    background: none;
    border: 2px #121629 dashed;
    font-family: var(--bodyFont);
  }


*::-webkit-scrollbar {
  width: 5px;
}
*::-webkit-scrollbar-thumb {
  background: #646262;
  border-radius: 0.5rem;
}