*
{
    margin:0 auto;
}

html, body
{
  scroll-behavior: smooth !important;
}

html.sr .load-hidden
{
    visibility: hidden;
}

html.sr .widget
{
    visibility: hidden;
}

.text-justify
{
    text-justify: inter-word !important;
    text-align: justify !important;
}

.body
{
    z-index: 1000;
    font-size: 18px;
}

.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: transparent;
  pointer-events: none;
}

/* Navbar */
.navbar
{
    z-index: 1002 !important;
}

.nav-item a {
  transition: text-shadow 0.1s ease, box-shadow 0.1s ease;
}

.nav-item a:hover,
.nav-item a:focus,
.nav-item a:active {
    text-shadow: 0 0 1px #00000048;
    box-shadow: 0 2px 0 #0000007d; 
}

/* Adjusting position */
@media (max-width: 1800px) {
  .arrow_prev {
    left: 8% !important;
  }

  .arrow_next {
    right: 8% !important;
  }
}
@media (max-width: 1700px) {
  .arrow_prev {
    left: 6% !important;
  }

  .arrow_next {
    right: 6% !important;
  }
}
@media (max-width: 1600px) {
  .arrow_prev {
    left: 4% !important;
  }

  .arrow_next {
    right: 4% !important;
  }
}
@media (max-width: 1500px) {
  .arrow_prev {
    left: 2% !important;
  }

  .arrow_next {
    right: 2% !important;
  }
}
@media (max-width: 1400px) {
  .arrow_prev {
    left: 1% !important;
  }

  .arrow_next {
    right: 1% !important;
  }
}

/* Hidding content */
@media (max-width: 1200px)
{
  .project-text,
  .arrow_prev,
  .arrow_next
  {
    display: none !important;
  }
  #projects .col-md-8 {
    width: 100%;
    display: block;
    margin-left: 30px;
    text-align: center;
  }
}

/* Slick */
.arrow_prev,
.arrow_next {
  position: absolute;
  top: 40%;
  transform: translateY(-50%);
  font-size: 24px;
  cursor: pointer;
  transition: opacity 0.3s ease;
}

.arrow_prev {
  left: 10%;
}

.arrow_next {
  right: 10%;
}

.arrow_disabled
{
	opacity: 0.5;
  transition: opacity 0.3s ease;
  cursor: default;
}

.grabbing-cursor
{
  cursor: grabbing;
}

/* Loading */
#loading-screen {
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #ffffff;
  opacity: 1;
  transition: opacity 2s ease;
  z-index: 9999;
}

#loading-screen.hide {
  opacity: 0;
  pointer-events: none;
}

