@font-face { font-family: Vazir; src: url('fonts/Vazir.eot'); src: url('fonts/Vazir.eot?#iefix') format('embedded-opentype'), url('fonts/Vazir.woff') format('woff'), url('fonts/Vazir.ttf') format('truetype'); font-weight: normal; } @font-face { font-family: Vazir; src: url('fonts/Vazir-Bold.eot'); src: url('fonts/Vazir-Bold.eot?#iefix') format('embedded-opentype'), url('fonts/Vazir-Bold.woff') format('woff'), url('fonts/Vazir-Bold.ttf') format('truetype'); font-weight: bold; } @font-face { font-family: Vazir; src: url('fonts/Vazir-Light.eot'); src: url('fonts/Vazir-Light.eot?#iefix') format('embedded-opentype'), url('fonts/Vazir-Light.woff') format('woff'), url('fonts/Vazir-Light.ttf') format('truetype'); font-weight: 300; } .container{ background-color: #ffffff;} body{ background: #111226; font-family: 'Vazir'; direction: rtl; text-align: right; } input , p , label , h1 , h2 , h3 { font-family: 'Vazir'; } label{ cursor: pointer; font-size: 16.5px; } a{color: black;} header{ border-bottom: 1px solid #dfdfdf; padding-bottom: 8px; margin: 0 auto; } .rng-container{ width: 70%; margin: 30px auto; padding: 50px 40px 10px 40px; background: #ffffff; line-height: 23px; border: 1px solid #dfdfdf; border-radius: 10px 10px; } .key{ display: inline-block; margin-left: 10px; } .sub-title{ font-size: 16px; color: #555; font-weight: normal; } .title{ font-size: 25px; } .table-option .column{ padding: 5px 15px; display: inline-block; width: 35%; font-size: 17px; font-weight: lighter; } .btn{ margin: 50px 0; } .password-input { width: 70%; font-size: 15px; padding: 7px; line-height: 25px; color: #008040; } #password-length{ width: 80%; padding: 4px; box-sizing: border-box; } .generate-password { padding: 8px; font-size: 15px; cursor: pointer; line-height: 25px; text-align: center; color: #555; text-shadow: 1px 1px 0px white; box-shadow: 0 1px 3px 0px rgba(0,0,0,0.4); border: 1px #f8f8f8 solid; } .general-option{ ! width: 100%; } select{ width: 80%; border: 1px solid #ccc; font-size: 16px; height: 34px; text-transform: none; line-height: 23px; font-family: Vazir; } #tips{ text-align: right; padding: 10px 20px; border: 1px solid #4b99ff; background: #ebfaff; border-radius: 5px 5px; font-size: 15px; } #tips p{ font-weight: lighter; margin: 7px 0; } /*--------------- Responsive -------------------*/ @media screen and (max-width: 768px){ .table-option .column{ padding: 5px 15px; display: block; width: 90%; margin: auto; } } @media screen and (max-width: 310px) { .screen{ display: none; } header{ text-align: center; } .title{ text-align: center; display: block; font-size: 18.5px; } .key{ float: none; display: inline-block; } .table-option .column{ text-align: center; font-size: 14px; } .table-option .column:nth-child(2n){ text-align: right; } br{ display: none; } label{ font-size: 14px; } .generate-password{ width: 100%; } .password-input{ width: 100%; box-sizing: border-box; } } footer{ font-size: 14px; text-align: center; padding: 20px 50px 10px 50px; } footer a, footer a:link, footer a:visited { text-decoration: none; color: #0E62E4; } footer a.return-top { color: inherit; }