:root {
    --main-color-light: #eef4ff;
    --secondary-color-light: #98adcc;

    --main-color-medium: #9893DA;
    --secondary-color-medium: #BBBDF6;

    --main-color-dark: #1d2434;
    --secondary-color-dark: #2D3A5F;

    --transition-color-dark: #5f709e;

    --color-modal: #9fcaf3;

    --header-height: 6rem;

    --title-text-size: 3rem;
    --subtitle-text-size: 2rem;

    --button-title-text-size: 1.5rem;
    --button-smaller: 0.75rem;

    --paragraph-size: 1rem;

    --title-text-phone: 3rem;
    --button-title-text-phone: 2.5rem;
    --button-smaller-phone: 1.5rem;
    --paragraph-size-phone: 0.75rem;
    --paragraph-modal-phone: 1.25rem;

    font-family: Helvetica;
}

body {
    margin: 0;
    background-color: var(--secondary-color-light);
}

.modal {
    display: none;
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.4);

    .close {
        position: fixed;
        right: 10.5vw;

        color: var(--secondary-color-light);
        font-size: var(--subtitle-text-size);
        font-weight: bold;

        @media only screen and (max-width: 1000px) {
            font-size: var(--button-title-text-phone);
        }
    }

    .close:hover,
    .close:focus {
        color: var(--main-color-dark);
        text-decoration: none;
        cursor: pointer;
    }

    .modal-content {
        max-height: 100%;
        overflow-y: auto;

        margin: auto;

        border: 0.05rem solid var(--main-color-dark);
        border-radius: 2rem;

        width: 80%;
        height: 84%;
        padding: 1.5rem;
        

        -ms-overflow-style: none;
        scrollbar-width: none;
        ::-webkit-scrollbar {
            display: none;
        }

        .modal-information {
            display: grid;
            grid-template-areas:
                "header header header"
                "description empty image1"
                "description empty image2"
                "links empty empty2";
            grid-template-columns: 9fr 1fr 7fr;
            
            @media only screen and (max-width: 1000px) {
                grid-template-areas:
                    "header"
                    "description"
                    "image1"
                    "image2"
                    "links";
                grid-template-columns: 1fr;
                padding-top: 1rem;
                padding-bottom: 3rem;
            }

            .modal-title {
                color: var(--main-color-dark);
                font-size: var(--title-text-size);
                
                padding-left: 1.5rem;
                
                margin-top: 0.5rem;
                margin-bottom: 2rem;

                grid-area: header;

                font-weight: bold;

                @media only screen and (max-width: 1000px) {
                    font-size: var(--title-text-phone);
                }
            }

            .modal-description {
                color: var(--main-color-dark);
                font-size: var(--paragraph-size);
                padding-left: 2.25rem;

                grid-area: description;

                @media only screen and (max-width: 1000px) {
                    font-size: var(--paragraph-modal-phone);
                }
            }

            .modal-image-1 {
                grid-area: image1;
            }

            .modal-image-2 {
                grid-area: image2;
            }

            .modal-image-1, .modal-image-2 {
                place-self: center;

                margin: 1rem;

                height: 10rem;
                width: 18rem;
                margin-right: 2rem;

                object-fit: cover;
                border: 2px solid var(--main-color-dark);
                border-radius: 0.25rem;
                
                @media only screen and (max-width: 1000px) {
                    margin-top: 4rem;
                    margin-bottom: 0;
                    width: 90%;
                    height: 24rem;
                }
            }

            .modal-links{
                margin-top: 4rem;
                grid-area: links;
                place-self: center;

                a {
                    border: solid 2px var(--main-color-dark);
                    background-color: var(--secondary-color-dark);
                    border-radius: 0.25rem;

                    padding: 1rem;

                    margin: 2rem;
                    margin-left: 1rem;
                    margin-right: 1rem;

                    text-align: center;
                    text-decoration: none;
                    color: var(--main-color-light);
                }
            }
        }
    }
}

header {
    position: fixed;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: var(--header-height);

    background-color: var(--main-color-dark);
    box-shadow: rgba(0, 0, 0, 0.07) 0px 1px 1px, rgba(0, 0, 0, 0.07) 0px 2px 2px, rgba(0, 0, 0, 0.07) 0px 4px 4px, rgba(0, 0, 0, 0.07) 0px 8px 8px, rgba(0, 0, 0, 0.07) 0px 16px 16px;

    .header-text {
        flex: 8;
        text-align: start;
        font-size: var(--title-text-size);
        color: var(--main-color-light);
        letter-spacing: 0.2rem;
        margin-left: 3rem;

        @media only screen and (max-width: 1000px) {
            flex: 10;
            margin-left: 2rem;
            letter-spacing: 0;
        }
    }

    .header-button {
        flex: 1;
        background: none;
        border: none;
        text-align: center;

        margin: 0;
        padding: 0;
        margin-left: 1rem;
        margin-right: 1rem;

        text-decoration: none;
        font-size: var(--button-title-text-size);
        color: var(--main-color-light);
        transition: 0.2s;
    }

    @media only screen and (min-width: 1000px) {
        .header-button:hover {
            font-size: var(--subtitle-text-size);
            color: var(--secondary-color-light);
            cursor: pointer;
            transition: 0.2s;
        }
    }
}