/* Projects */
.video
{
  filter: drop-shadow(6px 6px 4px #4e4e4eb7);
}

.project
{
  margin-left: 20px;
  transform: scale(0.9);
  max-width: 70%;
  filter: drop-shadow(6px 6px 4px #4e4e4eb7);
  transition: opacity 0.1s ease-in-out, transform 0.1s ease-in-out;
  opacity: 0.5;
  cursor: pointer;
}

.project-selected
{
  margin-left: 20px;
  transform: scale(1.0);
  max-width: 70%;
  filter: drop-shadow(6px 6px 4px #4e4e4eb7);
  transition: opacity 0.1s ease-in-out, transform 0.1s ease-in-out;
  opacity: 1;
}

.project:hover
{
  opacity: 1;
}

/* Fade */
.fade-in {
  opacity: 1;
  transition: opacity 0.1s ease-in-out;
}

.fade-out {
  opacity: 0;
  transition: opacity 0.1s ease-in-out;
}

@keyframes fadeIn
{
  from
  {
    opacity: 0;
  }
  to
  {
    opacity: 0.5;
  }
}

/* Link */
.title-link {
  color: rgb(50, 50, 50) !important;
  transition: color 0.3s ease !important;
}

.title-link:hover {
  color: rgb(50, 50, 50) !important;
  text-decoration: none !important;
}

.gradient-background {
  background: linear-gradient(
      45deg,
      hsla(168, 85%, 52%, 0.15),
      hsla(263, 88%, 45%, 0.15) 100%
  );
}

/* Badges */
.badge-pill
{
    font-size: 0.9em !important; /* Adjust the font size to your preference */
}

.badge-lg {
  font-size: 1.3rem !important; /* Adjust the font size to your preference */
  margin: 5px !important;
}

.badge-unity
{
    background-color: #3f3f3f;
}

.badge-unreal
{
    background-color: #271a3f;
}

.badge-monogame
{
  background-color: #ff0000;
}

.badge-opengl
{
  background-color: #0cd980;
}

.badge-solar
{
	background-color: #1b00b4;
}

.badge-blender
{
  background-color: #ff7b00;
}

.badge-illustrator
{
	background-color: #ffc400;
}

.badge-csharp
{
	background-color: #7b00b4;
}

.badge-cplus
{
	background-color: #3600b4;
}

.badge-lua
{
	background-color: #009fb4;
}

.badge-php
{
	background-color: #bd8bff;
}

.badge-python
{
	background-color: #75001d;
}

.badge-github
{
  background-color: #37485c;
}

.badge-perforce
{
  background-color: #58939b;
}

.badge-python
{
	background-color: #104c5a;
}

/* Images */
.portrait
{
  max-width: 150px;
  height: auto;
}

/* About */
.card {
  margin: 10px 10px;
  transition: box-shadow 0.5s ease-in-out;

}

input[type='checkbox'] {
  display: none;
}

/* Flip Cards CSS */
.card {
  margin: 10px 10px;
}

#flip.card-hide .card {
  box-shadow: none !important;
}

.card-container {
  display: grid;
  perspective: 700px;
}

.card-block {
  padding: 20px;
}

.full-screen-mode {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
  transition: all 0.3s ease;
}

.card-flip {
  display: grid;
  grid-template: 1fr / 1fr;
  grid-template-areas: "frontAndBack";
  transform-style: preserve-3d;
  transition: all 1s ease;
}

.card-flip div {
  backface-visibility: hidden;
  transform-style: preserve-3d;
}

.front {
  grid-area: frontAndBack;
}

.back {
  grid-area: frontAndBack;
  transform: rotateY(-180deg);
}

input[type='checkbox']:checked + .card-container .card-flip {
  transform: rotateY(180deg);
}

input[type='checkbox']:checked + .card-text {
  transform: scale(0.1) !important;
}

/* Contact form */
::selection
{
  color: #fff;
  background: #0D6EFD;
}

/* Wrapper */
.wrapper
{
  width: 1200px;
  border-radius: 5px;
}

.wrapper header
{
  font-size: 22px;
  font-weight: 600;
  padding: 20px 30px;
  border-bottom: 1px solid #ccc;
}

.wrapper form
{
  margin: 35px 30px;
}

.wrapper form.disabled
{
  pointer-events: none;
  opacity: 0.7;
}

/* Field */
form .dbl-field
{
  display: flex;
  margin-bottom: 25px;
  justify-content: space-between;
}

.dbl-field .field
{
  height: 50px;
  display: flex;
  position: relative;
  width: calc(100% / 2 - 13px);
}

/* Icons */
.wrapper form i
{
  position: absolute;
  top: 50%;
  left: 18px;
  color: rgb(180, 180, 180);
  font-size: 17px;
  pointer-events: none;
  transform: translateY(-50%);
}

form .field input,
form .message textarea
{
  width: 100%;
  height: 100%;
  outline: none;
  padding: 0 18px 0 48px;
  font-size: 18px;
  border-radius: 5px;
  border: 1px solid rgb(190, 190, 190);
}

.field input::placeholder,
.message textarea::placeholder
{
  color: rgb(150, 150, 150);
}

.field input:focus,
.message textarea:focus
{
  padding-left: 47px;
  border: 2px solid #0D6EFD;
}

.field input:focus ~ i,
.message textarea:focus ~ i
{
  color: #0D6EFD;
}

/* Message */
form .message
{
  position: relative;
}

form .message i
{
  top: 30px;
  font-size: 20px;
}

form .message textarea
{
  min-height: 200px;
  max-height: 300px;
  max-width: 100%;
  min-width: 100%;
  padding: 15px 20px 0 48px;
}

form .message textarea::-webkit-scrollbar
{
  width: 0px;
}

.message textarea:focus
{
  padding-top: 14px;
}

@media (max-width: 600px)
{
  .wrapper header
  {
    text-align: center;
  }
  .wrapper form
  {
    margin: 35px 20px;
  }
  form .dbl-field
  {
    flex-direction: column;
    margin-bottom: 0px;
  }
  form .dbl-field .field
  {
    width: 100%;
    height: 45px;
    margin-bottom: 20px;
  }
  form .message textarea
  {
    resize: none;
  }
}