@import url('https://fonts.cdnfonts.com/css/inter');
@import url('https://fonts.cdnfonts.com/css/jetbrains-mono-2');
@import "tailwindcss";

@theme {
    --color-background: #131313;
    --color-bg-grey: #282828;
    --color-border-custom: #626262;
    --color-redcustom: #DE071C;
    --color-phpcustom: #4D5A90;
    --color-jscustom: #FADC22;
    --color-csscustom: #3365F1;
    --color-htmlcustom: #e55330;
    --color-tlwcustom: #47bff8;
    --color-csharpcustom: #853d8c;
    --color-sqlcustom: #e0712b;

    --font-inter: "inter", "sans-serif";
    --font-jetbrains: "JetBrains Mono", "sans-serif";
}

.keyword {
    color: #EE7BFF;
}

.string {
    color: #99CC98;
}

.assign {
    color: #FFAAAA;
}

.comment {
    color: #626262;
}

.terminal-arrow {
    color: #046B4B;
}

.terminal-path {
    color: #ECBBBA;
}

.cursor {
  display: inline-block;
  width: 8px;
  height: 18px;
  /* Zorg dat de hoogte van de cursor overeenkomt met de tekstgrootte */
  background-color: white;
  animation: blink 0.7s steps(2, start) infinite;
  margin-left: 2px;
  /* Optionele spatie tussen tekst en cursor */
  vertical-align: middle;
}
@keyframes blink {
  0% {
    opacity: 100%;
  }

  100% {
    display: none;
  }
}

@media screen and (max-width: 900px) {
    .terminal-container {
        display: none;
    }
}


@media screen and (max-width: 620px) {

   .code-block {
        font-size: 12px;
    }
}


.phone-contact {
    display: none;
}

@media screen and (max-width: 600px) {
    .landscape-contact {
        display: none;
    }

    .phone-contact {
        display: flex;
    }
}