@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;1,700&display=swap');

* {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
     font-family: "Roboto", serif;
}

html {
     scroll-behavior: smooth;
}

li {
     list-style-type: none;
}

p {
     line-height: 1.5;
     font-size: 16px;
}

a {
     text-decoration: none;
}

.click:hover {
     transform: scale(1.1);
}

.click:active {
     transform: scale(0.8);
}

section {
     background-color: rgb(245, 245, 245);
}

input,
textarea {
     width: 100%;
     background-color: #242424;
     color: #fff;
     outline: none;
     border: 3px solid #c0c4cc;
     border-top: none;
     border-left: none;
     border-right: none;
     height: 40px;
     transition: all 300ms ease;
}

textarea {
     resize: vertical;
     height: 100%;
     margin-top: 6px;
}

label {
     font-size: 14px;
     width: bold;
}

input:hover,
textarea:hover {
     border-color: #dcdfdc;
}

input:focus,
textarea:focus {
     border-color: #f06449;
}

.click {
     transition: all 300ms ease;
     cursor: pointer;
}

.title {
     font-size: 56px;
     margin-bottom: 12px;
     text-align: left;
     line-height: 1;
}

.orange {
     color: #f06449;
}

.link-hover-effect {
     position: relative;
}

.link-hover-effect:hover::after {
     left: 0;
     width: 100%;
}

.link-hover-effect::after {
     content: "";
     position: absolute;
     bottom: -3px;
     height: 3px;
     width: 0;
     right: 0;
     transition: all 300ms ease;
}

.link-hover-effect-white::after {
     background-color: white;
     height: 1.2px;
}

.link-hover-effect-black::after {
     background-color: black;
     height: 3px;
}

nav,
.scroll,
.header {
     opacity: 1;
     visibility: visible;
     transition: all 400ms 400ms;
}

.modal-open nav,
.modal-open .scroll,
.modal-open .header {
     opacity: 0;
     visibility: hidden;
     transition: all 400ms 200ms;
}

.dark-theme section {
     background-color: #242424;
}

.dark-theme #personal-logo {
     filter: invert(100%);
}

.dark-theme .title,
.dark-theme .section-title,
.dark-theme .subtitle,
.dark-theme .nav-link-anchor,
.dark-theme .fa-adjust,
.dark-theme .header-para {
     color: white;
}

.dark-theme .mail-btn {
     background-color: white;
     color: #242424;
}

.dark-theme .scroll-icon {
     border-color: white;
}

.dark-theme .scroll-icon::after {
     background-color: white;
}

.dark-theme .footer-logo-img {
     filter: invert(100%);
}

.dark-theme .scroll-icon::after,
.dark-theme .link-hover-effect-black::after {
     background-color: white;
}


/* LANDING PAGE */

#landing-page {
     min-height: 100vh;
}

.header {
     position: absolute;
     top: 55%;
     left: 50%;
     transform: translate(-50%, -50%);
     width: 100%;
     max-width: 1000px;
     padding: 0 30px;
}

.header-para {
     font-size: 24px;
     line-height: 2;
     max-width: 450px;
}

.social-lists {
     margin-top: 16px;
     display: flex;
}

.social-link {
     background-color: #f06449;
     color: white;
     padding: 6px;
     width: 32px;
     height: 32px;
     font-size: 14px;
     margin-right: 12px;
     display: flex;
     justify-content: center;
     align-items: center;
     border-radius: 50px;
}

.mail-btn {
     width: 70px;
     height: 70px;
     font-size: 32px;
     border-radius: 50%;
     border: none;
     background-color: #242424;
     color: white;
     position: absolute;
     position: fixed;
     bottom: 32px;
     right: 40px;
     z-index: 100;
     box-shadow: 0 12px 30px 0 rgb(0, 0, 0, 0.5);
}

.container {
     padding: 8% 0;
     width: 100%;
}

.row {
     width: 100%;
     max-width: 1100px;
     margin: 0 auto;
     padding: 0 12px;
}

.scroll {
     position: absolute;
     bottom: 20px;
     left: 50%;
     transform: trnaslateX(-50%);
}

