/* NOTE: this CSS file is for pages in the final project for GDES 2342 Interaction Design */
body {
    font-family: Arial, Helvetica, sans-serif;
    background-image: url("img/assets/homeback.png");
    background-repeat: no-repeat;
}

section {
    /*border: 2px solid lightgray;*/
}

.topfiller {
    width: 100%;
}

/* navbar */
.leftnav {
    z-index: 2;
    background-image: url('img/assets/upsidebarL.png');
    display: flex;
    position: absolute;
    background-size: 100%;
    width: 489px;
    height: 124px;
    top: 0vw;
    left: 0vw;

    .homecirc {
        background-image: url('img/assets/navbar/homecirc2.png');
        display: flex;
        background-size: 100%;
        width: 5.5vw;
        height: 5.4vw;
        justify-content: center;
        align-items: center;
    }

    .myheadnav {
        background-image: url('img/assets/me2004.png');
        background-color: transparent;
        background-size: 100%;
        width: 2.5vw;
        height: 3.2vw;
        margin-bottom: 0.75vw;
    }

    .myheadnav:hover {
        transform: rotate(-20deg);
    }

    .navbuttons {
        display: flex;
        flex-direction: row;
        height: 3vw;
        margin-top: 0.5vw;
        align-items: center;
        border: none;

        .abtbut {
            background-image: url('img/assets/navbar/abticon.png');
            background-repeat: no-repeat;
            background-color: transparent;
            background-size: 100%;
            width: 2.3vw;
            height: 2.4vw;
            margin-left: 0.25vw;
            padding-right: 0.25vw;
        }

        .abtbut:hover {
            transform: rotate(-20deg);
        }

        .galicon {
            background-image: url('img/assets/navbar/galnavoicon.png');
            background-repeat: no-repeat;
            background-color: transparent;
            background-size: 100%;
            width: 1.7vw;
            height: 2.7vw;
            margin-left: 0.25vw;
            padding-right: 0.25vw;
        }

        .galicon:hover {
            transform: rotate(20deg);
        }

        .updicon {
            background-image: url('img/assets/navbar/updicon.png');
            background-color: transparent;
            background-size: 100%;
            width: 2.3vw;
            height: 2.6vw;
            padding-right: 0.25vw;
        }

        .updicon:hover {
            transform: rotate(-20deg);
        }

        .linkicon {
            background-image: url('img/assets/navbar/linkicon.png');
            background-color: transparent;
            background-size: 100%;
            width: 2vw;
            height: 2.35vw;
            padding-right: 0.25vw;
        }

        .linkicon:hover {
            transform: rotate(20deg);
        }

        .emmeicon {
            background-image: url('img/assets/navbar/emmeicon.png');
            background-color: transparent;
            background-size: 100%;
            width: 2vw;
            height: 1.9vw;
            padding-right: 0.25vw;
        }

        .emmeicon:hover {
            transform: rotate(20deg);
        }
        .animicon {
            background-image: url('img/assets/navbar/animicon.png');
            background-color: transparent;
            background-size: 100%;
            width: 3vw;
            height: 2.8vw;
            padding-right: 0.25vw;
        }
        .animicon:hover {
            transform: rotate(20deg);
        }
    }
}