.about-section-container {
    justify-self: center;

    display: grid;
    grid-template-areas:
        "description image";
    grid-template-columns: 2fr 1fr;

    min-height: 24rem;
    width: 96%;
    padding-top: var(--header-height);

    @media only screen and (max-width: 1000px) {
        min-height: 80rem;
        width: 100%;
        
        grid-template-areas:
            "image"
            "description";
        grid-template-columns: 1fr;
    }

    .about-text-container {
        place-self: center;
        grid-area: description;

        padding: 3rem;
        padding-top: 2rem;

        .about-text-title {
            color: var(--main-color-dark);
            font-size: var(--subtitle-text-size);
            font-weight: bold;

            margin-bottom: 0.5rem;

            @media only screen and (max-width: 1000px) {
                font-size: var(--title-text-phone);
            }
        }

        .about-text {
            color: var(--main-color-dark);
            font-size: var(--paragraph-size);

            @media only screen and (max-width: 1000px) {
                font-size: var(--paragraph-size-phone);
            }
        }
    }

    .image-container {
        grid-area: image;
        padding: 2rem;

        display: flex;
        align-items: center;
        justify-content: center;

        img {
            width: 16rem;
            height: 16rem;

            border-radius: 4rem;
            border-color: var(--main-color-dark);
            border: solid;

            object-fit: cover;
            object-position: center;

            @media only screen and (max-width: 1000px) {
                width: 28rem;
                height: 28rem;
            }
        }
    }
}

.box-container {
    padding-top: 2rem;
    justify-self: center;
    align-self: center;

    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    width: 95%;

    scroll-margin: var(--header-height);

    .projects-title {
        height: 2rem;
        padding-top: 0.5rem;
        padding-bottom: 2rem;
        width: 100%;

        text-align: center;
        color: var(--main-color-dark);
        font-size: var(--subtitle-text-size);
        font-weight: bold;


        @media only screen and (max-width: 1000px) {
            font-size: var(--title-text-phone);
        }
    }

    .project-box {
        display: grid;
        grid-template-areas:
            "image title"
            "image project-type";
        grid-template-columns: 1fr 2fr;
        flex: 1;

        margin: 1rem;
        padding: 1rem;
        min-width: 24rem;

        border-radius: 0.5rem;
        border-color: var(--main-color-dark);
        border-width: 0.125rem;
        border-style: solid;

        background-color: var(--secondary-color-dark);
        box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;

        box-sizing: border-box;

        img {
            place-self: center;
            grid-area: image;

            width: 10rem;
            height: 10rem;
            margin-right: 0.5rem;

            border-color: var(--main-color-dark);
            border-width: 0.125rem;
            border-style: solid;
            border-radius: 1.25rem;

            object-fit: cover;
            object-position: center;

            @media only screen and (max-width: 1000px) {
                width: 20rem;
                height: 20rem;
            }
        }

        .title-text {
            padding: 0.5rem;
            grid-area: title;

            color: var(--main-color-light);
            font-size: var(--button-title-text-size);
            font-weight: bold;
            word-wrap: normal;
            text-align: left;

            @media only screen and (max-width: 1000px) {
                font-size: var(--button-title-text-phone);
                font-weight: 600;
                letter-spacing: 1px;
                padding: 1rem;
            }
        }

        .project-type {
            grid-area: project-type;

            color: var(--main-color-light);
            font-size: var(--button-smaller);
            word-wrap: normal;
            text-align: left;
            padding-left: 1rem;

            @media only screen and (max-width: 1000px) {
                font-size: var(--button-smaller-phone);
            }
        }

        @media only screen and (max-width: 1000px) {
            min-width: 30rem;
            height: 22.5rem;
        }
    }

    @media only screen and (min-width: 1000px) {
        .project-box:hover {
            background-color: var(--transition-color-dark);
            transition: 0.2s;
            cursor: pointer;
        }
    }
}

.contact-area {
    padding-top: 4rem;
    
    display: grid;
    grid-template-areas:
        "Title"
        "Paragraph"
        "Email";
    
    scroll-margin: var(--header-height);

    align-items: center;
    justify-content: center;
    place-items: center;

    .contact-title {
        grid-area: Title;
        text-align: center;
    
        font-size: var(--subtitle-text-size);
        color: var(--main-color-dark);
        font-weight: bold;

        width: 100%;
    }

    .contact-text{
        grid-area: Paragraph;
        text-align: center;
    
        font-size: var(--button-title-text-size);
        color: var(--main-color-dark);

        width: 100%;
        margin: 1.5rem 0 2.5rem 0;
    }

    .contact-email {
        background-color: var(--secondary-color-dark);
        padding: 2rem;
        grid-area: Email;
        display: grid;
        place-items: center;
        width: 175%;

        @media only screen and (max-width: 1000px) {
            width: 125%;
        }

        box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
        border-radius: 4rem;

        .contact-form {
            margin: 2rem 0 1rem 0;;
            width: 95%;
            display: grid;
            grid-template-areas: 
                "Name"
                "Email"
                "Message"
                "Submit";
            grid-template-columns: 1fr;

            .name {
                grid-area: Name;
                height: 1.5rem;
                margin-bottom: 0.25rem;
                box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
                border: solid 0.125rem --main-color-dark;
                border-radius: 0.25rem;
            }

            .email {
                grid-area: Email;
                height: 1.5rem;
                margin-bottom: 1rem;
                box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
                border: solid 0.125rem --main-color-dark;
                border-radius: 0.25rem;
            }

            .message {
                resize: none;
                place-self: center;
                margin-bottom: 2rem;
                height: 18rem;
                width: 100%;
                grid-area: Message;
                box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
                border: solid 0.125rem --main-color-dark;
                border-radius: 0.25rem;
            }

            .submit {
                grid-area: Submit;
                width: 3rem;
                height: 2rem;
                place-self: center;
                box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
                border: solid 0.125rem --main-color-dark;
                border-radius: 0.25rem;
            }
        }
    }
}

.footer {
    margin-top: 4rem;
    height: 24rem;
    background-color: var(--main-color-dark);
}