.scroll-icon {
     width: 20px;
     height: 30px;
     border: 2px solid #242424;
     border-radius: 24px;
     display: flex;
     align-items: center;
     justify-content: center;
}

.scroll-icon::after {
     content: "";
     width: 4px;
     height: 6px;
     background-color: #242424;
     border-radius: 2px;
     animation: scroll 1000ms infinite alternate-reverse;
}

@keyframes scroll {
     0% {
          transform: translateY(3px);
     }

     100% {
          transform: translateY(-3px);
     }
}

/* NAVIGATION */

nav {
     display: flex;
     justify-content: space-between;
     align-items: center;
     width: 100%;
     max-width: 1200px;
     margin: 0 auto;
     padding: 0 20px;
     height: 100px;
}

#personal-logo {
     width: 80px;
     height: 80px;
}

.nav-links-list {
     display: flex;
}

.nav-link {
     margin: 0 12px;
}

.nav-link-anchor {
     font-size: 16px;
     color: #242424;
     font-weight: 700;
}

.fa-adjust {
     font-size: 20px;
}

/* modal */

.modal {
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     width: 55%;
     max-width: 1100px;
     height: 600px;
     border-radius: 20px;
     margin-top: 25px;
     overflow: hidden;
     display: flex;
     visibility: hidden;
     z-index: -1;
     transition: visibility 1s, z-index 1s, box-shadow 0.5s ease;
}

.modal-open .modal {
     z-index: 60;
     box-shadow: 0 20px 80px 0 rgb(0, 0, 0, 0.55);
     visibility: visible;
}

.modal-half {
     width: 50%;
     padding: 40px 72px;
     display: flex;
     flex-direction: column;
     justify-content: center;
     position: relative;
     transform: all 300ms ease-in;
}

.modal-open .modal-about,
.modal-open .modal-contact {
     transform: translateY(0%);
}

.modal-about {
     background-color: rgb(245, 245, 245);
     transform: translateX(-110%);
}

.modal-languages {
     display: flex;
     flex-wrap: wrap;
}

.modal-language {
     width: 65px;
     padding: 10px;
     position: relative;
     display: flex;
     flex-direction: column;
     align-items: center;
     transition: all 300ms ease;
}

.modal-language:hover .language-name {
     transform: scale(1);
}

.modal-language:hover {
     filter: brightness(80%);
     transform: scale(0.9);
}

.language-name {
     position: absolute;
     font-size: 12px;
     bottom: -10px;
     transform: scale(0);
     justify-content: center;
     transition: all 300ms ease;
}

.modal-language-img {
     width: 100%;
}

.modal-contact {
     background-color: #242424;
     color: white;
     transform: translateX(110%);
}

.modal-title {
     font-size: 26px;
}

.modal-subtitle {
     margin: 12px 0 24px 0;
     font-size: 14px;
}

.modal-para {
     margin-bottom: 12px;
     line-height: 1.75;
}

.form-item {
     margin-bottom: 20px;
}

.form-submit {
     background-color: #f06449;
     border: 2px solid #f06449;
     color: white;
     font-weight: 700;
     width: 100%;
     max-width: 240px;
     padding: 12px 24px;
     font-size: 20px;
     margin-top: 5px;
     transition: all 300ms ease;
}

.form-submit:hover {
     border-color: #fff;
     background-color: transparent;
}

.form-submit:active {
     border-color: #f06449;
     color: #f06449;
}

.modal-overlay-loading {
     background-color: #242424;
     font-size: 80px;
}

.modal-overlay {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     display: none;
     align-items: center;
     justify-content: center;
     z-index: -1;
}

.modal-overlay-success {
     background-color: #4bb543;
     font-size: 40px;
     font-weight: 700;
     text-align: center;
     padding: 28px;
}

.modal-overlay-visible {
     z-index: 1;
     display: flex;
}

.fa-spinner {
     animation: spinner 850ms infinite linear;
}

@keyframes spinner {
     0% {
          transform: rotate(0);
     }

     100% {
          transform: rotate(360deg);
     }
}

