VelzA

cuma.css

Jul 12th, 2018
314
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 14.65 KB | None | 0 0
  1. @import url(https://fonts.googleapis.com/css?family=Titillium+Web|Orbitron);
  2.  
  3. @charset "UTF-8";
  4.  
  5. input[type=password],input[type=text] {
  6. padding: .35em;
  7. width: 95%;
  8. }
  9.  
  10. button,input[type=password],input[type=submit],input[type=text] {
  11. background-color: rgba(0,0,0,.5);
  12. color: #fff;
  13. font-size: 1em;
  14. margin: .25em 0 .5em 0;
  15. border: none;
  16. }
  17.  
  18. button,input[type=submit] {
  19. padding: .35em;
  20. padding: .5em 1em .5em 1em;
  21. transition: background-color .3s;
  22. text-transform: uppercase;
  23. font-family: Titillium Web,serif;
  24. }
  25.  
  26. button:after,input[type=submit]:after {
  27. content: " \BB";
  28. }
  29.  
  30. button.stationary,input[type=submit].stationary {
  31. text-transform: none;
  32. }
  33.  
  34. button.stationary:after,input[type=submit].stationary:after {
  35. content: "";
  36. }
  37.  
  38. button.stable,input[type=submit].stable {
  39. background-color: rgba(0,191,255,.667);
  40. }
  41.  
  42. button.stable:hover,input[type=submit].stable:hover {
  43. background-color: rgba(0,206,255,.667)!important;
  44. }
  45.  
  46. button:disabled,input[type=submit]:disabled {
  47. background-color: rgba(64,0,0,.55);
  48. pointer-events: none;
  49. }
  50.  
  51. button:not(:disabled):hover,input[type=submit]:not(:disabled):hover {
  52. background-color: #bf00ff;
  53. cursor: pointer;
  54. }
  55.  
  56. input,select {
  57. font: inherit;
  58. }
  59.  
  60. input[type=number],select {
  61. background-color: rgba(0,0,0,.5);
  62. color: #fff;
  63. font-size: 1em;
  64. margin: .25em 0 .5em 0;
  65. padding: .35em;
  66. border: none;
  67. }
  68.  
  69. label {
  70. display: block;
  71. font-weight: 700;
  72. }
  73.  
  74. .form-group.input-error input {
  75. background-color: rgba(64,0,0,.55);
  76. }
  77.  
  78. div.form-error {
  79. color: #ff0101;
  80. margin-bottom: 1em;
  81. }
  82.  
  83. body {
  84. color: #ddd;
  85. font-size: 18px;
  86. font-family: Titillium Web,sans-serif;
  87. }
  88.  
  89. h1,h2,h3,h4,h5,h6 {
  90. margin: 1.5rem 0;
  91. font-weight: 400;
  92. text-transform: uppercase;
  93. font-family: Orbitron,serif;
  94. }
  95.  
  96. h1.center,h2.center,h3.center,h4.center,h5.center,h6.center {
  97. text-align: center;
  98. }
  99.  
  100. h1,h2,h3,h4,h5,h6 {
  101. color: #fff;
  102. }
  103.  
  104. h1 a,h2 a,h3 a,h4 a,h5 a,h6 a {
  105. font-weight: 400;
  106. color: #fff;
  107. }
  108.  
  109. span.primary-accent {
  110. color: #e61587;
  111. }
  112.  
  113. h1 span.primary-accent {
  114. color: #fff;
  115. text-shadow: 0 0 4px #e61587,0 0 16px #e61587,0 0 36px #e61587,0 0 64px #e61587,0 0 100px #e61587;
  116. }
  117.  
  118. span.secondary-accent {
  119. color: #bf00ff;
  120. }
  121.  
  122. h1 span.secondary-accent {
  123. color: #fff;
  124. text-shadow: 0 0 4px #bf00ff,0 0 16px #bf00ff,0 0 36px #bf00ff,0 0 64px #bf00ff,0 0 100px #bf00ff;
  125. }
  126.  
  127. a {
  128. text-decoration: none;
  129. font-weight: 700;
  130. color: #bf00ff;
  131. }
  132.  
  133. a:active {
  134. color: inherit;
  135. }
  136.  
  137. a:hover {
  138. color: #730099;
  139. }
  140.  
  141. h1 {
  142. font-size: 3.5em;
  143. }
  144.  
  145. @media screen and (max-width:768px) {
  146. h1 {
  147. font-size: 10vw;
  148. }
  149. }
  150.  
  151. h2 {
  152. font-size: 2em;
  153. }
  154.  
  155. code {
  156. color: #bf00ff;
  157. background-color: rgba(0,0,0,.5);
  158. padding: .25rem;
  159. }
  160.  
  161. table {
  162. width: 100%;
  163. border-spacing: 0;
  164. }
  165.  
  166. th {
  167. text-align: left;
  168. }
  169.  
  170. tbody tr:nth-child(odd) {
  171. background-color: rgba(0,0,0,.5);
  172. }
  173.  
  174. .form-check-label,input[type=checkbox] {
  175. cursor: pointer;
  176. }
  177.  
  178. td,th {
  179. padding: .25em;
  180. }
  181.  
  182. td:first-child,th:first-child {
  183. padding-left: 1em;
  184. }
  185.  
  186. td:last-child,th:last-child {
  187. padding-right: 1em;
  188. }
  189.  
  190. .row {
  191. display: -webkit-box;
  192. display: -ms-flexbox;
  193. display: flex;
  194. -ms-flex-wrap: wrap;
  195. flex-wrap: wrap;
  196. }
  197.  
  198. @media (min-width:0px) {
  199. .col,.col-lg-1,.col-lg-2,.col-lg-3,.col-lg-4,.col-lg-5,.col-lg-6,.col-lg-7,.col-lg-8,.col-lg-9,.col-lg-10,.col-lg-11,.col-lg-12,.col-md-1,.col-md-2,.col-md-3,.col-md-4,.col-md-5,.col-md-6,.col-md-7,.col-md-8,.col-md-9,.col-md-10,.col-md-11,.col-md-12,.col-sm-1,.col-sm-2,.col-sm-3,.col-sm-4,.col-sm-5,.col-sm-6,.col-sm-7,.col-sm-8,.col-sm-9,.col-sm-10,.col-sm-11,.col-sm-12,.col-xs-1,.col-xs-2,.col-xs-3,.col-xs-4,.col-xs-5,.col-xs-6,.col-xs-7,.col-xs-8,.col-xs-9,.col-xs-10,.col-xs-11,.col-xs-12 {
  200. float: left;
  201. min-height: 1px;
  202. margin: 0 .5rem 0 .5rem;
  203. }
  204.  
  205. .col-xs-1 {
  206. -webkit-box-flex: 0;
  207. -ms-flex: 0 1 calc(100% * 1 / 12 - 1rem);
  208. flex: 0 1 calc(100% * 1 / 12 - 1rem);
  209. }
  210.  
  211. .col-xs-2 {
  212. -webkit-box-flex: 0;
  213. -ms-flex: 0 1 calc(100% * 2 / 12 - 1rem);
  214. flex: 0 1 calc(100% * 2 / 12 - 1rem);
  215. }
  216.  
  217. .col-xs-3 {
  218. -webkit-box-flex: 0;
  219. -ms-flex: 0 1 calc(100% * 3 / 12 - 1rem);
  220. flex: 0 1 calc(100% * 3 / 12 - 1rem);
  221. }
  222.  
  223. .col-xs-4 {
  224. -webkit-box-flex: 0;
  225. -ms-flex: 0 1 calc(100% * 4 / 12 - 1rem);
  226. flex: 0 1 calc(100% * 4 / 12 - 1rem);
  227. }
  228.  
  229. .col-xs-5 {
  230. -webkit-box-flex: 0;
  231. -ms-flex: 0 1 calc(100% * 5 / 12 - 1rem);
  232. flex: 0 1 calc(100% * 5 / 12 - 1rem);
  233. }
  234.  
  235. .col-xs-6 {
  236. -webkit-box-flex: 0;
  237. -ms-flex: 0 1 calc(100% * 6 / 12 - 1rem);
  238. flex: 0 1 calc(100% * 6 / 12 - 1rem);
  239. }
  240.  
  241. .col-xs-7 {
  242. -webkit-box-flex: 0;
  243. -ms-flex: 0 1 calc(100% * 7 / 12 - 1rem);
  244. flex: 0 1 calc(100% * 7 / 12 - 1rem);
  245. }
  246.  
  247. .col-xs-8 {
  248. -webkit-box-flex: 0;
  249. -ms-flex: 0 1 calc(100% * 8 / 12 - 1rem);
  250. flex: 0 1 calc(100% * 8 / 12 - 1rem);
  251. }
  252.  
  253. .col-xs-9 {
  254. -webkit-box-flex: 0;
  255. -ms-flex: 0 1 calc(100% * 9 / 12 - 1rem);
  256. flex: 0 1 calc(100% * 9 / 12 - 1rem);
  257. }
  258.  
  259. .col-xs-10 {
  260. -webkit-box-flex: 0;
  261. -ms-flex: 0 1 calc(100% * 10 / 12 - 1rem);
  262. flex: 0 1 calc(100% * 10 / 12 - 1rem);
  263. }
  264.  
  265. .col-xs-11 {
  266. -webkit-box-flex: 0;
  267. -ms-flex: 0 1 calc(100% * 11 / 12 - 1rem);
  268. flex: 0 1 calc(100% * 11 / 12 - 1rem);
  269. }
  270.  
  271. .col-xs-12 {
  272. -webkit-box-flex: 0;
  273. -ms-flex: 0 1 calc(100% * 12 / 12 - 1rem);
  274. flex: 0 1 calc(100% * 12 / 12 - 1rem);
  275. }
  276. }
  277.  
  278. @media (min-width:768px) {
  279. .col,.col-lg-1,.col-lg-2,.col-lg-3,.col-lg-4,.col-lg-5,.col-lg-6,.col-lg-7,.col-lg-8,.col-lg-9,.col-lg-10,.col-lg-11,.col-lg-12,.col-md-1,.col-md-2,.col-md-3,.col-md-4,.col-md-5,.col-md-6,.col-md-7,.col-md-8,.col-md-9,.col-md-10,.col-md-11,.col-md-12,.col-sm-1,.col-sm-2,.col-sm-3,.col-sm-4,.col-sm-5,.col-sm-6,.col-sm-7,.col-sm-8,.col-sm-9,.col-sm-10,.col-sm-11,.col-sm-12,.col-xs-1,.col-xs-2,.col-xs-3,.col-xs-4,.col-xs-5,.col-xs-6,.col-xs-7,.col-xs-8,.col-xs-9,.col-xs-10,.col-xs-11,.col-xs-12 {
  280. float: left;
  281. min-height: 1px;
  282. margin: 0 .5rem 0 .5rem;
  283. }
  284.  
  285. .col-sm-1 {
  286. -webkit-box-flex: 0;
  287. -ms-flex: 0 1 calc(100% * 1 / 12 - 1rem);
  288. flex: 0 1 calc(100% * 1 / 12 - 1rem);
  289. }
  290.  
  291. .col-sm-2 {
  292. -webkit-box-flex: 0;
  293. -ms-flex: 0 1 calc(100% * 2 / 12 - 1rem);
  294. flex: 0 1 calc(100% * 2 / 12 - 1rem);
  295. }
  296.  
  297. .col-sm-3 {
  298. -webkit-box-flex: 0;
  299. -ms-flex: 0 1 calc(100% * 3 / 12 - 1rem);
  300. flex: 0 1 calc(100% * 3 / 12 - 1rem);
  301. }
  302.  
  303. .col-sm-4 {
  304. -webkit-box-flex: 0;
  305. -ms-flex: 0 1 calc(100% * 4 / 12 - 1rem);
  306. flex: 0 1 calc(100% * 4 / 12 - 1rem);
  307. }
  308.  
  309. .col-sm-5 {
  310. -webkit-box-flex: 0;
  311. -ms-flex: 0 1 calc(100% * 5 / 12 - 1rem);
  312. flex: 0 1 calc(100% * 5 / 12 - 1rem);
  313. }
  314.  
  315. .col-sm-6 {
  316. -webkit-box-flex: 0;
  317. -ms-flex: 0 1 calc(100% * 6 / 12 - 1rem);
  318. flex: 0 1 calc(100% * 6 / 12 - 1rem);
  319. }
  320.  
  321. .col-sm-7 {
  322. -webkit-box-flex: 0;
  323. -ms-flex: 0 1 calc(100% * 7 / 12 - 1rem);
  324. flex: 0 1 calc(100% * 7 / 12 - 1rem);
  325. }
  326.  
  327. .col-sm-8 {
  328. -webkit-box-flex: 0;
  329. -ms-flex: 0 1 calc(100% * 8 / 12 - 1rem);
  330. flex: 0 1 calc(100% * 8 / 12 - 1rem);
  331. }
  332.  
  333. .col-sm-9 {
  334. -webkit-box-flex: 0;
  335. -ms-flex: 0 1 calc(100% * 9 / 12 - 1rem);
  336. flex: 0 1 calc(100% * 9 / 12 - 1rem);
  337. }
  338.  
  339. .col-sm-10 {
  340. -webkit-box-flex: 0;
  341. -ms-flex: 0 1 calc(100% * 10 / 12 - 1rem);
  342. flex: 0 1 calc(100% * 10 / 12 - 1rem);
  343. }
  344.  
  345. .col-sm-11 {
  346. -webkit-box-flex: 0;
  347. -ms-flex: 0 1 calc(100% * 11 / 12 - 1rem);
  348. flex: 0 1 calc(100% * 11 / 12 - 1rem);
  349. }
  350.  
  351. .col-sm-12 {
  352. -webkit-box-flex: 0;
  353. -ms-flex: 0 1 calc(100% * 12 / 12 - 1rem);
  354. flex: 0 1 calc(100% * 12 / 12 - 1rem);
  355. }
  356. }
  357.  
  358. @media (min-width:1042px) {
  359. .col,.col-lg-1,.col-lg-2,.col-lg-3,.col-lg-4,.col-lg-5,.col-lg-6,.col-lg-7,.col-lg-8,.col-lg-9,.col-lg-10,.col-lg-11,.col-lg-12,.col-md-1,.col-md-2,.col-md-3,.col-md-4,.col-md-5,.col-md-6,.col-md-7,.col-md-8,.col-md-9,.col-md-10,.col-md-11,.col-md-12,.col-sm-1,.col-sm-2,.col-sm-3,.col-sm-4,.col-sm-5,.col-sm-6,.col-sm-7,.col-sm-8,.col-sm-9,.col-sm-10,.col-sm-11,.col-sm-12,.col-xs-1,.col-xs-2,.col-xs-3,.col-xs-4,.col-xs-5,.col-xs-6,.col-xs-7,.col-xs-8,.col-xs-9,.col-xs-10,.col-xs-11,.col-xs-12 {
  360. float: left;
  361. min-height: 1px;
  362. margin: 0 .5rem 0 .5rem;
  363. }
  364.  
  365. .col-md-1 {
  366. -webkit-box-flex: 0;
  367. -ms-flex: 0 1 calc(100% * 1 / 12 - 1rem);
  368. flex: 0 1 calc(100% * 1 / 12 - 1rem);
  369. }
  370.  
  371. .col-md-2 {
  372. -webkit-box-flex: 0;
  373. -ms-flex: 0 1 calc(100% * 2 / 12 - 1rem);
  374. flex: 0 1 calc(100% * 2 / 12 - 1rem);
  375. }
  376.  
  377. .col-md-3 {
  378. -webkit-box-flex: 0;
  379. -ms-flex: 0 1 calc(100% * 3 / 12 - 1rem);
  380. flex: 0 1 calc(100% * 3 / 12 - 1rem);
  381. }
  382.  
  383. .col-md-4 {
  384. -webkit-box-flex: 0;
  385. -ms-flex: 0 1 calc(100% * 4 / 12 - 1rem);
  386. flex: 0 1 calc(100% * 4 / 12 - 1rem);
  387. }
  388.  
  389. .col-md-5 {
  390. -webkit-box-flex: 0;
  391. -ms-flex: 0 1 calc(100% * 5 / 12 - 1rem);
  392. flex: 0 1 calc(100% * 5 / 12 - 1rem);
  393. }
  394.  
  395. .col-md-6 {
  396. -webkit-box-flex: 0;
  397. -ms-flex: 0 1 calc(100% * 6 / 12 - 1rem);
  398. flex: 0 1 calc(100% * 6 / 12 - 1rem);
  399. }
  400.  
  401. .col-md-7 {
  402. -webkit-box-flex: 0;
  403. -ms-flex: 0 1 calc(100% * 7 / 12 - 1rem);
  404. flex: 0 1 calc(100% * 7 / 12 - 1rem);
  405. }
  406.  
  407. .col-md-8 {
  408. -webkit-box-flex: 0;
  409. -ms-flex: 0 1 calc(100% * 8 / 12 - 1rem);
  410. flex: 0 1 calc(100% * 8 / 12 - 1rem);
  411. }
  412.  
  413. .col-md-9 {
  414. -webkit-box-flex: 0;
  415. -ms-flex: 0 1 calc(100% * 9 / 12 - 1rem);
  416. flex: 0 1 calc(100% * 9 / 12 - 1rem);
  417. }
  418.  
  419. .col-md-10 {
  420. -webkit-box-flex: 0;
  421. -ms-flex: 0 1 calc(100% * 10 / 12 - 1rem);
  422. flex: 0 1 calc(100% * 10 / 12 - 1rem);
  423. }
  424.  
  425. .col-md-11 {
  426. -webkit-box-flex: 0;
  427. -ms-flex: 0 1 calc(100% * 11 / 12 - 1rem);
  428. flex: 0 1 calc(100% * 11 / 12 - 1rem);
  429. }
  430.  
  431. .col-md-12 {
  432. -webkit-box-flex: 0;
  433. -ms-flex: 0 1 calc(100% * 12 / 12 - 1rem);
  434. flex: 0 1 calc(100% * 12 / 12 - 1rem);
  435. }
  436. }
  437.  
  438. @media (min-width:1200px) {
  439. .col,.col-lg-1,.col-lg-2,.col-lg-3,.col-lg-4,.col-lg-5,.col-lg-6,.col-lg-7,.col-lg-8,.col-lg-9,.col-lg-10,.col-lg-11,.col-lg-12,.col-md-1,.col-md-2,.col-md-3,.col-md-4,.col-md-5,.col-md-6,.col-md-7,.col-md-8,.col-md-9,.col-md-10,.col-md-11,.col-md-12,.col-sm-1,.col-sm-2,.col-sm-3,.col-sm-4,.col-sm-5,.col-sm-6,.col-sm-7,.col-sm-8,.col-sm-9,.col-sm-10,.col-sm-11,.col-sm-12,.col-xs-1,.col-xs-2,.col-xs-3,.col-xs-4,.col-xs-5,.col-xs-6,.col-xs-7,.col-xs-8,.col-xs-9,.col-xs-10,.col-xs-11,.col-xs-12 {
  440. float: left;
  441. min-height: 1px;
  442. margin: 0 .5rem 0 .5rem;
  443. }
  444.  
  445. .col-lg-1 {
  446. -webkit-box-flex: 0;
  447. -ms-flex: 0 1 calc(100% * 1 / 12 - 1rem);
  448. flex: 0 1 calc(100% * 1 / 12 - 1rem);
  449. }
  450.  
  451. .col-lg-2 {
  452. -webkit-box-flex: 0;
  453. -ms-flex: 0 1 calc(100% * 2 / 12 - 1rem);
  454. flex: 0 1 calc(100% * 2 / 12 - 1rem);
  455. }
  456.  
  457. .col-lg-3 {
  458. -webkit-box-flex: 0;
  459. -ms-flex: 0 1 calc(100% * 3 / 12 - 1rem);
  460. flex: 0 1 calc(100% * 3 / 12 - 1rem);
  461. }
  462.  
  463. .col-lg-4 {
  464. -webkit-box-flex: 0;
  465. -ms-flex: 0 1 calc(100% * 4 / 12 - 1rem);
  466. flex: 0 1 calc(100% * 4 / 12 - 1rem);
  467. }
  468.  
  469. .col-lg-5 {
  470. -webkit-box-flex: 0;
  471. -ms-flex: 0 1 calc(100% * 5 / 12 - 1rem);
  472. flex: 0 1 calc(100% * 5 / 12 - 1rem);
  473. }
  474.  
  475. .col-lg-6 {
  476. -webkit-box-flex: 0;
  477. -ms-flex: 0 1 calc(100% * 6 / 12 - 1rem);
  478. flex: 0 1 calc(100% * 6 / 12 - 1rem);
  479. }
  480.  
  481. .col-lg-7 {
  482. -webkit-box-flex: 0;
  483. -ms-flex: 0 1 calc(100% * 7 / 12 - 1rem);
  484. flex: 0 1 calc(100% * 7 / 12 - 1rem);
  485. }
  486.  
  487. .col-lg-8 {
  488. -webkit-box-flex: 0;
  489. -ms-flex: 0 1 calc(100% * 8 / 12 - 1rem);
  490. flex: 0 1 calc(100% * 8 / 12 - 1rem);
  491. }
  492.  
  493. .col-lg-9 {
  494. -webkit-box-flex: 0;
  495. -ms-flex: 0 1 calc(100% * 9 / 12 - 1rem);
  496. flex: 0 1 calc(100% * 9 / 12 - 1rem);
  497. }
  498.  
  499. .col-lg-10 {
  500. -webkit-box-flex: 0;
  501. -ms-flex: 0 1 calc(100% * 10 / 12 - 1rem);
  502. flex: 0 1 calc(100% * 10 / 12 - 1rem);
  503. }
  504.  
  505. .col-lg-11 {
  506. -webkit-box-flex: 0;
  507. -ms-flex: 0 1 calc(100% * 11 / 12 - 1rem);
  508. flex: 0 1 calc(100% * 11 / 12 - 1rem);
  509. }
  510.  
  511. .col-lg-12 {
  512. -webkit-box-flex: 0;
  513. -ms-flex: 0 1 calc(100% * 12 / 12 - 1rem);
  514. flex: 0 1 calc(100% * 12 / 12 - 1rem);
  515. }
  516. }
  517.  
  518. .valign-center {
  519. -ms-flex-item-align: center;
  520. -ms-grid-row-align: center;
  521. align-self: center;
  522. }
  523.  
  524. div#navigation {
  525. padding: 1em;
  526. text-align-last: justify;
  527. }
  528.  
  529. div#navigation a.item {
  530. color: #fff;
  531. text-transform: uppercase;
  532. font-family: Orbitron,serif!important;
  533. margin-right: 1em;
  534. }
  535.  
  536. div#navigation a.item:hover {
  537. color: #ccc;
  538. }
  539.  
  540. div#navigation a.item:hover span.accent {
  541. color: #890c50;
  542. }
  543.  
  544. div#navigation a.item span.accent {
  545. color: #e61587;
  546. }
  547.  
  548. div#navigation span.item {
  549. color: #fff;
  550. text-transform: uppercase;
  551. font-family: Orbitron,serif!important;
  552. font-weight: 700;
  553. margin-right: 1em;
  554. }
  555.  
  556. div#navigation span.item span.accent {
  557. color: #e61587;
  558. }
  559.  
  560. div#navigation span.item:hover {
  561. cursor: default;
  562. }
  563.  
  564. div#navigation div.right-nav .item:last-child {
  565. margin-right: 0;
  566. }
  567.  
  568. div#navigation div.left-nav,div#navigation div.right-nav {
  569. display: inline-block;
  570. text-align-last: left;
  571. }
  572.  
  573. /*div#nav {
  574. overflow-y: auto;
  575. min-width: min-content;
  576.  
  577. .item {
  578. color: white;
  579. text-decoration: none;
  580. display: block;
  581. font-weight: bold;
  582. font-family: "Orbitron", sans-serif;
  583. text-transform: uppercase;
  584. font-size: 1.2em;
  585. margin-top: 0;
  586. }
  587.  
  588. .item ~ .item {
  589. margin-top: 1.5rem;
  590. }
  591.  
  592. }
  593. */html {
  594. min-height: 100vh;
  595. }
  596.  
  597. body {
  598. margin: 0;
  599. background: radial-gradient(ellipse at bottom,#121050 0,#181820 100%);
  600. min-height: 100%;
  601. }
  602.  
  603. canvas#background {
  604. position: absolute;
  605. top: 0;
  606. left: 0;
  607. z-index: -1;
  608. }
  609.  
  610. div#wrapper {
  611. display: -webkit-box;
  612. display: -ms-flexbox;
  613. display: flex;
  614. -webkit-box-orient: vertical;
  615. -webkit-box-direction: normal;
  616. -ms-flex-flow: column;
  617. flex-flow: column;
  618. min-height: 100vh;
  619. }
  620.  
  621. div#content,div#navigation {
  622. margin: .75rem;
  623. padding: 1rem;
  624. box-sizing: border-box;
  625. background-color: rgba(0,0,0,.5);
  626. }
  627.  
  628. @media screen and (min-width:1042px) {
  629. div#content,div#navigation {
  630. margin: 1.4rem;
  631. padding: 1rem 2rem;
  632. }
  633. }
  634.  
  635. div#content {
  636. margin-top: 0;
  637. -webkit-box-flex: 1;
  638. -ms-flex: 1;
  639. flex: 1;
  640. }
  641.  
  642. /* Large desktops. */
  643. /* Medium desktops. */
  644. /* Small mode */
  645. /* Tablets. */@media screen and (min-width:768px) and (max-width:1041px) {
  646. nav {
  647. display: -webkit-box;
  648. display: -ms-flexbox;
  649. display: flex;
  650. -webkit-box-pack: center;
  651. -ms-flex-pack: center;
  652. justify-content: center;
  653. }
  654.  
  655. #logo {
  656. height: 410px;
  657. }
  658.  
  659. #links {
  660. margin-right: -1rem;
  661. margin-top: 1rem;
  662. margin-bottom: 1rem;
  663. }
  664.  
  665. #links .item:first-child {
  666. padding-left: 0;
  667. }
  668.  
  669. #links .item:nth-child(2) {
  670. padding-left: 1.77892333rem;
  671. }
  672.  
  673. #links .item:nth-child(3) {
  674. padding-left: 3.20550908rem;
  675. }
  676.  
  677. #links .item:nth-child(4),#links .item:nth-child(5) {
  678. padding-left: 3.99720444rem;
  679. }
  680.  
  681. #links .item:nth-child(6) {
  682. padding-left: 3.20550908rem;
  683. }
  684.  
  685. #links .item:nth-child(7) {
  686. padding-left: 1.77892333rem;
  687. }
  688.  
  689. #links .item:nth-child(8) {
  690. padding-left: 0;
  691. }
  692. }
  693.  
  694. /* Phones. */@media screen and (max-width:767px) {
  695. #logo {
  696. width: 200px;
  697. margin-bottom: 2rem;
  698. }
  699.  
  700. #nav .item {
  701. text-align: center;
  702. }
  703. }
Advertisement
Add Comment
Please, Sign In to add comment