@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@600;900&display=swap');

* {
	padding: 0;
	margin: 0;
	font-family: 'Montserrat', sans-serif;
}

:root {
	--gradient: linear-gradient(90.15deg, #FF9900 0.13%, #FF00A8 99.89%);
	--mainColor: #171322;
	--secondaryColor: #DFDFDF;

	--animate-delay: 0.3s !important;
}

html, body {
	position: relative;
	width: 100%;
	margin: 0;
	padding: 0;
}

body {
	color: var(--mainColor);
	background-color: #FBFBFB;
	box-sizing: border-box;
	overflow-x: hidden;
}

h1 {
	font-weight: 900 !important;
}

a {
	color: var(--mainColor);
	text-decoration: underline;
}


label {
	display: block;
}

input, button, select, textarea {
	font-family: inherit;
	font-size: inherit;
	-webkit-padding: 0.4em 0;
	padding: 0.4em;
	margin: 0 0 0.5em 0;
	box-sizing: border-box;
	border: none;
	border-radius: 2px;
	background-color: var(--secondaryColor);
}

input:disabled {
	color: #ccc;
}

button {
	color: #333;
	background-color: #f4f4f4;
	outline: none;
}

button:disabled {
	color: #999;
}

button:not(:disabled):active {
	background-color: #ddd;
}

button:focus {
	border-color: #666;
}

.noselect {
	-webkit-touch-callout: none; /* iOS Safari */
	  -webkit-user-select: none; /* Safari */
	   -khtml-user-select: none; /* Konqueror HTML */
		 -moz-user-select: none; /* Old versions of Firefox */
		  -ms-user-select: none; /* Internet Explorer/Edge */
			  user-select: none; /* Non-prefixed version, currently
									supported by Chrome, Edge, Opera and Firefox */
  }

  .shadowDarker {
	box-shadow: 0px 10px 20px 5px rgba(0, 0, 0, 0.15);
  }


  /* Animations for project cards*/

  .c_slideOutLeft {
	animation: c_slideOut 1.5s cubic-bezier(0, 0, 0, 1.04) forwards;
}

.c_slideInLeft {
	animation: c_slideInLeft 1.5s cubic-bezier(0, 0, 0, 1.04) forwards;
}

.c_slideInRight {
	animation: c_slideIn 1.5s cubic-bezier(0, 0, 0, 1.04) forwards;
}

.c_slideOutRight {
	animation: c_slideOutRight 1.5s cubic-bezier(0, 0, 0, 1.04) forwards;
}

@keyframes c_slideOut {
	0% {
		left: 60%;
	}

	100% {
		left: -100vw;
	}
}

@keyframes c_slideIn {
	0% {
		left: 100vw;
	}

	100% {
		left: 60%;
	}
}

@keyframes c_slideInLeft {
	0% {
		left: -100vw;
	}

	100% {
		left: 60%;
	}
}

@keyframes c_slideOutRight {
	0% {
		left: 60%;
	}

	100% {
		left: 100vw;
	}
}