body {
  padding: 0;
  margin: 0;
  padding-top: 5vw;
  font-family: 'worksans-medium';
  font-size: 0; }

* {
  box-sizing: border-box; }

a {
  text-decoration: none; }

img {
  display: block; }

.container {
  width: 70vw;
  margin: 0 auto; }

.flex {
  display: flex;
  align-items: center; }

.ml-auto {
  margin-left: auto; }

/* HEADER */
header {
  box-shadow: 1px 0px 10px 0px rgba(0, 0, 0, 0.75);
  height: 5vw;
  position: fixed;
  top: 0;
  width: 100vw;
  background: #ffffff;
  z-index: 1; }
  header .container {
    height: 5vw; }
    header .container #header-logo {
      height: 3vw;
      cursor: pointer; }
    header .container #header-motto {
      font-size: 1.2vw; }
      header .container #header-motto span {
        color: #d63031; }

/* BANNER */
#banner {
  height: 30vw;
  background: url("../images/banner.jpg");
  background-position: center center;
  background-size: cover;
  position: relative;
  color: #ffffff; }
  #banner #banner-background {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7); }
  #banner #banner-container {
    position: relative;
    height: 100%; }
    #banner #banner-container #banner-content {
      position: absolute;
      left: 0;
      width: 100%;
      top: 50%;
      transform: translateY(-50%); }
      #banner #banner-container #banner-content #banner-title {
        font-size: 3.2vw;
        color: #ffffff;
        text-align: center;
        margin-bottom: 3vw; }
      #banner #banner-container #banner-content #banner-subtitle {
        font-size: 2vw;
        text-align: center;
        margin-bottom: 3vw; }
      #banner #banner-container #banner-content #banner-items {
        font-size: 2vw;
        text-align: center; }
  #banner #game {
    width: 30vw;
    height: 30vw;
    background: #2d3436;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    opacity: 0.8; }
    #banner #game .snake {
      position: absolute;
      width: 0.8vw;
      height: 0.8vw;
      background: #00b894;
      transition: all 0.1s linear; }
    #banner #game .point {
      position: absolute;
      width: 0.8vw;
      height: 0.8vw;
      background: #d63031;
      transition: all 0.1s linear; }

/* TECHNOLOGIES */
#technologies {
  padding: 2vw 0px; }
  #technologies #technologies-images {
    justify-content: center;
    gap: 5vw; }
    #technologies #technologies-images img {
      height: 8vw; }

/* ABOUT US */
#aboutus {
  padding: 2vw 0px;
  background: #212830;
  color: #ffffff; }
  #aboutus #aboutus-title {
    font-size: 2.6vw;
    font-family: 'worksans-bold';
    margin-bottom: 2vw; }
  #aboutus #aboutus-description {
    font-size: 1.2vw; }

/* PROJECTS */
#projects {
  padding: 2vw 0px;
  color: #212830; }
  #projects #projects-title {
    font-size: 2.6vw;
    font-family: 'worksans-bold';
    margin-bottom: 2vw; }
  #projects #project-list {
    display: grid;
    gap: 2vw; }
    #projects #project-list .project-item {
      display: flex;
      align-items: unset; }
      #projects #project-list .project-item .project-image-container {
        flex: 0 0 20vw;
        margin-right: 2vw;
        width: 20vw; }
        #projects #project-list .project-item .project-image-container img {
          width: 100%; }
      #projects #project-list .project-item .project-content .project-title {
        font-size: 1.4vw;
        font-family: 'worksans-bold';
        margin-bottom: 1vw; }
      #projects #project-list .project-item .project-content .project-subtitle {
        font-size: 1vw;
        margin-bottom: 1vw; }
      #projects #project-list .project-item .project-content .project-description {
        font-size: 1vw;
        margin-bottom: 1vw;
        font-family: 'worksans-light'; }
      #projects #project-list .project-item .project-content .project-url {
        font-size: 1vw;
        margin-bottom: 1vw;
        font-family: 'worksans-light'; }
        #projects #project-list .project-item .project-content .project-url a {
          color: #d63031; }