.modal-exit {
     position: absolute;
     top: 30px;
     right: 40px;
     color: #fff;
     font-size: 36px;
     z-index: 100;
}

/* PROJECTS */

.project {
     margin-bottom: 90px;
}

.section-title {
     text-align: center;
     font-size: 48px;
     margin-bottom: 60px;
}

.project-img {
     width: 100%;
     transition: all 600ms ease;
}

.project:hover .project-img {
     transform: scale(1.07);
     filter: blur(5px);
}

.project-wrapper {
     position: relative;
     border-radius: 20px;
     box-shadow: 0 20px 80px 0 rgb(0, 0, 0, 0.45);
     overflow: hidden;
}

.project-wrapper:hover .project-description {
     opacity: 1;
     transform: translateY(-50%);
}

.project-wrapper:hover .project-img {
     transform: scale(1.07);
     filter: blur(5px);
}

.project-description {
     position: absolute;
     top: 50%;
     left: 50px;
     transform: translateY(100%);
     opacity: 0;
     transition: opacity 300ms, transform 450ms ease;
     color: white;
     max-width: 550px;
}

.project-wrapper:hover .project-wrapper-bg {
     opacity: 0.7;
}

.project-wrapper-bg {
     position: absolute;
     top: 0%;
     left: 0%;
     width: 100%;
     height: 100%;
     background-color: #1c1d25;
     opacity: 0;
     transition: all 450ms ease;
     border-radius: 15px;
}

.project-description-title {
     font-size: 40px;
}

.project-description-subtitle {
     margin-top: 8px;
}

.project-description-link {
     color: white;
     font-size: 20px;
     margin-right: 16px;
}

.project-description-para {
     margin: 16px 0;
}

/* FOOTER */

footer {
     position: relative;
     background-color: #242424;
     display: flex;
     padding: 3% 0;
}

.footer-row {
     display: flex;
     flex-direction: column;
     align-items: center;
}

.footer-logo-img {
     width: 150px;
     height: 150px;
}

.footer-social-links {
     width: 100%;
     max-width: 500px;
     display: flex;
     justify-content: space-around;
     margin: 20px 0;
}

.footer-social-link,
.footer-copyright {
     color: white;
}

/* 

SHAPES

shapes on the first row
height = 15vh

shapes on the second row
height = 50vh

shapes on the third row
height = 80vh

shapes on the first column
width = 5vw

shapes on the second column
width = 50vw

shapes on the third column
width = 80vw

*/

.shape {
     position: fixed;
}

.shape-0 {
     top: 15vh;
     left: 5vw;
}

.shape-1 {
     top: 15vh;
     left: 50vw;
}

.shape-2 {
     top: 15vh;
     left: 80vw;
}

.shape-3 {
     top: 50vh;
     left: 5vw;
}

.shape-4 {
     top: 50vh;
     left: 50vw;
}

.shape-5 {
     top: 50vh;
     left: 80vw;
}

.shape-6 {
     top: 80vh;
     left: 5vw;
}

.shape-7 {
     top: 80vh;
     left: 50vw;
}

.shape-8 {
     top: 80vh;
     left: 80vw;
}

/* small phones, tablets, latge smart phones */

@media (max-width: 1100px) {
     .title {
          font-size: 80px;
     }

     .header-para {
          font-size: 20px;
     }

     .modal {
          top: 0;
          left: 0;
          transform: none;
          height: auto;
          width: 100%;
          flex-direction: column-reverse;
          border-radius: 0;
     }

     .modal-half {
          width: 100%;
     }
}

/* small phones */

@media(max-width: 480px) {
     .title {
          font-size: 52px;
     }

     .header-para {
          font-size: 18px;
     }

     .nav-link:first-child {
          display: none;
     }

     .project-description-para {
          display: none;
     }

     .project-description {
          left: 0;
          padding: 0;
          width: 100%;
          text-align: center;
     }

     .project-description-subtitle {
          margin-bottom: 8px;
     }

     .modal-half {
          padding: 30px;
     }
}

@media(max-width: 490px) {
     .shape {
          display: none;
     }
}