/* --- Global --- */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
}

html, body {
    font-family: 'Bai Jamjuree', sans-serif;
    background-color:#111111;
}

body {
    overflow-y: scroll;
    scroll-behavior: smooth;
}

ul, ol, li {
    list-style: none;
    list-style-type: none;
}

a {
    text-decoration: none;
    color: #ffffff;
}

.main__container {
    min-width: 500px;
    width: 100%;
}

/* --- Nav --- */

.nav__container {
    font-family: 'Bai Jamjuree', sans-serif;
    width: 100%;
    position: fixed;
    top: 0;
    z-index: 1000;
}

.nav__desktop {
    height: 70px;
    transition: background-color 0.2s ease-in-out;
}

.nav__listitems {
    display: flex;
    justify-content: space-evenly;
}

.nav__item a {
    display: block;
    padding: 24px 20px;
    font-size: 18px;
    font-weight: 200;
    color: #ffffff;
}

.nav__item a:hover {
    color:#ffffffba;
}

.nav__responsive {
    display: none;
}

@media screen and (max-width: 700px) {
    .nav__desktop {
        display: none;
    }

    .nav__responsive {
        display: block;
        position: relative;
    }

    .nav__responsive-menu {
        position: relative;
        width: 100%;
        height: 70px;
        display: flex;
        justify-content: space-between;
    }

    .nav__responsive-menu > a, 
    .nav__responsive-menu > i {
        margin: 15px 20px;
        padding: 5px 0px;
        color: #ffffffa6;
        z-index: 1000;
    }

    .nav__responsive-menu i {
        font-size: 25px;
    }

    .nav__responsive-menu a:hover,
    .nav__responsive-menu i:hover {
        color: #ffffff;
    }

    .nav__responsive-menu i:hover ~ .nav__responsive-options {
        right: 0;
        transition: right 1s;
    }

    .nav__responsive-options {
        position: absolute;
        right: -1000px;
        width: 100%;
        height: 100vmax;
        background-color: #111111;
        transition: right 2s;
    }

    .nav__responsive-listitems {
        position: relative;
        top: 70px;
        display: flex;
        flex-direction: column;
    }

    .nav__responsive-item a {
        padding: 15px 40px;
        display: block;
        font-size: 18px;
        font-weight: 200;
    }

    .nav__responsive-item a:hover {
        color: #ffffff;
    }

    .nav__responsive-item hr {
        border: none;
        height: 1px;
        background-color: #ffffffa6;
        margin: 0px 40px;
    }
}

/* --- Home --- */

.home__section {
    width: 100%;
    min-height: 100vh;
    position: relative;
    padding-top: 70px;
    background: #213e4a;
    background:
        linear-gradient(to bottom, #2c5f73ba, #0f2027d4 85%, #020506 100%),
        url('../images/background-image.jpg');
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

.home__container {
    height: calc(100vh - 70px);
    display: flex;
    justify-content: center;
}

.home__title {
    height: 75%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: max-content;
    margin: 0px 35px;
}

.home__title h1 {
    color: #dedede;
    font-family: 'Literata', serif;
    font-size: 6em;
    line-height: 1.2;
    align-self: center;
}

.home__title h2 {
    color: #ffffffa6;
    font-size: 1.5em;
    font-weight: 500;
    align-self: flex-end;
}

#terminal {
    font-family: 'Jura', sans-serif;
    font-size: 1.6em;
    font-weight: 600;
    letter-spacing: -7px;
    margin-right: 10px;
    color: #43d214;
    position: relative;
    top: 2px;
}

#terminal__underscore {
    animation: 
        terminal
        1.5s
        infinite
        ease-in-out
        running;
}

@keyframes terminal {
    0% {
        color: #43d214;
    }
    100% {
        color: transparent;
    }
}

@media screen and (min-width: 1980px) {
    .home__title {
        font-size: 1.5em;
    }
}

@media screen and (max-width: 980px) {
    .home__title h1 {
        font-size: 5em;
    }
}

@media screen and (max-width: 762px) {
    .home__title {
        width: min-content;
    }
}

/* --- About --- */

.about__section {
    min-height: 100vh;
    width: 100%;
    padding-top: 70px;
    position: relative;
    background-color: #020506;
}

