header nav li a, main .aboutContainer .contentContainer .navigationSlider .selectedDiv, main .aboutContainer .contentContainer .navigationSlider .notSelectedDiv, main .aboutContainer .contentContainer .textSlider .details div a, main .contactContainer .contactsWay div h2 a, main .experienceContainer div .details a, footer .funny a, .error a { color: inherit; cursor: pointer; display: inline-block; -webkit-transition: -webkit-transform .4s; transition: -webkit-transform .4s; transition: transform .4s; transition: transform .4s, -webkit-transform .4s; }

header nav li a:hover, main .aboutContainer .contentContainer .navigationSlider .selectedDiv:hover, main .aboutContainer .contentContainer .navigationSlider .notSelectedDiv:hover, main .aboutContainer .contentContainer .textSlider .details div a:hover, main .contactContainer .contactsWay div h2 a:hover, main .experienceContainer div .details a:hover, footer .funny a:hover, .error a:hover { color: #cfe2ff; -webkit-transform: scale(1.2); transform: scale(1.2); }

header nav .selectedRoute, main .aboutContainer .contentContainer .navigationSlider .selectedDiv, main .projectsContainer ul input:checked + label { font-weight: bold; color: white; }

header nav .selectedRoute:hover, main .aboutContainer .contentContainer .navigationSlider .selectedDiv:hover, main .projectsContainer ul input:checked + label:hover { color: white; }

body { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }

main .contactContainer .contactsWay div .selectable { -webkit-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text; }

.spinner { border-radius: 100%; -webkit-animation: sk-scaleout 1.0s infinite ease-in-out; animation: sk-scaleout 1.0s infinite ease-in-out; }

@-webkit-keyframes sk-scaleout { 0% { -webkit-transform: scale(0); }
  100% { -webkit-transform: scale(1);
    opacity: 0; } }

@keyframes sk-scaleout { 0% { -webkit-transform: scale(0);
    transform: scale(0); }
  100% { -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 0; } }

body { color: #a7bac5; min-height: 100vh; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; font-family: Raleway, sans-serif; font-size: 1rem; }

h1 { font-size: 2rem; }

h2 { font-size: 1.6rem; }

i { text-align: center; vertical-align: middle; }

a { font-weight: auto; text-decoration: none; color: inherit; }

a:hover { font-weight: auto; text-decoration: none; color: inherit; }

p { margin: 0; }

ul { padding: 0; }

footer .shaking { -webkit-animation: shake 6s infinite; animation: shake 6s infinite; -webkit-animation-delay: 2s; animation-delay: 2s; display: block; }

@-webkit-keyframes shake { 2.5%, 22.5% { -webkit-transform: translate3d(-1px, 0, 0); transform: translate3d(-1px, 0, 0); }
  5%, 20% { -webkit-transform: translate3d(2px, 0, 0); transform: translate3d(2px, 0, 0); }
  7.5%, 12.5%, 17.5% { -webkit-transform: translate3d(-4px, 0, 0); transform: translate3d(-4px, 0, 0); }
  10%, 15% { -webkit-transform: translate3d(4px, 0, 0); transform: translate3d(4px, 0, 0); } }

@keyframes shake { 2.5%, 22.5% { -webkit-transform: translate3d(-1px, 0, 0); transform: translate3d(-1px, 0, 0); }
  5%, 20% { -webkit-transform: translate3d(2px, 0, 0); transform: translate3d(2px, 0, 0); }
  7.5%, 12.5%, 17.5% { -webkit-transform: translate3d(-4px, 0, 0); transform: translate3d(-4px, 0, 0); }
  10%, 15% { -webkit-transform: translate3d(4px, 0, 0); transform: translate3d(4px, 0, 0); } }

.background { -webkit-animation: breathingBlur 8s infinite, zoomIn 16s forwards; animation: breathingBlur 8s infinite, zoomIn 16s forwards; }

@-webkit-keyframes breathingBlur { 0% { -webkit-filter: grayscale(80%) blur(4px) brightness(30%); filter: grayscale(80%) blur(4px) brightness(30%); }
  50% { -webkit-filter: grayscale(85%) blur(2px) brightness(30%); filter: grayscale(85%) blur(2px) brightness(30%); }
  100% { -webkit-filter: grayscale(90%) blur(4px) brightness(30%); filter: grayscale(90%) blur(4px) brightness(30%); } }

@keyframes breathingBlur { 0% { -webkit-filter: grayscale(80%) blur(4px) brightness(30%); filter: grayscale(80%) blur(4px) brightness(30%); }
  50% { -webkit-filter: grayscale(85%) blur(2px) brightness(30%); filter: grayscale(85%) blur(2px) brightness(30%); }
  100% { -webkit-filter: grayscale(90%) blur(4px) brightness(30%); filter: grayscale(90%) blur(4px) brightness(30%); } }

@-webkit-keyframes zoomIn { 0% { -webkit-transform: scale(1.14); transform: scale(1.14); }
  100% { -webkit-transform: scale(1.14); transform: scale(1.14); } }

@keyframes zoomIn { 0% { -webkit-transform: scale(1.14); transform: scale(1.14); }
  100% { -webkit-transform: scale(1.14); transform: scale(1.14); } }

header nav { background-color: #6d7e8f; }

header nav .title { padding-left: 1%; cursor: pointer; }

header nav .title h1 { -webkit-transition: -webkit-transform .4s; transition: -webkit-transform .4s; transition: transform .4s; transition: transform .4s, -webkit-transform .4s; }

header nav .title h1:hover { color: #cfe2ff; -webkit-transform: scale(1.1); transform: scale(1.1); }

header nav li { padding: 0.8rem; text-align: center; margin: 5px; }

header nav li a { font-size: 1.1rem; padding-left: 5px; padding-right: 5px; }

header nav .socialMediaLink { max-width: 2.5rem; height: auto; border-radius: 50%; margin: 5px; -webkit-transition: -webkit-transform .4s; transition: -webkit-transform .4s; transition: transform .4s; transition: transform .4s, -webkit-transform .4s; }

header nav .socialMediaLink:hover { -webkit-transform: rotate(5deg) scale(1.2); transform: rotate(5deg) scale(1.2); }

.background {
  top: 0;
  left: 0;
  z-index: -10;
  background-color: black;
  background-size: cover;
  min-width: 100%;
  min-height: 100%;
  position: fixed;
  display: block;
}


main { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; display: -webkit-box; display: -ms-flexbox; display: flex; overflow: auto; }

main header nav li a, header nav li main a, main .aboutContainer .contentContainer .navigationSlider .selectedDiv, main .aboutContainer .contentContainer .navigationSlider .notSelectedDiv, main .aboutContainer .contentContainer .textSlider .details div a, main .contactContainer .contactsWay div h2 a, main .experienceContainer div .details a, main footer .funny a, footer .funny main a, main .error a, .error main a { color: inherit; cursor: pointer; display: inline-block; -webkit-transition: -webkit-transform .4s; transition: -webkit-transform .4s; transition: transform .4s; transition: transform .4s, -webkit-transform .4s; }

main header nav li a:hover, header nav li main a:hover, main .aboutContainer .contentContainer .navigationSlider .selectedDiv:hover, main .aboutContainer .contentContainer .navigationSlider .notSelectedDiv:hover, main .aboutContainer .contentContainer .textSlider .details div a:hover, main .contactContainer .contactsWay div h2 a:hover, main .experienceContainer div .details a:hover, main footer .funny a:hover, footer .funny main a:hover, main .error a:hover, .error main a:hover { color: #cfe2ff; -webkit-transform: scale(1.2); transform: scale(1.2); }

main header nav .selectedRoute, header nav main .selectedRoute, main .aboutContainer .contentContainer .navigationSlider .selectedDiv, main .projectsContainer ul input:checked + label { font-weight: bold; color: white; }

main header nav .selectedRoute:hover, header nav main .selectedRoute:hover, main .aboutContainer .contentContainer .navigationSlider .selectedDiv:hover, main .projectsContainer ul input:checked + label:hover { color: white; }

main body { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }

main .contactContainer .contactsWay div .selectable { -webkit-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text; }

main .spinner { border-radius: 100%; -webkit-animation: sk-scaleout 1.0s infinite ease-in-out; animation: sk-scaleout 1.0s infinite ease-in-out; }

@-webkit-keyframes sk-scaleout { 0% { -webkit-transform: scale(0); }
  100% { -webkit-transform: scale(1);
    opacity: 0; } }

@keyframes sk-scaleout { 0% { -webkit-transform: scale(0);
    transform: scale(0); }
  100% { -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 0; } }

main .aboutContainer { width: 100%; display: -ms-grid; display: grid; -ms-grid-columns: 50% 50%; grid-template-columns: 50% 50%; }

main .aboutContainer .imageSlider { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-item-align: center; align-self: center; margin: 0 15px; overflow: hidden; border: 8px solid; border-radius: 50%; justify-self: center; max-width: 600px; height: auto; }

main .aboutContainer .imageSlider .carousel-indicators li { width: 10px; height: 10px; cursor: pointer; border-radius: 100%; }

main .aboutContainer .imageSlider .image { opacity: 0.9; height: 22rem; width: 22rem; background-color: #637485; -webkit-filter: opacity(80%); filter: opacity(80%); }

main .aboutContainer .contentContainer { height: 80%; width: 80%; -ms-flex-item-align: center; align-self: center; margin: 2rem auto; margin-left: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; }

main .aboutContainer .contentContainer .headersContainer { text-align: justify; margin: 2.5% 0; font-style: oblique; font-family: Alegreya, sans-serif; }

main .aboutContainer .contentContainer .headersContainer h1 { font-size: 2rem; }

main .aboutContainer .contentContainer .headersContainer h3 { font-size: 1.5rem; text-align: right; }

main .aboutContainer .contentContainer .navigationSlider { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-flow: row; flex-flow: row; -ms-flex-pack: distribute; justify-content: space-around; margin: 2.5% 0; -ms-flex-wrap: wrap; flex-wrap: wrap; font-size: 1.2rem; }

main .aboutContainer .contentContainer .textSlider { height: 60%; margin: 2.5% 0; line-height: 1.8rem; }

main .aboutContainer .contentContainer .textSlider .details p { text-align: center; font-size: 1.4rem; margin-bottom: 1rem; font-weight: bold; }

main .aboutContainer .contentContainer .textSlider .details hr { margin: 2% 5%; background-color: #a7bac5; }

main .aboutContainer .contentContainer .textSlider .details div { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; }

main .aboutContainer .contentContainer .textSlider .details div > * { margin: 0 0.5rem; }

main .aboutContainer .contentContainer .textSlider .details div a { display: -webkit-box !important; display: -ms-flexbox !important; display: flex !important; }

main .aboutContainer .contentContainer .textSlider .fadeIn { -webkit-animation: fadeInAnimation 500ms forwards; animation: fadeInAnimation 500ms forwards; }

@-webkit-keyframes fadeInAnimation { 0% { opacity: 0; }
  100% { opacity: 1; } }

@keyframes fadeInAnimation { 0% { opacity: 0; }
  100% { opacity: 1; } }

main .aboutContainer .contentContainer .textSlider .fadeOut { -webkit-animation: fadeOutAnimation 500ms forwards; animation: fadeOutAnimation 500ms forwards; }

@-webkit-keyframes fadeOutAnimation { 0% { opacity: 1; }
  100% { opacity: 0; } }

@keyframes fadeOutAnimation { 0% { opacity: 1; }
  100% { opacity: 0; } }

main .contactContainer { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; padding: 2% 20%; text-align: center; }

main .contactContainer .contactsWay { display: table; border-collapse: separate; border-spacing: 1rem; width: 100%; margin: 1rem auto; }

main .contactContainer .contactsWay div { display: table-row; }

main .contactContainer .contactsWay div h2 { width: 50%; display: table-cell; vertical-align: middle; font-size: 1.2rem; }

main .contactContainer form { padding: 0 10%; }

main .contactContainer form label { font-size: 1.2rem; }

main .contactContainer form h2 { margin: 2rem 0; font-size: 1.6rem; }

main .contactContainer form .formAction { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; }

main .contactContainer form input, main .contactContainer form textarea { color: #a7bac5; background-color: #6d7e8f !important; border-color: #a7bac5 !important; }

main .contactContainer form input:focus, main .contactContainer form textarea:focus { border-color: #cfe2ff !important; color: #cfe2ff; }

main .contactContainer form input::-webkit-input-placeholder, main .contactContainer form textarea::-webkit-input-placeholder { color: #a7bac5; }

main .contactContainer form input:-ms-input-placeholder, main .contactContainer form textarea:-ms-input-placeholder { color: #a7bac5; }

main .contactContainer form input::-ms-input-placeholder, main .contactContainer form textarea::-ms-input-placeholder { color: #a7bac5; }

main .contactContainer form input::placeholder, main .contactContainer form textarea::placeholder { color: #a7bac5; }

main .contactContainer form textarea { border-radius: 0.25rem; width: 100%; padding: 0.375rem 0.75rem; }

main .contactContainer form button { background-color: #6d7e8f !important; }

main .contactContainer form button:hover, main .contactContainer form button:focus { color: #cfe2ff !important; border-color: #a7bac5; background-color: #637485 !important; }

main .contactContainer .row { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; margin: 0; }

main .contactContainer .row h2 { margin: 0 2%; }

main header nav li a, header nav li main a, main .aboutContainer .contentContainer .navigationSlider .selectedDiv, main .aboutContainer .contentContainer .navigationSlider .notSelectedDiv, main .aboutContainer .contentContainer .textSlider .details div a, main .contactContainer .contactsWay div h2 a, main .experienceContainer div .details a, main footer .funny a, footer .funny main a, main .error a, .error main a { color: inherit; cursor: pointer; display: inline-block; -webkit-transition: -webkit-transform .4s; transition: -webkit-transform .4s; transition: transform .4s; transition: transform .4s, -webkit-transform .4s; }

main header nav li a:hover, header nav li main a:hover, main .aboutContainer .contentContainer .navigationSlider .selectedDiv:hover, main .aboutContainer .contentContainer .navigationSlider .notSelectedDiv:hover, main .aboutContainer .contentContainer .textSlider .details div a:hover, main .contactContainer .contactsWay div h2 a:hover, main .experienceContainer div .details a:hover, main footer .funny a:hover, footer .funny main a:hover, main .error a:hover, .error main a:hover { color: #cfe2ff; -webkit-transform: scale(1.2); transform: scale(1.2); }

main header nav .selectedRoute, header nav main .selectedRoute, main .aboutContainer .contentContainer .navigationSlider .selectedDiv, main .projectsContainer ul input:checked + label { font-weight: bold; color: white; }

main header nav .selectedRoute:hover, header nav main .selectedRoute:hover, main .aboutContainer .contentContainer .navigationSlider .selectedDiv:hover, main .projectsContainer ul input:checked + label:hover { color: white; }

main body { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }

main .contactContainer .contactsWay div .selectable { -webkit-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text; }

main .spinner { border-radius: 100%; -webkit-animation: sk-scaleout 1.0s infinite ease-in-out; animation: sk-scaleout 1.0s infinite ease-in-out; }

@-webkit-keyframes sk-scaleout { 0% { -webkit-transform: scale(0); }
  100% { -webkit-transform: scale(1);
    opacity: 0; } }

@keyframes sk-scaleout { 0% { -webkit-transform: scale(0);
    transform: scale(0); }
  100% { -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 0; } }

main .experienceContainer { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; width: 100%; overflow: hidden; }

main .experienceContainer div { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; position: relative; height: 350px; }

main .experienceContainer div:hover .imageContainer { width: 20%; }

main .experienceContainer div:hover .details { left: 20%; }

main .experienceContainer div .imageContainer { width: 100%; z-index: 1; -webkit-transition: width 500ms; transition: width 500ms; -webkit-transition-delay: 100ms; transition-delay: 100ms; }

main .experienceContainer div .imageContainer img { margin: auto; height: 60%; -webkit-box-shadow: 0 0 25px 25px rgba(255, 255, 255, 0.14); box-shadow: 0 0 25px 25px rgba(255, 255, 255, 0.14); opacity: 0.85; }

main .experienceContainer div .details { -webkit-transition: left 500ms; transition: left 500ms; z-index: 2; position: absolute; left: 100%; width: 80%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; padding: 1rem; padding-right: 5%; }

main .experienceContainer div .details h1 { font-size: 2.5rem; border-bottom: 1px solid; }

main .experienceContainer div .details h5 { font-size: 1rem; }

main .experienceContainer div .details div { display: block; height: 100%; overflow: hidden; margin: 0.4rem; overflow: auto; padding-right: 15rem; }

main .experienceContainer div .details a { margin-top: 1rem; width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; text-transform: capitalize; }

main .technologiesContainer { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; padding: 4% 12%; padding-bottom: 0; }

main .technologiesContainer h1 { font-size: 3rem; text-transform: capitalize; }

main .technologiesContainer h4 { font-size: 1.4rem; margin: 1rem 0.5rem; }

main .technologiesContainer .links { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-pack: space-evenly; -ms-flex-pack: space-evenly; justify-content: space-evenly; -ms-flex-wrap: wrap; flex-wrap: wrap; margin-bottom: 5rem; }

main .technologiesContainer .links div { margin: 1.2rem 1rem; text-align: center; width: 10rem; }

main .technologiesContainer .links div p { margin: 0.7rem 0; }

main .technologiesContainer .links div p:first-letter { text-transform: capitalize; }

main .technologiesContainer .links div img { width: 4.5rem; height: 4.5rem; border-radius: 50%; -webkit-animation: rotate-in-center 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) both; animation: rotate-in-center 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) both; }

@-webkit-keyframes rotate-in-center { 0% { -webkit-transform: rotate(-360deg);
    transform: rotate(-360deg);
    opacity: 0; }
  100% { -webkit-transform: rotate(0);
    transform: rotate(0);
    opacity: 1; } }

@keyframes rotate-in-center { 0% { -webkit-transform: rotate(-360deg);
    transform: rotate(-360deg);
    opacity: 0; }
  100% { -webkit-transform: rotate(0);
    transform: rotate(0);
    opacity: 1; } }

main .technologiesContainer .links a:hover span { -webkit-transition: -webkit-transform .4s; transition: -webkit-transform .4s; transition: transform .4s; transition: transform .4s, -webkit-transform .4s; -webkit-transform: rotate(5deg) scale(1.2); transform: rotate(5deg) scale(1.2); display: block; }

main .technologiesContainer .links a:hover p { color: #cfe2ff; text-decoration: none; }

main header nav li a, header nav li main a, main .aboutContainer .contentContainer .navigationSlider .selectedDiv, main .aboutContainer .contentContainer .navigationSlider .notSelectedDiv, main .aboutContainer .contentContainer .textSlider .details div a, main .contactContainer .contactsWay div h2 a, main .experienceContainer div .details a, main footer .funny a, footer .funny main a, main .error a, .error main a { color: inherit; cursor: pointer; display: inline-block; -webkit-transition: -webkit-transform .4s; transition: -webkit-transform .4s; transition: transform .4s; transition: transform .4s, -webkit-transform .4s; }

main header nav li a:hover, header nav li main a:hover, main .aboutContainer .contentContainer .navigationSlider .selectedDiv:hover, main .aboutContainer .contentContainer .navigationSlider .notSelectedDiv:hover, main .aboutContainer .contentContainer .textSlider .details div a:hover, main .contactContainer .contactsWay div h2 a:hover, main .experienceContainer div .details a:hover, main footer .funny a:hover, footer .funny main a:hover, main .error a:hover, .error main a:hover { color: #cfe2ff; -webkit-transform: scale(1.2); transform: scale(1.2); }

main header nav .selectedRoute, header nav main .selectedRoute, main .aboutContainer .contentContainer .navigationSlider .selectedDiv, main .projectsContainer ul input:checked + label { font-weight: bold; color: white; }

main header nav .selectedRoute:hover, header nav main .selectedRoute:hover, main .aboutContainer .contentContainer .navigationSlider .selectedDiv:hover, main .projectsContainer ul input:checked + label:hover { color: white; }

main body { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }

main .contactContainer .contactsWay div .selectable { -webkit-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text; }

main .spinner { border-radius: 100%; -webkit-animation: sk-scaleout 1.0s infinite ease-in-out; animation: sk-scaleout 1.0s infinite ease-in-out; }

@-webkit-keyframes sk-scaleout { 0% { -webkit-transform: scale(0); }
  100% { -webkit-transform: scale(1);
    opacity: 0; } }

@keyframes sk-scaleout { 0% { -webkit-transform: scale(0);
    transform: scale(0); }
  100% { -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 0; } }

main .projectsContainer { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; }

main .projectsContainer ul { background-color: #6d7e8f; list-style: none; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: space-evenly; -ms-flex-pack: space-evenly; justify-content: space-evenly; -ms-flex-wrap: wrap; flex-wrap: wrap; margin: 0 0; }

main .projectsContainer ul li { margin: 1.2rem 0; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; border-radius: 50px; background-color: #637485; }

main .projectsContainer ul input { visibility: hidden; }

main .projectsContainer ul input:hover + label { color: #cfe2ff; }

main .projectsContainer ul label { margin: auto; cursor: pointer; }

main .projectsContainer div { display: -ms-grid; display: grid; -ms-grid-columns: (minmax(400px, 1fr))[auto-fill]; grid-template-columns: repeat(auto-fill, minmax(400px, 1fr)); }

main .projectsContainer div .projectContainer { height: -webkit-fit-content; height: -moz-fit-content; height: fit-content; margin-top: 60px; position: relative; overflow: hidden; border-bottom: 4px solid #637485; }

main .projectsContainer div .projectContainer:hover .description { -webkit-transition: max-height 500ms linear 125ms, min-height 125ms linear, opacity 500ms; transition: max-height 500ms linear 125ms, min-height 125ms linear, opacity 500ms; min-height: 250px; max-height: 1000px; opacity: 1; }

main .projectsContainer div .projectContainer:hover .projectBackground { -webkit-filter: brightness(35%) blur(1px); filter: brightness(35%) blur(1px); }

main .projectsContainer div .projectContainer .projectBackground { border-top: 4px solid #637485; -webkit-transition: -webkit-filter 500ms linear; transition: -webkit-filter 500ms linear; transition: filter 500ms linear; transition: filter 500ms linear, -webkit-filter 500ms linear; top: 0; left: 0; background-size: cover; min-width: 100%; min-height: 100%; position: absolute; display: block; -webkit-filter: brightness(25%) blur(4px); filter: brightness(25%) blur(4px); background-color: white; }

main .projectsContainer div .projectContainer div { min-height: 200px; padding: 1.5rem; }

main .projectsContainer div .projectContainer div h1 { width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; margin-right: 1rem; font-size: 1.5rem; border-bottom: 1px solid; height: -webkit-fit-content; height: -moz-fit-content; height: fit-content; -ms-flex-item-align: start; align-self: flex-start; }

main .projectsContainer div .projectContainer div h1:first-letter { text-transform: capitalize; }

main .projectsContainer div .projectContainer div a { display: block; margin-top: auto; font-size: 1.2rem; width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; }

main .projectsContainer div .projectContainer div a img { max-width: 1.5rem; height: auto; -webkit-transition: -webkit-transform .4s; transition: -webkit-transform .4s; transition: transform .4s; transition: transform .4s, -webkit-transform .4s; border-radius: 50%; }

main .projectsContainer div .projectContainer div a:hover { color: #cfe2ff; }

main .projectsContainer div .projectContainer div a:hover img { border-radius: 48%; -webkit-transform: rotate(5deg) scale(1.2); transform: rotate(5deg) scale(1.2); }

main .projectsContainer div .projectContainer div .description { -webkit-transition: max-height 500ms linear, min-height 125ms linear 500ms, opacity 500ms; transition: max-height 500ms linear, min-height 125ms linear 500ms, opacity 500ms; display: block; max-height: 0px; min-height: 0px; padding: 1rem; overflow: hidden; opacity: 0; }

main .projectsContainer div .projectContainer div .description div { padding: 0; }

main .projectsContainer div .projectContainer div .description ul { display: block; background-color: initial; }

main .projectsContainer div .projectContainer div .description ul li { padding: 0 0.8rem; font-size: 0.8rem; margin: 0 0 0.1rem; }

main .projectsContainer span { display: block; text-align: center; margin-top: auto; padding: 15px 0; }

main .projectsContainer span a { font-size: 1rem; }

main .projectsContainer span a img { max-width: 1.2rem; height: auto; -webkit-transition: -webkit-transform .4s; transition: -webkit-transform .4s; transition: transform .4s; transition: transform .4s, -webkit-transform .4s; border-radius: 50%; }

main .projectsContainer span a:hover { color: #cfe2ff; }

main .projectsContainer span a:hover img { border-radius: 48%; -webkit-transform: rotate(5deg) scale(1.2); transform: rotate(5deg) scale(1.2); }

main .indexContainer { width: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; }

main .indexContainer h1 { font-size: 2.5rem; margin: auto auto; -webkit-animation: text-focus-in 1s cubic-bezier(0.55, 0.085, 0.68, 0.53) both; animation: text-focus-in 1s cubic-bezier(0.55, 0.085, 0.68, 0.53) both; }

@-webkit-keyframes text-focus-in { 0% { -webkit-filter: blur(12px); filter: blur(12px);
    opacity: 0; }
  100% { -webkit-filter: blur(0px); filter: blur(0px);
    opacity: 1; } }

@keyframes text-focus-in { 0% { -webkit-filter: blur(12px); filter: blur(12px);
    opacity: 0; }
  100% { -webkit-filter: blur(0px); filter: blur(0px);
    opacity: 1; } }

header nav li a, main .aboutContainer .contentContainer .navigationSlider .selectedDiv, main .aboutContainer .contentContainer .navigationSlider .notSelectedDiv, main .aboutContainer .contentContainer .textSlider .details div a, main .contactContainer .contactsWay div h2 a, main .experienceContainer div .details a, footer .funny a, .error a { color: inherit; cursor: pointer; display: inline-block; -webkit-transition: -webkit-transform .4s; transition: -webkit-transform .4s; transition: transform .4s; transition: transform .4s, -webkit-transform .4s; }

header nav li a:hover, main .aboutContainer .contentContainer .navigationSlider .selectedDiv:hover, main .aboutContainer .contentContainer .navigationSlider .notSelectedDiv:hover, main .aboutContainer .contentContainer .textSlider .details div a:hover, main .contactContainer .contactsWay div h2 a:hover, main .experienceContainer div .details a:hover, footer .funny a:hover, .error a:hover { color: #cfe2ff; -webkit-transform: scale(1.2); transform: scale(1.2); }

header nav .selectedRoute, main .aboutContainer .contentContainer .navigationSlider .selectedDiv, main .projectsContainer ul input:checked + label { font-weight: bold; color: white; }

header nav .selectedRoute:hover, main .aboutContainer .contentContainer .navigationSlider .selectedDiv:hover, main .projectsContainer ul input:checked + label:hover { color: white; }

body { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }

main .contactContainer .contactsWay div .selectable { -webkit-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text; }

.spinner { border-radius: 100%; -webkit-animation: sk-scaleout 1.0s infinite ease-in-out; animation: sk-scaleout 1.0s infinite ease-in-out; }

@-webkit-keyframes sk-scaleout { 0% { -webkit-transform: scale(0); }
  100% { -webkit-transform: scale(1);
    opacity: 0; } }

@keyframes sk-scaleout { 0% { -webkit-transform: scale(0);
    transform: scale(0); }
  100% { -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 0; } }

footer { padding: .1rem 1rem; background-color: #6d7e8f; }

footer hr { margin: 2px 10%; }

footer div { width: 100%; text-align: center; }

footer img { max-width: 1.2rem; height: auto; border-radius: 50%; margin: 2px; }

footer .githubLinkContainer .githubLink { -webkit-transition: -webkit-transform .4s; transition: -webkit-transform .4s; transition: transform .4s; transition: transform .4s, -webkit-transform .4s; }

footer .githubLinkContainer:hover .githubLink { border-radius: 48%; -webkit-transform: rotate(5deg) scale(1.2); transform: rotate(5deg) scale(1.2); }

footer .collapseButton { width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; margin: auto; cursor: pointer; }

footer .collapseButton:hover { color: #cfe2ff; }

footer .funny a { margin: 0 0.1rem; }

.error { position: relative; text-align: center; width: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; }

.error .code { z-index: 2; font-size: 15vmax; }

.error .info { z-index: 2; font-size: 2vmax; }

.error .gif { position: absolute; bottom: 0; right: 1vmax; z-index: 1; }

.error .gif img { max-width: 100%; max-height: 100%; }

@media screen and (max-width: 768px) { body { font-size: 0.8rem; }
  h1 { font-size: 1.8rem; }
  h2 { font-size: 1.4rem; }
  main .aboutContainer { margin: 5% 5%; display: block; overflow: auto; position: relative; }
  main .aboutContainer .imageSlider { z-index: -1; position: absolute; width: 100%; height: 100%; border: 0; border-radius: 0; margin: 0; }
  main .aboutContainer .imageSlider .image { max-width: unset; max-height: unset; height: 100%; width: auto; -webkit-filter: brightness(40%); filter: brightness(40%); }
  main .aboutContainer .contentContainer { margin-left: auto; }
  main .projectsContainer ul li { margin: 0.1rem; }
  main .projectsContainer div { -ms-grid-columns: (100%)[auto-fill]; grid-template-columns: repeat(auto-fill, 100%); }
  main .technologiesContainer { padding: 4% 2%; }
  main .technologiesContainer h1, main .technologiesContainer h4 { text-align: center; }
  main .technologiesContainer .links div { width: 8rem; }
  main .technologiesContainer .links div img { width: 4rem; height: 4rem; }
  main .experienceContainer div .imageContainer { -webkit-transition: -webkit-filter 500ms; transition: -webkit-filter 500ms; transition: filter 500ms; transition: filter 500ms, -webkit-filter 500ms; }
  main .experienceContainer div:hover .imageContainer { width: 100%; -webkit-filter: brightness(40%); filter: brightness(40%); }
  main .experienceContainer div:hover .details { left: 0%; }
  main .experienceContainer div .details { width: 100%; }
  main .experienceContainer div .details div { padding-right: 0rem; }
  main .contactContainer { padding: 2% 0; } }
/*# sourceMappingURL=styles.css.map */