/* CODEFOX UI */
#codefoxui {
  background: #212830;
  padding: 2vw 0px;
  color: #ffffff; }
  #codefoxui #codefoxui-title {
    font-size: 2.6vw;
    font-family: 'worksans-bold';
    margin-bottom: 2vw; }
  #codefoxui #codefoxui-description {
    font-size: 1.2vw;
    margin-bottom: 2vw; }
  #codefoxui #codefoxui-images {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 1.2vw;
    margin-bottom: 2vw; }
    #codefoxui #codefoxui-images img {
      border: 1px solid #ffffff;
      width: 100%; }
  #codefoxui #codefoxui-readmore {
    font-size: 1.2vw; }
    #codefoxui #codefoxui-readmore a {
      color: #d63031; }

/* CODEFOX LIVEGRID */
#codefoxlivegrid {
  padding: 2vw 0px;
  color: #212830; }
  #codefoxlivegrid #codefoxlivegrid-title {
    font-size: 2.6vw;
    font-family: 'worksans-bold';
    margin-bottom: 2vw; }
  #codefoxlivegrid #codefoxlivegrid-description {
    font-size: 1.2vw;
    margin-bottom: 2vw; }
  #codefoxlivegrid #codefoxlivegrid-images {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 1.2vw;
    margin-bottom: 2vw; }
    #codefoxlivegrid #codefoxlivegrid-images img {
      border: 1px solid #212830;
      width: 100%; }
  #codefoxlivegrid #codefoxlivegrid-readmore {
    font-size: 1.2vw; }
    #codefoxlivegrid #codefoxlivegrid-readmore a {
      color: #d63031; }

/* CONTACT */
#contact {
  color: #212830;
  background: #ffffff;
  display: grid;
  grid-template-columns: 50% 50%; }
  #contact #contact-left {
    padding: 2vw 0vw; }
    #contact #contact-left #contact-title {
      font-size: 1.8vw;
      margin-bottom: 1vw; }
    #contact #contact-left #contact-subtitle {
      font-size: 1vw;
      font-family: 'worksans-light';
      margin-bottom: 2vw; }
    #contact #contact-left #contact-data-list {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      row-gap: 0.5vw;
      font-family: 'worksans-light';
      margin-bottom: 2vw; }
      #contact #contact-left #contact-data-list .contact-data {
        font-size: 1vw; }
        #contact #contact-left #contact-data-list .contact-data a {
          color: #d63031; }
        #contact #contact-left #contact-data-list .contact-data span {
          font-family: 'worksans-regular'; }
    #contact #contact-left #contact-data-logo-container {
      text-align: center; }
  #contact #contact-right {
    background: #f1f1f1;
    padding: 2vw; }
    #contact #contact-right .form-rows {
      display: grid;
      gap: 1vw; }
      #contact #contact-right .form-rows .form-row-multiple {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 1vw; }
      #contact #contact-right .form-rows .form-row input {
        height: 2.5vw;
        width: 100%;
        padding: 0px 0.5vw;
        border: 1px solid #acacac;
        font-family: 'worksans-medium';
        outline: none;
        font-size: 0.8vw; }
      #contact #contact-right .form-rows .form-row textarea {
        height: 10vw;
        width: 100%;
        padding: 0.5vw;
        border: 1px solid #acacac;
        font-family: 'worksans-medium';
        resize: vertical;
        outline: none;
        font-size: 0.8vw; }
      #contact #contact-right .form-rows .form-row .form-row-button {
        display: inline-block;
        height: 2.5vw;
        background: #d63031;
        border: none;
        outline: none;
        color: #ffffff;
        font-family: 'worksans-medium';
        padding: 0px 1vw;
        font-size: 0.8vw;
        cursor: pointer; }