/*main stuff*/
#parent {
    display: flex;
    width: 100%;
    height: auto;
    flex-direction: column;
    align-content: center;
    flex-wrap: wrap;
    justify-content: space-between;

    .main-content-area {
        height: 756px;
        display: flex;
        justify-content: center;
        flex-wrap: nowrap;
        align-items: center;
        flex-direction: column;

        /*.topfiller {
            padding: 20px;
            height: 5vw;
            background-color: transparent;
        }*/

        .titlebox {
            display: flex;
            flex-direction: row;
            justify-content: space-around;
            align-items: center;

            .mr-title {
                width: auto;
                height: auto;

            }
        }

        /*email stuff*/

        section.emailarea {
            background-image: url('img/assets/emailme-screen.png');
            background-color: transparent;
            background-repeat: no-repeat;
            background-size: 100%;
            height: 700px;
            width: 500px;

            form {
                div.forumcol {
                    display: flex;

                    div {
                        display: flex;
                        flex-direction: column;
                        min-height: 200px;
                        width: 100%;
                        align-items: center;

                        div.inputbox {
                            width: 100%;
                            display: flex;
                            border-radius: 15px;
                            flex-direction: column;
                            align-items: flex-start;
                            padding-left: 140px;
                            padding-top: 92px;
                        }

                        input {
                            padding: 5px;
                            font-family: Arial, Helvetica, sans-serif;
                            background-color: lavender;
                            border: none;
                            margin-bottom: 5px;
                        }

                        textarea {
                            font-family: Arial, Helvetica, sans-serif;
                            min-height: 180px;
                            max-height: 180px;
                            min-width: 355px;
                            max-width: 355px;
                            width: 90%;
                            background-color: lavender;
                            border: none;
                        }
                    }
                }

                div.formrow {
                    display: flex;
                    flex-direction: column;
                    justify-content: space-between;
                    padding-top: 175px;
                    align-items: center;

                    input {
                        width: 100px;
                        height: 30px;
                    }
                }
            }
        }

        /*stuff for gallery*/

        .gallery-area {
            height: auto;
            width: 85%;
            display: flex;
            flex-direction: column;
            justify-content: space-around;
            background-color: #FFD4C9;
            padding-top: 50px;
            border-image-slice: 250 250 250 250;
            border-image-width: 50px 50px 50px 50px;
            border-image-outset: 29px;
            border-image-repeat: round round;
            border-image-source: url(img/assets/borders/fleshborder1.png);
            background-clip: padding-box;
            align-items: center;

            .galrow {
                width: 85%;
                display: flex;
                justify-content: space-evenly;
                padding-bottom: 20px;
                /*background-color: indianred;*/

                .galcard {
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    justify-content: flex-end;

                    .galportA {
                        background-size: 100%;
                        width: 160px;
                        height: 120px;
                        border-image-slice: 224 112 112 112;
                        border-image-width: 54px 24px 24px 23px;
                        border-image-outset: 29px 9px 0px 9px;
                        border-image-source: url(img/assets/borders/galframeA.png);
                        border-image-repeat: repeat repeat;
                    }

                    .galportA:hover {
                        border-image-source: url(img/assets/borders/galframeB.png);
                    }

                    .galportAFalse {
                        /*for this page, gallery icons that do not link to a page will display a red light*/
                        background-size: 100%;
                        width: 160px;
                        height: 120px;
                        border-image-slice: 224 112 112 112;
                        border-image-width: 54px 24px 24px 23px;
                        border-image-outset: 29px 9px 0px 9px;
                        border-image-source: url(img/assets/borders/galframeA.png);
                        border-image-repeat: repeat repeat;
                    }

                    .galportAFalse:hover {
                        border-image-source: url(img/assets/borders/galframeC.png);
                    }

                    .galportB {
                        background-size: 100%;
                        width: 120px;
                        height: 160px;
                        border-image-slice: 224 112 112 112;
                        border-image-width: 54px 24px 24px 23px;
                        border-image-outset: 29px 9px 0px 9px;
                        border-image-source: url(img/assets/borders/galframeA.png);
                        border-image-repeat: repeat repeat;
                    }

                    .galportB:hover {
                        border-image-source: url(img/assets/borders/galframeC.png);
                    }

                    .galportC {
                        background-size: 100%;
                        width: 160px;
                        height: 160px;
                        border-image-slice: 224 112 112 112;
                        border-image-width: 54px 24px 24px 23px;
                        border-image-outset: 29px 9px 0px 9px;
                        border-image-source: url(img/assets/borders/galframeA.png);
                        border-image-repeat: repeat repeat;
                    }

                    .galportC:hover {
                        border-image-source: url(img/assets/borders/galframeC.png);
                    }
                }
            }
        }

        /*video & animation stuff*/

        .videoframe {
            z-index: 2;
            width: 742px;
            height: 480px;
            position: absolute;
            border-image-slice: 195 0 195 0;
            border-image-width: 150px 0px 150px 0;
            border-image-outset: 79px 0 75px 0;
            border-image-repeat: stretch stretch;
            border-image-source: url(img/assets/borders/videoframe.png);
        }

        .vidbuttons {
            z-index: 2;
            position: absolute;
            margin-top: 390px;

            .vidtoothA {
                background-color: transparent;
                border: none;

                img {
                    height: 95px;
                }
            }

            .vidtoothA:hover {
                transform: rotate(-10deg);
            }

            .vidtoothB {
                background-color: transparent;
                border: none;

                img {
                    height: 95px;
                }
            }

            .vidtoothB:hover {
                transform: rotate(-10deg);
            }
        }

        /*stuff for the index page*/

        .pages {
            .stickyrow {
                display: flex;
                flex-direction: row;

                .stickyA {
                    height: 200px;
                    width: 200px;
                    background-repeat: no-repeat;
                    background-size: 100%;
                }

                .stickyA:hover {
                    transform: rotate(10deg);
                }

                .stickyB {
                    height: 250px;
                    width: 250px;
                    background-repeat: no-repeat;
                    background-size: 100%;
                }

                .stickyB:hover {
                    transform: rotate(-10deg);
                }

                .backsticky {
                    background-image: url(img/assets/backstickyA.png);
                    height: 250px;
                    width: 250px;
                    background-repeat: no-repeat;
                    background-size: 100%;
                }

                .backsticky:hover {
                    transform: rotate(-10deg);
                    background-image: url(img/assets/backstickyB.png);
                }
            }
        }
    }

    .footer {
        height: auto;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;

        .copyright {
            background-image: url('img/assets/copyright.png');
            background-size: 100%;
            height: 1.8vw;
            width: 12vw;
        }
    }
}