.about__container {
    width: 95%;
    min-height: calc(100vh - 70px);
    margin: 0 auto;
    display: flex;
    align-items: center;
    background: #172b33;
    background: linear-gradient(to right, #020506 45%, #172b33 60%, #1d3640);
    box-shadow: inset 0px -5px 10px #020506;
}

.about__image {
    width: 40%;
    display: flex;
    justify-content: flex-end;
    margin-bottom: 10px;
}

.about__image img {
    width: 500px;
    height: 500px;
    object-fit: cover;
}

.about__skills-container {
    width: 60%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: 20px 0px 40px
}

.about__description {
    width: 90%;
    padding: 0px 60px;
    margin-bottom: 15px;
}

.about__description h1 {
    font-size: 3em;
    font-weight: 500;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 90%;
    margin: 0 auto 20px;
}

.about__description h1::after,
.about__description h1::before {
    content: "";
    height: 1px;
    background-color: #ffffffa6;
    flex-grow: 1;
}

.about__description h1::after {
    margin-left: 20px;
}

.about__description h1::before {
    margin-right: 20px;
}

.about__description-content {
    padding: 0px 40px;
}

.about__description-content p {
    color: #ffffffa8;
    font-weight: 200;
}

.about__description-content p > span {
    font-weight: 500;
}

.about__galery {
    width: 90%;
}

.about__galery-title {
    width: 55%;
    margin: 0 auto;
}

.about__galery-title  h2 {
    text-align: center;
    color: #ffffff;
    font-weight: 500;
    font-size: 19px;
}

.about__galery-title hr {
    margin: 10px 0px;
    border: none;
    height: 1px;
    width: 100%;
    background-color: #ffffffa6;
}

.about__galery-icons {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: repeat(2, 1fr);
    width: 60%;
    margin: 0 auto;
}

.about__galery-icons img {
    width: 50px;
    height: 50px;
    margin: 15px auto 0px;
    transition: .7s transform;
    cursor: pointer;
}

.about__galery-icons img:hover {
    transform: translateY(-12px);
}

@media screen and (min-width: 1980px) {
    .about__image {
        justify-content: center;
    }

    .about__galery-icons {
        width: 50%;
    }

    .about__description,
    .about__galery {
        width: 70%;
    }
}

@media screen and (max-width: 1300px) and (min-width: 961px) {
    .about__description h1 {
        font-size: 2.5em;
    }
}

@media screen and (max-width: 1300px) {
    .about__description,
    .about__galery {
        width: 100%;
    }

    .about__image {
        justify-content: center;
    }
}

@media screen and (max-width: 960px) {
    .about__container {
        flex-direction: column;
        background: linear-gradient(to bottom, #020506 35%, #172b33 75%, #1d3640)
    }

    .about__image,
    .about__skills-container {
        width: 100%;
    }

    .about__galery-title,
    .about__galery-icons {
        width: 80%;
    }
}

@media screen and (max-width: 650px) {
    .about__description {
        padding: 0px 20px;
    }
    
    .about__description h1 {
        font-size: 2.5em;
    }

    .about__galery-title,
    .about__galery-icons {
        width: 90%;
    }
}

/* --- devs --- */

.devs__section {
    width: 100%;
    padding-top: 70px;
    min-height: 100vh;
    position: relative;
    /* background-color: #000b3e; */
    /* background-color: #00051f; */
    background: linear-gradient(20deg, #000c46 50%, #020506 50%);
    background: linear-gradient(20deg, #356b9b 50%, #020506 50%);
    background: linear-gradient(20deg, #213e4a 50%, #020506 50%);
}

.devs__container {
    width: 95%;
    min-height: calc(100vh - 70px);
    margin: 0 auto;
    padding-bottom: 20px;
}

.devs__cards {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

.devs__card-item {
    /* width: 485px; */
    /* min-height: 250px; */
    border-radius: 10px;
    margin: 20px;
    padding: 40px;
    flex-grow: 1;
    flex-basis: 485px;
}

.devs__card-item h2 {
    color: #ffffff;
    font-size: 2em;
    margin-bottom: 10px;
    font-weight: 500;
}

.devs__card-item p {
    color: #ffffffa8;
    font-weight: 200;
}

.devs__card-work {
    /* background-color: #010d42; */
    background-color: #000b4c;
    background-color: #2c5364;
    box-shadow: 0px 0px 10px #02071f78;
    height: 275px;
}

.devs__card-work a {
    display: block;
    margin-top: 45px;
    color: #ffffff;
    font-weight: 200;
    text-decoration: 1px solid #ffffffba underline;
}

.devs__card-work a:hover {
    color: #ffffffba;
}

.devs__description {
    height: 300px;
    box-shadow: none;
    flex-grow: 2;
}

.devs__description h2 {
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-grow: 1;
}

.devs__description h2::after,
.devs__description h2::before {
    content: "";
    height: 1px;
    background-color: #ffffffa6;
    flex-grow: 1;
}

.devs__description h2::after {
    margin-left: 20px;
}

.devs__description h2::before {
    margin-right: 20px;
}

@media screen and (max-width: 1121px) {
    
    .devs__cards {
        justify-content: center;
    }

    .devs__card-item {
        flex-grow: 0;
        flex-basis: 700px;
    }

    #devs__backend-desc {
        order: 1;
    }
}

.contact__section {
    width: 100%;
    min-height: 100vh;
    position: relative;
    background: linear-gradient(to bottom, #213e4a 38%, #020506 38%);
}

.contact__container {
    width: 100%;
    min-height: calc(100vh - 70px);
    padding-top: 70px;
}

.contact__menu {
    margin-top: 60px;
    width: 100%;
    display: flex;
    justify-content: center;
}

.contact__btnMenu {
    outline: 0;
    color: #ffffffba;
    background-color: transparent;
    font-size: 22px;
    font-weight: 300;
    font-family: 'Bai Jamjuree', sans-serif;
    border: 1px solid #ffffffba;
    border-radius: 4px;
    text-transform: uppercase;
    padding: 10px 20px;
    margin: 0px 20px;
    cursor: pointer;
}

.contact__btnMenu span {
    margin-left: 10px;
    font-size: 18px;
    letter-spacing: 1px;
}

.contact__btnMenu:hover {
    background-color: #ffffff;
    color: #020506;
}

.contact__content {
    display: flex;
    flex-direction: column;
    width: 50%;
    height: 100%;
    margin: 0 auto;
    align-items: center;
}

.contact__phrase {
    height: 220px;
    width: 90%;
    margin-top: 100px;
    background-color: #172b33;
    border-radius: 10px;
    padding: 25px 40px;
}

.contact__phrase h2 {
    color: #ffffffcf;
    font-size: 2em;
    font-weight: 300;
}

.contact__phrase h2 > span {
    margin-top: 5px;
    display: block;
    font-size: 20px;
    font-weight: 200;
    text-align: end;
}

.contact__footer {
    margin-top: 50px;
}

.contact__icons {
    display: flex;
}

.contact__icons a {
    margin: 0px 15px;
}

.contact__icons a:hover i {
    color: #020506;
    background-color: #ffffff;
}

.contact__icons i {
    font-size: 25px;
    width: 50px;
    height: 50px;
    color: #ffffffba;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 2px solid #ffffffba;
}

.contact__copyright {
    margin: 40px 0px;
    text-align: center;
    color: #ffffffba;
}

.contact__form-container {
    position: absolute;
    bottom: 0px;
    left: -2000px;
    width: 100%;
    min-height: 100vh;
    background-color: #213e4a;
    transition: 1s left;
    z-index: 1500;
}

.contact__form-wrap {
    width: 100%;
    background-color: #0f2027;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

#contact__btnClose {
    color: #ffffffba;
    align-self: flex-end;
    font-size: 30px;
    margin: 30px 30px 0px 0px;
    cursor: pointer;
}

#contact__btnClose:hover {
    color: #ffffff96;
}

.contact__form-wrap h1 {
    color: #ffffff;
    text-align: center;
    font-size: 2em;
    font-weight: 400;
    margin: 10px 20px 0px;
}

.contact__form {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: 80px 1fr 50px;
    grid-row-gap: 20px;
    width: 50%;
    margin: 30px auto;
}

.contact__name {
    width: 85%;
    height: 100%;
}

.contact__email {
    width: 100%;
    height: 100%;
    justify-self: end;
}

.contact__message {
    grid-column: 1 / 2 span;
    width: 100%;
    height: 100%;
}

.contact__name label,
.contact__email label,
.contact__message label {
    display: block;
    color: #ffffffba;
    margin-bottom: 10px;
}

.contact__name input,
.contact__email input {
    height: 45px;
}

.contact__message textarea {
    height: 300px;
}

.contact__name input:focus,
.contact__email input:focus,
.contact__message textarea:focus {
    border-color: #ffffffba;
}

.contact__name input,
.contact__email input,
.contact__message textarea {
    border-radius: 2px;
    outline: none;
    width: 100%;
    resize: none;
    background-color: transparent;
    border: 1px solid #213e4a;
    color: #ffffffc9;
    font-size: 18px;
    padding: 10px 15px;
}

#btnSubmit__contact {
    grid-column: 1 / 2 span;
    width: 25%;
    margin: 0 auto;
    border-radius: 8px;
    outline: 0;
    border: 1px solid #2c5364;
    background-color: transparent;
    color: #ffffff;
    font-size: 18px;
    letter-spacing: 3px;
    text-transform: uppercase;
    font-weight: 300;
    font-family: 'Bai Jamjuree', sans-serif;
    cursor: pointer;
}

#btnSubmit__contact:hover {
    background-color: #2c5364;
}

@media screen and (max-width: 1180px) {
    .contact__content {
        width: 80%;
    }
}

@media screen and (max-width: 1080px) {
    .contact__form {
        width: 60%;
    }

    .contact__form-container h1 {
        margin: 0px 80px;
    }
}

@media screen and (max-width: 980px) {
    .contact__content {
        width: 90%;
    }

    .contact__phrase h2 {
        font-size: 1.6em
    }
}

@media screen and (max-width: 700px) {
    .contact__content {
        width: 100%;
    }

    .contact__phrase {
        padding-top: 50px
    }

    .contact__phrase h2 > span {
        margin-top: 20px;
    }

    .contact__form {
        width: 80%;
    }

    .contact__form-container h1 {
        font-size: 1.5em;
        margin: 0px 20px;
    }
}

@media screen and (max-width: 600px) {
    .contact__menu {
        flex-direction: column;
        align-items: center;
    }

    .contact__btnMenu:first-child {
        margin-bottom: 20px;
    }

    .contact__copyright {
        margin-top: 30px;
    }
}