/* FOOTER */
footer {
  padding: 1.5vw 0px;
  background: #212830;
  text-align: center;
  font-size: 0.8vw;
  color: #ffffff; }

@media only screen and (max-width: 768px) {
  body {
    padding-top: 14vw; }
  .container {
    width: 94vw;
    margin: 0 auto; }
  /* HEADER */
  header {
    height: 14vw; }
    header .container {
      height: 14vw; }
      header .container #header-logo {
        height: 8vw;
        cursor: pointer; }
      header .container #header-motto {
        font-size: 3vw; }
  /* BANNER */
  #banner {
    height: 60vw; }
    #banner #banner-container {
      padding-top: 10vw; }
      #banner #banner-container #banner-content #banner-title {
        font-size: 6.4vw;
        margin-bottom: 6vw; }
      #banner #banner-container #banner-content #banner-subtitle {
        font-size: 4vw;
        margin-bottom: 6vw; }
      #banner #banner-container #banner-content #banner-items {
        font-size: 4vw; }
  /* TECHNOLOGIES */
  #technologies #technologies-images img {
    height: 14vw; }
  /* ABOUT US */
  #aboutus {
    padding: 3vw 0px; }
    #aboutus #aboutus-title {
      font-size: 6vw;
      margin-bottom: 3vw; }
    #aboutus #aboutus-description {
      font-size: 3.6vw; }
  /* PROJECTS */
  #projects {
    padding: 3vw 0px; }
    #projects #projects-title {
      font-size: 6vw;
      margin-bottom: 3vw; }
    #projects #project-list {
      display: grid;
      gap: 2vw; }
      #projects #project-list .project-item .project-image-container {
        flex: 0 0 30vw;
        width: 30vw; }
      #projects #project-list .project-item .project-content .project-title {
        font-size: 4vw;
        margin-bottom: 2vw; }
      #projects #project-list .project-item .project-content .project-subtitle {
        font-size: 3vw;
        margin-bottom: 2vw; }
      #projects #project-list .project-item .project-content .project-url {
        font-size: 2.4vw;
        margin-bottom: 2vw; }
      #projects #project-list .project-item .project-content .project-description {
        font-size: 2.4vw;
        margin-bottom: 2vw; }
      #projects #project-list .project-item .project-content .project-technologies {
        font-size: 2.4vw; }
  /* CODEFOX UI */
  #codefoxui {
    padding: 3vw 0px; }
    #codefoxui #codefoxui-title {
      font-size: 6vw;
      margin-bottom: 3vw; }
    #codefoxui #codefoxui-description {
      font-size: 3.6vw;
      margin-bottom: 3vw; }
    #codefoxui #codefoxui-readmore {
      font-size: 3.6vw; }
  /* CODEFOX LIVEGRID */
  #codefoxlivegrid {
    padding: 3vw 0px; }
    #codefoxlivegrid #codefoxlivegrid-title {
      font-size: 6vw;
      margin-bottom: 3vw; }
    #codefoxlivegrid #codefoxlivegrid-description {
      font-size: 3.6vw;
      margin-bottom: 3vw; }
    #codefoxlivegrid #codefoxlivegrid-readmore {
      font-size: 3.6vw; }
  /* CONTACT */
  #contact {
    grid-template-columns: 1fr; }
    #contact #contact-left #contact-title {
      font-size: 6vw;
      margin-bottom: 2vw; }
    #contact #contact-left #contact-subtitle {
      font-size: 3vw;
      margin-bottom: 4vw; }
    #contact #contact-left #contact-data-list {
      row-gap: 3vw;
      margin-bottom: 4vw; }
      #contact #contact-left #contact-data-list .contact-data {
        font-size: 3vw; }
    #contact #contact-left #contact-data-logo-container {
      text-align: center; }
      #contact #contact-left #contact-data-logo-container img {
        display: inline-block; }
    #contact #contact-right {
      background: #f1f1f1;
      padding: 2vw; }
      #contact #contact-right .form-rows {
        gap: 2vw; }
        #contact #contact-right .form-rows .form-row-multiple {
          display: grid;
          grid-template-columns: 1fr;
          gap: 2vw; }
        #contact #contact-right .form-rows .form-row input {
          height: 8vw;
          padding: 0px 2vw;
          font-size: 3vw; }
        #contact #contact-right .form-rows .form-row textarea {
          height: 20vw;
          padding: 2vw;
          font-size: 3vw; }
        #contact #contact-right .form-rows .form-row .form-row-button {
          height: 8vw;
          padding: 0px 1vw;
          font-size: 3vw; }
  /* FOOTER */
  footer {
    padding: 4vw 0px;
    font-size: 3vw; } }