@import url("https://fonts.googleapis.com/css2?family=Cabin&display=swap");
@import url("../../vendor/twbs/bootstrap/scss/bootstrap.scss");
.dark-font {
  color: #000; }

.white-font {
  color: #FFF; }

a.text-link {
  text-decoration: none;
  color: #0D6EFD !important; }

a.text-link:hover {
  text-decoration: underline; }

.text-container .text-label-html5, .text-container .text-label-css3, .text-container .text-label-js, .text-container .text-label-jquery, .text-container .text-label-php, .text-container .text-label-mysql, .text-container .text-label-codeigniter, .text-container .text-label-laravel, .text-container .text-label-wordpress, .text-container .text-label-bootstrap, .text-container .text-label-sass, .text-container .text-label-git, .text-container .text-label-bitbucket, .text-container .text-label-jira, .text-container .text-label-vscode, .text-container .text-label-docker {
  display: none;
  opacity: 0.8;
  background: #5E5E5E;
  width: 120px;
  position: absolute;
  left: 98px;
  bottom: 50px;
  padding: 5px;
  box-sizing: border-box;
  text-align: center;
  color: white; }

.text-container {
  position: relative;
  color: #333; }

body, p, h1, button, a {
  font-family: "Cabin", sans-serif;
  color: #5E5E5E; }
  @media (min-width: 320px) {
    body, p, h1, button, a {
      font-size: 1.05rem; }
      body #about-me .container, p #about-me .container, h1 #about-me .container, button #about-me .container, a #about-me .container {
        height: 1900px; }
      body #recent-works .container, p #recent-works .container, h1 #recent-works .container, button #recent-works .container, a #recent-works .container {
        height: 900px; }
      body #samples .container, p #samples .container, h1 #samples .container, button #samples .container, a #samples .container {
        height: 500px; }
      body #contact .container, p #contact .container, h1 #contact .container, button #contact .container, a #contact .container {
        height: 1250px; }
      body .text-container, p .text-container, h1 .text-container, button .text-container, a .text-container {
        padding-bottom: 15px; }
      body .section-title, body .section-text, p .section-title, p .section-text, h1 .section-title, h1 .section-text, button .section-title, button .section-text, a .section-title, a .section-text {
        padding-left: 10px; }
      body .name, p .name, h1 .name, button .name, a .name {
        padding-top: 50px; }
      body .text-container img, p .text-container img, h1 .text-container img, button .text-container img, a .text-container img {
        height: 90px;
        width: 90px; }
      body .text-container .text-label-html5, body .text-container .text-label-css3, body .text-container .text-label-js, body .text-container .text-label-jquery, body .text-container .text-label-php, body .text-container .text-label-mysql, body .text-container .text-label-codeigniter, body .text-container .text-label-laravel, body .text-container .text-label-wordpress, body .text-container .text-label-bootstrap, body .text-container .text-label-sass, body .text-container .text-label-git, body .text-container .text-label-bitbucket, body .text-container .text-label-jira, body .text-container .text-label-vscode, body .text-container .text-label-docker, p .text-container .text-label-html5, p .text-container .text-label-css3, p .text-container .text-label-js, p .text-container .text-label-jquery, p .text-container .text-label-php, p .text-container .text-label-mysql, p .text-container .text-label-codeigniter, p .text-container .text-label-laravel, p .text-container .text-label-wordpress, p .text-container .text-label-bootstrap, p .text-container .text-label-sass, p .text-container .text-label-git, p .text-container .text-label-bitbucket, p .text-container .text-label-jira, p .text-container .text-label-vscode, p .text-container .text-label-docker, h1 .text-container .text-label-html5, h1 .text-container .text-label-css3, h1 .text-container .text-label-js, h1 .text-container .text-label-jquery, h1 .text-container .text-label-php, h1 .text-container .text-label-mysql, h1 .text-container .text-label-codeigniter, h1 .text-container .text-label-laravel, h1 .text-container .text-label-wordpress, h1 .text-container .text-label-bootstrap, h1 .text-container .text-label-sass, h1 .text-container .text-label-git, h1 .text-container .text-label-bitbucket, h1 .text-container .text-label-jira, h1 .text-container .text-label-vscode, h1 .text-container .text-label-docker, button .text-container .text-label-html5, button .text-container .text-label-css3, button .text-container .text-label-js, button .text-container .text-label-jquery, button .text-container .text-label-php, button .text-container .text-label-mysql, button .text-container .text-label-codeigniter, button .text-container .text-label-laravel, button .text-container .text-label-wordpress, button .text-container .text-label-bootstrap, button .text-container .text-label-sass, button .text-container .text-label-git, button .text-container .text-label-bitbucket, button .text-container .text-label-jira, button .text-container .text-label-vscode, button .text-container .text-label-docker, a .text-container .text-label-html5, a .text-container .text-label-css3, a .text-container .text-label-js, a .text-container .text-label-jquery, a .text-container .text-label-php, a .text-container .text-label-mysql, a .text-container .text-label-codeigniter, a .text-container .text-label-laravel, a .text-container .text-label-wordpress, a .text-container .text-label-bootstrap, a .text-container .text-label-sass, a .text-container .text-label-git, a .text-container .text-label-bitbucket, a .text-container .text-label-jira, a .text-container .text-label-vscode, a .text-container .text-label-docker {
        display: none;
        opacity: 0.8;
        background: #5E5E5E;
        width: 120px;
        position: absolute;
        left: 10px;
        bottom: 50px;
        padding: 5px;
        box-sizing: border-box;
        text-align: center;
        color: white; }
      body .circular-portrait, p .circular-portrait, h1 .circular-portrait, button .circular-portrait, a .circular-portrait {
        position: relative;
        width: 200px;
        height: 200px;
        overflow: hidden;
        border-radius: 50%; }
      body .circular-portrait img, p .circular-portrait img, h1 .circular-portrait img, button .circular-portrait img, a .circular-portrait img {
        width: 100%;
        height: auto; } }
  @media (min-width: 768px) and (max-width: 1023px) {
    body, p, h1, button, a {
      font-size: 1.2rem; }
      body #about-me .container, p #about-me .container, h1 #about-me .container, button #about-me .container, a #about-me .container {
        height: 1700px; }
      body #samples .container, p #samples .container, h1 #samples .container, button #samples .container, a #samples .container {
        height: 500px; }
      body #contact .container, p #contact .container, h1 #contact .container, button #contact .container, a #contact .container {
        height: 1700px; }
      body .name, p .name, h1 .name, button .name, a .name {
        padding-top: 100px; }
      body .section-title, p .section-title, h1 .section-title, button .section-title, a .section-title {
        padding-left: 10px; }
      body .mbutton, p .mbutton, h1 .mbutton, button .mbutton, a .mbutton {
        padding: 10px 35px; }
      body .text-container img, p .text-container img, h1 .text-container img, button .text-container img, a .text-container img {
        height: 120px;
        width: 120px; }
      body .text-container .text-label-html5, body .text-container .text-label-css3, body .text-container .text-label-js, body .text-container .text-label-jquery, body .text-container .text-label-php, body .text-container .text-label-mysql, body .text-container .text-label-codeigniter, body .text-container .text-label-laravel, body .text-container .text-label-wordpress, body .text-container .text-label-bootstrap, body .text-container .text-label-sass, body .text-container .text-label-git, body .text-container .text-label-bitbucket, body .text-container .text-label-jira, body .text-container .text-label-vscode, body .text-container .text-label-docker, p .text-container .text-label-html5, p .text-container .text-label-css3, p .text-container .text-label-js, p .text-container .text-label-jquery, p .text-container .text-label-php, p .text-container .text-label-mysql, p .text-container .text-label-codeigniter, p .text-container .text-label-laravel, p .text-container .text-label-wordpress, p .text-container .text-label-bootstrap, p .text-container .text-label-sass, p .text-container .text-label-git, p .text-container .text-label-bitbucket, p .text-container .text-label-jira, p .text-container .text-label-vscode, p .text-container .text-label-docker, h1 .text-container .text-label-html5, h1 .text-container .text-label-css3, h1 .text-container .text-label-js, h1 .text-container .text-label-jquery, h1 .text-container .text-label-php, h1 .text-container .text-label-mysql, h1 .text-container .text-label-codeigniter, h1 .text-container .text-label-laravel, h1 .text-container .text-label-wordpress, h1 .text-container .text-label-bootstrap, h1 .text-container .text-label-sass, h1 .text-container .text-label-git, h1 .text-container .text-label-bitbucket, h1 .text-container .text-label-jira, h1 .text-container .text-label-vscode, h1 .text-container .text-label-docker, button .text-container .text-label-html5, button .text-container .text-label-css3, button .text-container .text-label-js, button .text-container .text-label-jquery, button .text-container .text-label-php, button .text-container .text-label-mysql, button .text-container .text-label-codeigniter, button .text-container .text-label-laravel, button .text-container .text-label-wordpress, button .text-container .text-label-bootstrap, button .text-container .text-label-sass, button .text-container .text-label-git, button .text-container .text-label-bitbucket, button .text-container .text-label-jira, button .text-container .text-label-vscode, button .text-container .text-label-docker, a .text-container .text-label-html5, a .text-container .text-label-css3, a .text-container .text-label-js, a .text-container .text-label-jquery, a .text-container .text-label-php, a .text-container .text-label-mysql, a .text-container .text-label-codeigniter, a .text-container .text-label-laravel, a .text-container .text-label-wordpress, a .text-container .text-label-bootstrap, a .text-container .text-label-sass, a .text-container .text-label-git, a .text-container .text-label-bitbucket, a .text-container .text-label-jira, a .text-container .text-label-vscode, a .text-container .text-label-docker {
        display: none;
        opacity: 0.8;
        background: #5E5E5E;
        width: 120px;
        position: absolute;
        left: 55px;
        bottom: 60px;
        padding: 5px;
        box-sizing: border-box;
        text-align: center;
        color: white; }
      body .circular-portrait, p .circular-portrait, h1 .circular-portrait, button .circular-portrait, a .circular-portrait {
        position: relative;
        width: 300px;
        height: 300px;
        overflow: hidden;
        border-radius: 50%; }
      body .circular-portrait img, p .circular-portrait img, h1 .circular-portrait img, button .circular-portrait img, a .circular-portrait img {
        width: 100%;
        height: auto; } }
  @media (min-width: 1024px) {
    body, p, h1, button, a {
      font-size: 1.5rem; }
      body #about-me .container, p #about-me .container, h1 #about-me .container, button #about-me .container, a #about-me .container {
        height: 1700px; }
      body #contact .container, p #contact .container, h1 #contact .container, button #contact .container, a #contact .container {
        height: 1700px; }
      body #samples .container, p #samples .container, h1 #samples .container, button #samples .container, a #samples .container {
        height: 500px; }
      body .section-title, body .contact-text, body .section-text, p .section-title, p .contact-text, p .section-text, h1 .section-title, h1 .contact-text, h1 .section-text, button .section-title, button .contact-text, button .section-text, a .section-title, a .contact-text, a .section-text {
        padding-left: 70px; }
      body .name, p .name, h1 .name, button .name, a .name {
        padding-top: 250px; }
      body .text-container .text-label-html5, body .text-container .text-label-css3, body .text-container .text-label-js, body .text-container .text-label-jquery, body .text-container .text-label-php, body .text-container .text-label-mysql, body .text-container .text-label-codeigniter, body .text-container .text-label-laravel, body .text-container .text-label-wordpress, body .text-container .text-label-bootstrap, body .text-container .text-label-sass, body .text-container .text-label-git, body .text-container .text-label-bitbucket, body .text-container .text-label-jira, body .text-container .text-label-vscode, body .text-container .text-label-docker, p .text-container .text-label-html5, p .text-container .text-label-css3, p .text-container .text-label-js, p .text-container .text-label-jquery, p .text-container .text-label-php, p .text-container .text-label-mysql, p .text-container .text-label-codeigniter, p .text-container .text-label-laravel, p .text-container .text-label-wordpress, p .text-container .text-label-bootstrap, p .text-container .text-label-sass, p .text-container .text-label-git, p .text-container .text-label-bitbucket, p .text-container .text-label-jira, p .text-container .text-label-vscode, p .text-container .text-label-docker, h1 .text-container .text-label-html5, h1 .text-container .text-label-css3, h1 .text-container .text-label-js, h1 .text-container .text-label-jquery, h1 .text-container .text-label-php, h1 .text-container .text-label-mysql, h1 .text-container .text-label-codeigniter, h1 .text-container .text-label-laravel, h1 .text-container .text-label-wordpress, h1 .text-container .text-label-bootstrap, h1 .text-container .text-label-sass, h1 .text-container .text-label-git, h1 .text-container .text-label-bitbucket, h1 .text-container .text-label-jira, h1 .text-container .text-label-vscode, h1 .text-container .text-label-docker, button .text-container .text-label-html5, button .text-container .text-label-css3, button .text-container .text-label-js, button .text-container .text-label-jquery, button .text-container .text-label-php, button .text-container .text-label-mysql, button .text-container .text-label-codeigniter, button .text-container .text-label-laravel, button .text-container .text-label-wordpress, button .text-container .text-label-bootstrap, button .text-container .text-label-sass, button .text-container .text-label-git, button .text-container .text-label-bitbucket, button .text-container .text-label-jira, button .text-container .text-label-vscode, button .text-container .text-label-docker, a .text-container .text-label-html5, a .text-container .text-label-css3, a .text-container .text-label-js, a .text-container .text-label-jquery, a .text-container .text-label-php, a .text-container .text-label-mysql, a .text-container .text-label-codeigniter, a .text-container .text-label-laravel, a .text-container .text-label-wordpress, a .text-container .text-label-bootstrap, a .text-container .text-label-sass, a .text-container .text-label-git, a .text-container .text-label-bitbucket, a .text-container .text-label-jira, a .text-container .text-label-vscode, a .text-container .text-label-docker {
        display: none;
        opacity: 0.8;
        background: #5E5E5E;
        width: 120px;
        position: absolute;
        left: 98px;
        bottom: 50px;
        padding: 5px;
        box-sizing: border-box;
        text-align: center;
        color: white; }
      body .circular-portrait, p .circular-portrait, h1 .circular-portrait, button .circular-portrait, a .circular-portrait {
        position: relative;
        width: 300px;
        height: 300px;
        overflow: hidden;
        border-radius: 50%; }
      body .circular-portrait img, p .circular-portrait img, h1 .circular-portrait img, button .circular-portrait img, a .circular-portrait img {
        width: 100%;
        height: auto; } }