/* global */
@import url("../globals/global.css");

/* partials */
@import url("./partials/header.css");
@import url("./partials/footer.css");

main {
    margin: var(--large) var(--xx-large);
    padding-top: var(--x-large);
    padding-bottom: var(--x-large);
    display: grid;
    gap: var(--medium);
    grid-template-columns: 1fr 1fr;
}
main article {
    height: 100%;
    width: 100%;

    display: flex;
    flex-direction: column;
    align-items: center;
}

/* first card (about) */
#about-card {
    grid-column-start: 1;
    grid-column-end: 2;
    gap: var(--medium);

    text-align: center;
}
#about-card section:not(:nth-child(1)) {
    max-width: 80%;
    
    display: flex;
    flex-direction: column;
}
#about-card section:nth-child(2) {
    gap: var(--medium);
}
#about-card section:nth-child(2) div {
    height: fit-content;
}
#about-card section:nth-child(3) {
    gap: var(--small);
}
#about-card section:nth-child(3) ul {
    list-style: none;
}
#about-card section:nth-child(3) ul li a {
    display: flex;
    justify-content: center;
    gap: var(--small);
}


/* second card (contact form) */
#contact-card {
    grid-column-start: 2;
    grid-column-end: 3;
}
#contact-card section {
    width: 100%;
}
#contact-card form {
    width: 80%;
    margin: auto;
    
    display: flex;
    flex-direction: column;
}
#contact-card form > div {
    margin-bottom: var(--medium);

    display: flex;
    flex-direction: column;
}
.input_form:focus {
    outline: none;
}
.input_form {
    background-color: #fff;
    min-height: var(--larger);
    border: 1px solid transparent;
    border-radius: var(--small);
    padding: 0px var(--small);
}
.input_form:user-invalid {
    box-shadow: none;
    border: 1px var(--error-color) solid;
}
.input_form:user-invalid + span {
    visibility: initial;
}
.error_message {
    visibility: hidden;
    font-size: 10px;
    color: var(--error-color);
}
.input_form:user-valid {
    border: 1px solid transparent;
    border-radius: var(--small);
    background: 
        linear-gradient(to right, #fff), 
        var(--gradient-color); 
    background-clip: padding-box, border-box;
    background-origin: padding-box, border-box;
}
.input_form:user-valid + span {
    visibility: hidden;
}
form input[type="submit"] {
    align-self: center;
    border: 1px solid #fff;
    border-radius: var(--small);
    padding: var(--medium) var(--large);
    width: 40%;
    background-color: #fff;
}
form input[type="submit"]:hover {
    border: 1px solid transparent;
    border-radius: var(--small);
    background: 
        linear-gradient(to right, #fff), 
        var(--gradient-color); 
    background-clip: padding-box, border-box;
    background-origin: padding-box, border-box;
}
form textarea {
    resize: vertical;
}

@media screen and (max-width: 1040px) {
    main {
        display: flex;
        flex-direction: column;
    }
    #about-card section:nth-child(2) img {
        max-width: var(--xx-large);
        align-self: center;
    }
}
@media screen and (max-width: 750px) {
    main {
        margin: var(--larger) var(--x-large);
    }
}
@media screen and (max-width: 580px) {
    main {
        margin: var(--larger);
    }
    main > article > section p {
        font-size: small;
    }
    form input[type="submit"] {
        width: fit-content;
    }
}
@media screen and (max-width: 430px) {
    main > article > section *:not(p) {
        font-size: 90%;
    }
    main > article > section p {
        font-size: smaller;
    }
    form input[type="submit"] {
        padding: var(--medium);
    }
}