Advertisement
Guest User

Untitled

a guest
Jan 14th, 2018
181
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 25.35 KB | None | 0 0
  1. /*@media only screen and (orientation: landscape) and (max-width: 1000px) {
  2. #container {
  3. display: none !important;
  4. }
  5.  
  6. #use-portrait {
  7. visibility: visible !important;
  8. }
  9. }
  10.  
  11. @media only screen and (min-height: 990px) and (max-height: 1100px) and (min-width: 1000px) {
  12. #about {
  13. top: 17% !important;
  14. }
  15. }
  16.  
  17. @media only screen and (min-height: 1100px) and (max-height: 1200px) and (min-width: 1000px) {
  18. #about {
  19. top: 15% !important;
  20. }
  21. #hover {
  22. top: 30% !important;
  23. }
  24. }
  25.  
  26. @media only screen and (min-height: 950px) and (max-height: 1000px) and (min-width: 1000px) {
  27. #icons {
  28. margin-top: 90px;
  29. }
  30.  
  31. #canvas {
  32. bottom: 65% !important;
  33. }
  34. }
  35.  
  36. @media only screen and (min-height: 915px) and (max-height: 940px) and (min-width: 1000px) {
  37. #icons {
  38. margin-top: 90px;
  39. }
  40.  
  41. #canvas {
  42. bottom: 63% !important;
  43. }
  44. }
  45.  
  46. @media only screen and (min-height: 850px) and (max-height: 915px) and (min-width: 1000px) {
  47. #icons {
  48. margin-top: 80px !important;
  49. }
  50.  
  51. #canvas {
  52. bottom: 63% !important;
  53. }
  54. }
  55.  
  56. @media only screen and (min-height: 750px) and (max-height: 850px) and (min-width: 1000px) {
  57. #icons {
  58. margin-top: 70px !important;
  59. }
  60.  
  61. #canvas {
  62. bottom: 60% !important;
  63. }
  64. #hover {
  65. margin-top: 60px !important;
  66. }
  67. }
  68.  
  69. @media only screen and (min-height: 700px) and (max-height: 750px) and (min-width: 1000px) {
  70. #icons {
  71. margin-top: 10px !important;
  72. }
  73.  
  74. #canvas {
  75. bottom: 58% !important;
  76. }
  77. }
  78.  
  79. @media only screen and (min-height: 650px) and (max-height: 700px) and (min-width: 1000px) {
  80. #icons {
  81. margin-top: 10px !important;
  82. }
  83.  
  84. #canvas {
  85. bottom: 58% !important;
  86. }
  87. }
  88.  
  89. @media only screen and (min-height: 600px) and (max-height: 650px) and (min-width: 1000px) {
  90. #icons {
  91. margin-top: -20px !important;
  92. }
  93.  
  94. #canvas {
  95. bottom: 54% !important;
  96. }
  97. }
  98.  
  99. @media only screen and (min-height: 550px) and (max-height: 570px) and (min-width: 1000px) {
  100. #icons {
  101. margin-top: -15px !important;
  102. font-size: 7rem;
  103. }
  104.  
  105. #canvas {
  106. bottom: 54% !important;
  107. }
  108. }
  109.  
  110. @media only screen and (min-height: 570px) and (max-height: 600px) and (min-width: 1000px) {
  111. #icons {
  112. margin-top: -20px !important;
  113. font-size: 7rem;
  114. }
  115.  
  116. #canvas {
  117. bottom: 54% !important;
  118. }
  119. }
  120.  
  121. @media only screen and (min-height: 500px) and (max-height: 550px) and (min-width: 1000px) {
  122. #icons {
  123. margin-top: -40px !important;
  124. font-size: 7rem;
  125. }
  126.  
  127. #canvas {
  128. bottom: 52% !important;
  129. }
  130. }
  131.  
  132. @media only screen and (min-height: 450px) and (max-height: 500px) and (min-width: 1000px) {
  133. #icons {
  134. margin-top: -45px !important;
  135. font-size: 7rem;
  136. }
  137.  
  138. #canvas {
  139. bottom: 47% !important;
  140. }
  141.  
  142. #about {
  143. top: 24% !important;
  144. }
  145. }
  146.  
  147. @media only screen and (max-height: 450px) and (min-width: 1000px) {
  148. #container {
  149. display: none;
  150. }
  151.  
  152. #use-portrait {
  153. visibility: visible;
  154. }
  155. }
  156.  
  157. @media only screen and (max-height: 800px) {
  158. hr {
  159. display: none;
  160. }
  161. }
  162.  
  163. @media only screen and (min-height: 540px) and (max-height: 640px) and (min-width: 1000px) {
  164. #central-about {
  165. margin-top: 160px;
  166. }
  167. }
  168.  
  169. @media only screen and (min-height: 640px) and (max-height: 680px) and (min-width: 1000px) {
  170. #central-about {
  171. margin-top: 180px;
  172. }
  173.  
  174. #hover {
  175. top: 44% !important;
  176. }
  177. }
  178.  
  179. @media only screen and (min-height: 680px) and (max-height: 750px) and (min-width: 1000px) {
  180. #central-about {
  181. margin-top: 180px;
  182. }
  183.  
  184. #hover {
  185. top: 40% !important;
  186. }
  187. }
  188.  
  189. @media only screen and (min-height: 450px) and (max-height: 540px) and (min-width: 1000px) and (max-width: 1350px) {
  190. #hover {
  191. top: 57.5% !important;
  192. }
  193. }
  194.  
  195. @media only screen and (min-height: 770px) and (max-height: 1200px) and (min-width: 1001px) and (max-width: 1200px) {
  196. #about {
  197. top: 11.5% !important;
  198. }
  199. }
  200.  
  201. @media only screen and (min-height: 451px) and (max-height: 500px) and (min-width: 1000px) {
  202. #central-about i,
  203. #central-about img {
  204. margin-top: -20px;
  205. }
  206. }
  207.  
  208. @media only screen and (min-height: 540px) and (max-height: 637px) {
  209. #hover{
  210. top: 44% !important;
  211. }
  212. }
  213.  
  214. @media only screen and (max-width: 1024px) {
  215. #header {
  216. width: 1000px;
  217. }
  218.  
  219. ul.social {
  220. right: 3%;
  221. }
  222.  
  223. #bara-wrap {
  224. width: 1000px;
  225. }
  226.  
  227. #central-about {
  228. width: 1000px;
  229. }
  230.  
  231. #dreamer {
  232. margin-left: 2rem;
  233. }
  234.  
  235. #about {
  236. top: 35%;
  237. }
  238.  
  239. 1 .dumbbell {
  240. width: 12rem;
  241. position: relative;
  242. bottom: 20%;
  243. }
  244.  
  245. #gym {
  246. margin-left: 3rem;
  247. }
  248.  
  249. #football {
  250. margin-left: 3rem;
  251. }
  252.  
  253. #health {
  254. margin-left: 3rem;
  255. }
  256.  
  257. #code {
  258. margin-left: 3rem;
  259. }
  260.  
  261. #tech {
  262. margin-left: 3rem;
  263. }
  264.  
  265. #camera {
  266. margin-left: 3rem;
  267. }
  268.  
  269. #perfectionist {
  270. margin-left: 3rem;
  271. }
  272. }
  273.  
  274. @media only screen and (min-width:1153px) and (max-width: 1366px) {
  275. #button-wrap {
  276. margin-top: 40px;
  277. }
  278.  
  279. #intro {
  280. font-size: 220px;
  281. }
  282.  
  283. .intro {
  284. font-size: 22px;
  285. max-width: 600px;
  286. }
  287.  
  288. #more {
  289. font-size: 2rem;
  290. padding: 8px;
  291. }
  292.  
  293. #hr {
  294. bottom: 8.5%;
  295. }
  296.  
  297. hr {
  298. max-width: 80%;
  299. }
  300.  
  301. #more {
  302. padding: 12.5px;
  303. }
  304. }
  305.  
  306. @media only screen and (min-width: 1200px) and (max-width: 1366px) and (min-height: 850px) {
  307. #central {
  308. margin-top: 250px;
  309. }
  310. }
  311.  
  312. @media only screen and (min-width: 1200px) and (max-width: 1366px) and (min-height: 805px) {
  313. #hover {
  314. top: 35%;
  315. }
  316.  
  317. #about {
  318. top: 22%;
  319. }
  320.  
  321. #central-about i {
  322. margin-top: 50px;
  323. }
  324.  
  325. .dumbbell {
  326. top: 15%;
  327. }
  328.  
  329. .hov {
  330. top: 15%;
  331. }
  332.  
  333. #trying {
  334. top: 20%;
  335. }
  336. }
  337.  
  338. @media only screen and (min-width:1401px) and (max-width:1601px) {
  339. #central {
  340. margin-top: 150px;
  341. }
  342.  
  343. #canvas {
  344. bottom: 50%;
  345. left: 27.5%;
  346. }
  347.  
  348. .trying {
  349. top: 28%;
  350. left: 30%;
  351. }
  352.  
  353. #hover {
  354. top: 42%;
  355. }
  356.  
  357. #about {
  358. left: 3%;
  359. }
  360.  
  361. #canvas {
  362. bottom: 55%;
  363. }
  364. }
  365.  
  366. @media only screen and (max-width: 1024px) {
  367. #canvas {
  368. bottom: 50%;
  369. left: 21%;
  370. }
  371.  
  372. #central-skills {
  373. width: 1000px;
  374. }
  375.  
  376. .websites {
  377. left: 40%;
  378. }
  379.  
  380. #skills {
  381. width: 1000px;
  382. height: 100%;
  383. }
  384.  
  385. #icons {
  386. margin-top: 19.5vw !important;
  387. font-size: 6.5rem;
  388. }
  389.  
  390. .trying {
  391. top: 28%;
  392. left: 24%;
  393. }
  394.  
  395. .list-adv {
  396. padding: 30px;
  397. }
  398.  
  399. #websites ul {
  400. margin-left: 20px;
  401. }
  402.  
  403. .scratch {
  404. padding: 32px 18px 30px 18px;
  405. font-size: 22px !important;
  406. }
  407.  
  408. #websites {
  409. margin-left: 0px;
  410. }
  411.  
  412. #contact {
  413. margin-top: 200px;
  414. }
  415. }
  416.  
  417. @media only screen and (min-width: 1100px) and (max-width: 1440px) {
  418. #canvas {
  419. bottom: 52%;
  420. left: 24.5%;
  421. }
  422.  
  423. #central-skills {
  424. width: 1000px;
  425. }
  426.  
  427. #skills {
  428. width: 1000px;
  429. }
  430.  
  431. .trying {
  432. top: 24%;
  433. left: 26%;
  434. }
  435.  
  436. .list-adv {
  437. padding: 30px;
  438. }
  439.  
  440. #websites ul {
  441. margin-left: 20px;
  442. }
  443.  
  444. .scratch {
  445. padding: 32px 18px 30px 18px;
  446. font-size: 22px !important;
  447. }
  448.  
  449. #websites {
  450. margin-left: 10px;
  451. }
  452.  
  453. #contact {
  454. margin-top: 200px;
  455. }
  456.  
  457. #hover {
  458. top: 45%;
  459. }
  460.  
  461. #button-wrap {
  462. margin-top: 2.5vw;
  463. }
  464.  
  465. .description1,
  466. .description2,
  467. .description3,
  468. .description4,
  469. .description5,
  470. .description6,
  471. .description7,
  472. .description8 {
  473. font-size: 3.5rem;
  474. }
  475. }
  476.  
  477. @media only screen and (min-width: 768px) and (max-width: 1000px) and (min-height: 1000px) and (max-height: 1050px) {
  478. #central {
  479. margin-top: 30vw;
  480. width: 810px !important;
  481. }
  482.  
  483. #header {
  484. width: 810px !important;
  485. }
  486.  
  487. #bara-wrap {
  488. width: 810px !important;
  489. }
  490.  
  491. #central-about {
  492. width: 810px !important;
  493. }
  494.  
  495. #central-skills {
  496. width: 810px !important;
  497. }
  498.  
  499. #about {
  500. left: 16.5%;
  501. }
  502.  
  503. #hover {
  504. left: 50%;
  505. top: 20%;
  506. }
  507.  
  508. #more {
  509. margin-top: 80px;
  510. }
  511.  
  512. .description1,
  513. .description2,
  514. .description3,
  515. .description4,
  516. .description5,
  517. .description6,
  518. .description7,
  519. .description8 {
  520. width: 1000px !important;
  521. margin-left: 100px;
  522. margin-top: 200px;
  523. font-size: 4.7rem;
  524. line-height: 4.7rem;
  525. }
  526.  
  527. #canvas {
  528. bottom: 70% !important;
  529. }
  530.  
  531. .trying {
  532. top: 15% !important;
  533. }
  534.  
  535. #icons {
  536. margin-top: 40vw !important;
  537. font-size: 8rem !important;
  538. }
  539.  
  540. .fa-js-square {
  541. left: 67%;
  542. }
  543.  
  544. #websites ul {
  545. margin-left: 100px;
  546. display: block;
  547. }
  548.  
  549. #websites li {
  550. font-size: 2.7rem;
  551. }
  552.  
  553. .scratch {
  554. font-size: 2.7rem;
  555. }
  556. }
  557.  
  558. @media only screen and (min-width: 1200px) and (max-width: 1300px) and (min-height: 769px) and (max-height: 980px) {
  559. #canvas {
  560. bottom: 60%;
  561. }
  562.  
  563. #icons {
  564. margin-top: 10vw;
  565. }
  566.  
  567. .trying {
  568. left: 26.5%;
  569. top: 21%;
  570. }
  571.  
  572. #central {
  573. margin-top: 175px;
  574. }
  575.  
  576. #button-wrap {
  577. margin-top: 4vw;
  578. }
  579.  
  580. #hover {
  581. top: 38%;
  582. }
  583. }
  584.  
  585. @media only screen and (min-width: 1200px) and (max-width: 1300px) and (min-height: 980px) and (max-height: 1100px) {
  586. #canvas {
  587. bottom: 61%;
  588. }
  589.  
  590. .trying {
  591. left: 26%;
  592. }
  593.  
  594. #hover {
  595. top: 40%;
  596. }
  597. }
  598.  
  599. @media only screen and (min-width: 1370px) and (max-width: 1499px) {
  600. #canvas {
  601. bottom: 60%;
  602. left: 30%;
  603. }
  604.  
  605. .trying {
  606. left: 31%;
  607. top: 22% !important;
  608. }
  609.  
  610. #hover {
  611. top: 37.5% !important;
  612. }
  613.  
  614. #central {
  615. margin-top: 180px;
  616. }
  617. }
  618.  
  619. @media only screen and (min-width: 1500px) and (max-width: 1650px) {
  620. #canvas {
  621. bottom: 60%;
  622. left: 30%;
  623. }
  624.  
  625. .trying {
  626. top: 19.5%;
  627. left: 32%;
  628. }
  629.  
  630. #hover {
  631. top: 36%;
  632. }
  633.  
  634. #about {
  635. top: 22%;
  636. }
  637.  
  638. #hover {
  639. margin-top: 10px;
  640. }
  641. }
  642.  
  643. @media only screen and (min-width: 1300px) and (max-width: 1400px) {
  644. #icons {
  645. margin-top: 8vw;
  646. }
  647.  
  648. .trying {
  649. left: 28%;
  650. top: 23%;
  651. }
  652.  
  653. #canvas {
  654. left: 27%;
  655. top: 10%;
  656. }
  657.  
  658. #central {
  659. margin-top: 12vw;
  660. }
  661. }
  662.  
  663. @media only screen and (min-width: 1000px) and (max-width: 1050px) and (min-height: 500px) and (max-height: 1000px) {
  664. #button-wrap {
  665. margin-top: 35px;
  666. }
  667.  
  668. #intro {
  669. font-size: 220px;
  670. }
  671.  
  672. #icons {
  673. margin-top: 12vw;
  674. }
  675.  
  676. .intro {
  677. font-size: 22px;
  678. max-width: 600px;
  679. }
  680.  
  681. #more {
  682. font-size: 2rem;
  683. padding: 8px;
  684. }
  685.  
  686. #hr {
  687. bottom: 6%;
  688. }
  689.  
  690. hr {
  691. max-width: 90%;
  692. }
  693.  
  694. #more {
  695. padding: 12.5px;
  696. }
  697.  
  698. #hover {
  699. top: 45%;
  700. }
  701.  
  702. #about {
  703. top: 40%;
  704. }
  705.  
  706. .trying {
  707. top: 25%;
  708. }
  709. }
  710.  
  711. @media only screen and (min-width:1300px) and (max-width: 1366px) {
  712. #hover {
  713. top: 39%;
  714. left: 44%;
  715. }
  716.  
  717. #dreamer {
  718. margin-left: 0;
  719. }
  720. }
  721.  
  722. @media only screen and (min-width:1025px) and (max-width: 1153px) {
  723. #button-wrap {
  724. margin-top: 2.5vw;
  725. }
  726.  
  727. li.x1 {
  728. padding: 0;
  729. }
  730.  
  731. li.x2 {
  732. padding: 0;
  733. }
  734.  
  735. li.x3 {
  736. margin-left: 2em;
  737. }
  738.  
  739. #about {
  740. top: 35%;
  741. }
  742.  
  743. #hover {
  744. top: 39%;
  745. }
  746.  
  747. .trying {
  748. left: 27%;
  749. }
  750. }
  751.  
  752. @media only screen and (min-width: 1153px) and (max-width: 1200px) {
  753. #button-wrap {
  754. margin-top: 24px;
  755. }
  756.  
  757. #intro {
  758. font-size: 180px;
  759. }
  760.  
  761. .intro {
  762. font-size: 20px;
  763. max-width: 600px;
  764. }
  765.  
  766. #more {
  767. font-size: 2rem;
  768. padding: 8px;
  769. }
  770.  
  771. #hr {
  772. bottom: 6%;
  773. }
  774.  
  775. hr {
  776. max-width: 80%;
  777. }
  778.  
  779. #more {
  780. padding: 9.5px;
  781. }
  782.  
  783. #hover {
  784. top: 36%;
  785. }
  786.  
  787. #central {
  788. margin-top: 18vw;
  789. }
  790.  
  791. #canvas {
  792. top: 7%;
  793. }
  794.  
  795. .trying {
  796. top: 25%;
  797. }
  798.  
  799. #contact {
  800. margin-top: 9vw;
  801. }
  802. }
  803.  
  804. @media only screen and (min-width:1401px) and (max-width: 1599px) {
  805. .trying {
  806. top: 20%;
  807. }
  808.  
  809. #hover {
  810. top: 40%;
  811. }
  812.  
  813. #icons {
  814. margin-top: 10vw;
  815. }
  816. }
  817.  
  818. @media only screen and (min-width: 1500px) and (max-width: 1700px) and (min-height: 900px) and (max-height:1100px) {
  819. #canvas {
  820. bottom: 63%;
  821. left: 30%;
  822. }
  823.  
  824. #central {
  825. margin-top: 200px;
  826. }
  827. }
  828.  
  829. @media only screen and (min-width: 1601px) and (max-width: 1700px) and (min-height: 900px) and (max-height: 1100px) {
  830. #central {
  831. margin-top: 230px;
  832. }
  833.  
  834. #about {
  835. left: 3%;
  836. }
  837.  
  838. .trying {
  839. left: 32%;
  840. top: 22%;
  841. }
  842.  
  843. #hover {
  844. top: 33%;
  845. }
  846.  
  847. .canvas {
  848. top: 30%;
  849. }
  850. }
  851.  
  852. @media only screen and (min-width: 1701px) and (max-width: 1900px) {
  853. #central {
  854. margin-top: 170px;
  855. }
  856.  
  857. #websites ul {
  858. top: 20%;
  859. }
  860.  
  861. #hover {
  862. top: 47%;
  863. }
  864. }
  865.  
  866. @media only screen and (min-width: 1900px) and (max-width: 2000px) and (min-height: 1081px) {
  867. #hover {
  868. top: 33%;
  869. }
  870.  
  871. #central {
  872. margin-top: 17.5vw;
  873. }
  874.  
  875. #canvas {
  876. top: 12.5%;
  877. }
  878. }
  879.  
  880. @media only screen and (max-width: 600px) {
  881. html {
  882. overflow: hidden;
  883. font-size: 3px;
  884. }
  885.  
  886. #header {
  887. width: 295px;
  888. font-size: 2rem;
  889. }
  890.  
  891. #bara-wrap {
  892. width: 295px;
  893. }
  894.  
  895. #central-about {
  896. width: 280px;
  897. font-size: 1rem !important;
  898. }
  899.  
  900. #central-skills {
  901. width: 280px;
  902. }
  903.  
  904. #skills {
  905. width: 280px;
  906. }
  907.  
  908. #bara li {
  909. padding: 0;
  910. }
  911.  
  912. #bara ul {
  913. left: 40%;
  914. }
  915.  
  916. #social li {
  917. padding: 0;
  918. margin: 0;
  919. }
  920.  
  921. #more {
  922. padding: 1rem;
  923. font-size: 2rem;
  924. }
  925.  
  926. .intro {
  927. width: 200px;
  928. line-height: 2rem;
  929. }
  930.  
  931. hr {
  932. visibility: hidden;
  933. }
  934.  
  935. #about {
  936. top: 30%;
  937. font-size: 1.5rem;
  938. }
  939.  
  940. #dreamer {
  941. margin-left: 1rem;
  942. }
  943.  
  944. #gym {
  945. margin-left: 3rem;
  946. }
  947.  
  948. #football {
  949. margin-left: 3rem;
  950. }
  951.  
  952. #health {
  953. margin-left: 3rem;
  954. }
  955.  
  956. #code {
  957. margin-left: 3rem;
  958. }
  959.  
  960. #tech {
  961. margin-left: 3rem;
  962. }
  963.  
  964. #camera {
  965. margin-left: 3rem;
  966. }
  967.  
  968. #perfectionist {
  969. margin-left: 3rem;
  970. }
  971.  
  972. #hover {
  973. display: none;
  974. }
  975.  
  976. .description1,
  977. .description2,
  978. .description3,
  979. .description4,
  980. .description5,
  981. .description6,
  982. .description7,
  983. .description8 {
  984. font-size: 2rem;
  985. }
  986.  
  987. canvas {
  988. display: none;
  989. }
  990.  
  991. .mobile-skills {
  992. visibility: visible;
  993. position: absolute;
  994. left: 31%;
  995. color: #77dff1;
  996. }
  997.  
  998. .list-adv {
  999. padding: 1rem;
  1000. }
  1001.  
  1002. .scratch {
  1003. font-size: 4rem !important;
  1004. }
  1005.  
  1006. #social-contact-wrap {
  1007. width: 250px;
  1008. }
  1009.  
  1010. .social-contact {
  1011. width: 250px;
  1012. top: 88%;
  1013. }
  1014.  
  1015. .fa-10x {
  1016. font-size: 5rem;
  1017. }
  1018.  
  1019. .contactx {
  1020. position: absolute;
  1021. top: 23%;
  1022. text-align: center;
  1023. left: 40%;
  1024. }
  1025.  
  1026. .communicate {
  1027. position: absolute;
  1028. top: 33%;
  1029. left: 16%;
  1030. text-align: center;
  1031. }
  1032.  
  1033. .email {
  1034. left: 41%;
  1035. }
  1036.  
  1037. .fa-facebook-f,
  1038. .rg {
  1039. font-size: 2.5rem;
  1040. }
  1041.  
  1042. @media only screen and (min-height: 360px) and (max-height: 800px) {
  1043. #central {
  1044. margin-top: 30rem;
  1045. }
  1046.  
  1047. .intro {
  1048. font-size: 5rem;
  1049. line-height: 5rem;
  1050. width: 250px;
  1051. margin-bottom: 10rem;
  1052. }
  1053.  
  1054. #bara a {
  1055. font-size: 3rem;
  1056. }
  1057.  
  1058. #more {
  1059. font-size: 3.5rem;
  1060. padding: 2rem;
  1061. }
  1062.  
  1063. #hover {
  1064. display: inline;
  1065. position: absolute;
  1066. top: 22%;
  1067. left: 33.5%;
  1068. font-size: 2rem;
  1069. }
  1070.  
  1071. #about {
  1072. font-size: 3rem;
  1073. width: 90%;
  1074. margin-left: 5rem;
  1075. text-align: center;
  1076. }
  1077.  
  1078. .description1,
  1079. .description2,
  1080. .description3,
  1081. .description4,
  1082. .description5,
  1083. .description6,
  1084. .description7,
  1085. .description8 {
  1086. font-size: 4rem;
  1087. }
  1088.  
  1089. .mobile-skills {
  1090. visibility: visible;
  1091. font-size: 3rem;
  1092. left: 23%;
  1093. top: 34%;
  1094. }
  1095.  
  1096. .trying {
  1097. font-size: 3rem;
  1098. }
  1099.  
  1100. #websites {
  1101. margin-top: 10rem;
  1102. }
  1103.  
  1104. #websites ul {
  1105. margin-left: 4rem;
  1106. }
  1107.  
  1108. .contactx {
  1109. font-size: 5rem;
  1110. left: 30%;
  1111. }
  1112.  
  1113. .communicate {
  1114. font-size: 5rem;
  1115. left: 3%;
  1116. line-height: 5rem;
  1117. }
  1118.  
  1119. .fa-10x {
  1120. font-size: 8rem;
  1121. }
  1122.  
  1123. .email {
  1124. left: 36%;
  1125. }
  1126.  
  1127. .fa-8x {
  1128. font-size: 8.5rem;
  1129. }
  1130. }
  1131.  
  1132. @media only screen and (min-width: 321px) {
  1133. html {
  1134. overflow: hidden;
  1135. font-size: 3px;
  1136. }
  1137.  
  1138. #header {
  1139. width: 340px;
  1140. }
  1141.  
  1142. .fa-8x {
  1143. font-size: 8.5rem;
  1144. }
  1145.  
  1146. #bara a {
  1147. font-size: 3rem;
  1148. }
  1149.  
  1150. #central {
  1151. margin-top: 47.5rem;
  1152. }
  1153.  
  1154. #intro {
  1155. font-size: 50rem;
  1156. }
  1157.  
  1158. .intro {
  1159. font-size: 6rem;
  1160. line-height: 7rem;
  1161. width: 250px;
  1162. margin-bottom: 13rem;
  1163. }
  1164.  
  1165. a.xx1 {
  1166. margin-right: 2rem;
  1167. }
  1168.  
  1169. #more {
  1170. font-size: 6rem;
  1171. }
  1172.  
  1173. #central-about {
  1174. width: 280px;
  1175. font-size: 2rem !important;
  1176. }
  1177.  
  1178. #central-skills {
  1179. width: 280px;
  1180. }
  1181.  
  1182. #skills {
  1183. width: 280px;
  1184. }
  1185.  
  1186. #hover {
  1187. display: inline;
  1188. position: absolute;
  1189. top: 14%;
  1190. left: 33%;
  1191. font-size: 2rem;
  1192. }
  1193.  
  1194. #about {
  1195. font-size: 3rem;
  1196. width: 90%;
  1197. margin-left: 5rem;
  1198. text-align: center;
  1199. }
  1200.  
  1201. .description1,
  1202. .description2,
  1203. .description3,
  1204. .description4,
  1205. .description5,
  1206. .description6,
  1207. .description7,
  1208. .description8 {
  1209. font-size: 4rem;
  1210. }
  1211.  
  1212. .mobile-skills {
  1213. visibility: visible;
  1214. font-size: 4rem;
  1215. left: 21.5%;
  1216. top: 32%;
  1217. }
  1218.  
  1219. .trying {
  1220. font-size: 4rem;
  1221. left: auto;
  1222. }
  1223.  
  1224. #icons {
  1225. margin-top: 300px;
  1226. font-size: 15rem;
  1227. }
  1228.  
  1229. #websites {
  1230. margin-top: 10rem;
  1231. }
  1232.  
  1233. #websites ul {
  1234. margin-left: 4rem;
  1235. }
  1236.  
  1237. #websites li {
  1238. font-size: 4rem;
  1239. display: block;
  1240. }
  1241.  
  1242. .contactx {
  1243. font-size: 7rem;
  1244. left: 27%;
  1245. top: 20%;
  1246. }
  1247.  
  1248. .communicate {
  1249. font-size: 9rem;
  1250. top: 40%;
  1251. line-height: 10rem;
  1252. }
  1253.  
  1254. .fa-10x {
  1255. font-size: 12rem;
  1256. }
  1257.  
  1258. #bara ul {
  1259. left: 37.5%;
  1260. }
  1261.  
  1262. #bara li {
  1263. margin: 2rem;
  1264. }
  1265.  
  1266. .email {
  1267. left: 32%;
  1268. }
  1269.  
  1270. .fa-facebook-f {
  1271. position: relative;
  1272. right: 40%;
  1273. }
  1274. }
  1275.  
  1276. @media only screen and (min-width: 321px) and (max-width: 390px) {
  1277. .fa-facebook-f {
  1278. right: 20%;
  1279. }
  1280.  
  1281. #header {
  1282. width: 380px;
  1283. }
  1284.  
  1285. #bara-wrap {
  1286. width: 380px;
  1287. }
  1288. }
  1289.  
  1290. @media only screen and (min-width: 390px) and (max-width: 420px) {
  1291. #header {
  1292. width: 420px !important;
  1293. }
  1294.  
  1295. #bara-wrap {
  1296. width: 420px !important;
  1297. }
  1298. }
  1299.  
  1300. @media only screen and (min-width: 370px) and (max-height: 800px) {
  1301. #bara a {
  1302. font-size: 3rem;
  1303. }
  1304.  
  1305. #central {
  1306. margin-top: 50rem;
  1307. }
  1308.  
  1309. #dreamer {
  1310. margin-left: 0;
  1311. }
  1312.  
  1313. #about {
  1314. font-size: 5rem;
  1315. }
  1316.  
  1317. .description1,
  1318. .description2,
  1319. .description3,
  1320. .description4,
  1321. .description5,
  1322. .description6,
  1323. .description7,
  1324. .description8 {
  1325. font-size: 7rem;
  1326. line-height: 7rem;
  1327. }
  1328.  
  1329. .trying {
  1330. font-size: 6rem;
  1331. left: 1%;
  1332. }
  1333.  
  1334. .mobile-skills {
  1335. visibility: visible;
  1336. display: inline;
  1337. top: 37%;
  1338. left: 20%;
  1339. }
  1340.  
  1341. #websites li {
  1342. font-size: 4rem;
  1343. display: block;
  1344. }
  1345.  
  1346. .scratch {
  1347. font-size: 4rem !important;
  1348. }
  1349. }
  1350.  
  1351. @media only screen and (min-width: 370px) and (max-width: 800px) and (min-height: 600px) (max-height: 800px) {
  1352. #hover {
  1353. top: 16%;
  1354. }
  1355.  
  1356. .communicate {
  1357. left: 12%;
  1358. }
  1359.  
  1360. .contactx {
  1361. top: 30%;
  1362. left: 32.5%;
  1363. }
  1364. }
  1365.  
  1366. @media only screen and (max-width: 1000px) {
  1367. #bara ul {
  1368. margin-left: 50px;
  1369. }
  1370.  
  1371. #canvas {
  1372. display: none;
  1373. }
  1374.  
  1375. .mobile-skills {
  1376. visibility: visible;
  1377. }
  1378. }
  1379.  
  1380. @media only screen and (min-width: 400px) {
  1381. #header {
  1382. width: 400px;
  1383. }
  1384.  
  1385. #bara-wrap {
  1386. width: 400px;
  1387. }
  1388.  
  1389. .fa-facebook-f {
  1390. right: auto;
  1391. }
  1392.  
  1393. #about {
  1394. font-size: 4.5rem;
  1395. margin-left: 20px;
  1396. }
  1397.  
  1398. #hover {
  1399. display: inline;
  1400. position: absolute;
  1401. top: 14%;
  1402. left: 33%;
  1403. font-size: 3rem;
  1404. }
  1405.  
  1406. #websites ul {
  1407. margin-left: 0;
  1408. }
  1409.  
  1410. .contactx {
  1411. left: 30%;
  1412. }
  1413.  
  1414. #bara ul {
  1415. margin-left: 60px;
  1416. }
  1417. }
  1418.  
  1419. @media only screen and (min-width: 300px) and (max-width: 400px) and (min-height: 750px) and (max-height: 850px) {
  1420. #header {
  1421. width: 365px;
  1422. }
  1423.  
  1424. #bara-wrap {
  1425. width: 365px;
  1426. }
  1427.  
  1428. #intro {
  1429. font-size: 75rem;
  1430. }
  1431.  
  1432. #more {
  1433. margin-top: 30px;
  1434. padding: 15px;
  1435. font-size: 5rem;
  1436. }
  1437.  
  1438. hr {
  1439. visibility: visible;
  1440. max-width: 80%;
  1441. }
  1442.  
  1443. .fa-facebook-f {
  1444. right: auto;
  1445. }
  1446.  
  1447. #bara ul {
  1448. margin-left: 60px;
  1449. }
  1450.  
  1451. #hover {
  1452. top: 12%;
  1453. left: 33.5%;
  1454. font-size: 2.5rem;
  1455. }
  1456.  
  1457. #about {
  1458. font-size: 6rem;
  1459. }
  1460.  
  1461. .description1,
  1462. .description2,
  1463. .description3,
  1464. .description4,
  1465. .description5,
  1466. .description6,
  1467. .description7,
  1468. .description8 {
  1469. font-size: 8rem;
  1470. line-height: 8rem;
  1471. }
  1472.  
  1473. .trying {
  1474. font-size: 6rem;
  1475. left: 5%;
  1476. }
  1477.  
  1478. .mobile-skills {
  1479. font-size: 5rem;
  1480. top: 35%;
  1481. left: 16%;
  1482. }
  1483.  
  1484. .communicate {
  1485. left: auto;
  1486. }
  1487.  
  1488. #icons {
  1489. margin-top: 400px;
  1490. font-size: 20rem;
  1491. }
  1492. }
  1493.  
  1494. @media only screen and (min-width: 400px) and (max-width: 420px) and (min-height: 700px) and (max-height: 750px) {
  1495. #icons {
  1496. margin-top: 380px;
  1497. }
  1498. }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement