/* RENEE BOGDANY PORTFOLIO STYLES */

/* DESKTOP STYLES */
@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Raleway&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@400;600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Amita:wght@400;700&display=swap');

body {
    margin: 0;
    /* background-color: rgb(243, 243, 252); */
}

/* Font */

/* @font-face {
    font-family: 'EBGaramond-Regular';
    src: url("../fonts/EBGaramond-Regular.ttf") format('truetype');
} */

/* headings, paragraph, links */

h1, h2, h3, p, a, li, figcaption {
    /* font-family: 'Roboto Slab', Georgia, 'Montserrat', sans-serif; */
    font-family: 'Source Sans Pro', sans-serif;
}
p, li {
    line-height: 2em;
}
a:link {
    color: black;

}
a:visited {
    color: purple;
}
a:hover {
    color: red;
}
a:active {
    color: blue;
}

/* top of page */

.title {
    font-family: 'Amita', serif;
}
.top1 {
    background-color: lightgray;
}
.top {
    margin-left: 20%;
    margin-bottom: 2em;
    margin-top: 2em;
}
.top2 {
    margin-bottom: 1.25em;
    margin-top: 2em;
    width: 1200px;
    margin-left: auto;
    margin-right: auto;
}
.rlogo {
    float: left;
    padding-right: 2em;
}

/* Bogdany Pic */

.bogdanyPic {
    float: left;
    border-radius: 50%;
    /* margin-top: 2.5em; */
    margin-bottom: .5em;
    /* margin-left: 20%; */
    margin-right: 2.5em;
    border: 2px solid black;
}

/* Heading / Navigation */
.intro {
    /* background-color: lavenderblush; */
    background-color: #f8bbb1ee;
}
nav {
    display: flex;
    justify-content: space-around;
    width: 450px;
    margin-left: auto;
    margin-right: auto;
    clear: both;
}
nav a {
    text-decoration: none;
    font-size: 22px;
}
nav a:hover {
    border-top: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
}

/* Intro */

.intro {
    /* height: 280px; */
    /* background-color: rgb(120, 143, 192); */
    /* background-color: rgb(243, 243, 252); */
    /* background-color:  rgb(238, 162, 162); */
    /* rgb(238, 162, 162); */
}
.topLine {
    margin-top: 1em;
}
.textIntro {
    padding-top: .5em;
    padding-left: 1em;
    line-height: 2em;
    /* margin-right: 20%; */
}
.introPicAndText {
    width: 1000px;
    margin-left: auto;
    margin-right: auto;
}
.links {
    padding-top: 2em;
    padding-bottom: 1em;
    clear: both;
    display: flex;
    justify-content: space-evenly;
    width: 450px;
    margin-left: auto;
    margin-right: auto;
}
.padTop {
    display: inline-block;
    padding-top: 1em;
}
.email {
    text-decoration: none;
    color: black;
    cursor: auto;
}
.email:visited {
    color: black;
}
.email:hover {
    color: black;
}
.email:active {
    color: black;
}

/* Projects */
.proj, .projects {
    width: 1200px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 2em;
    margin-bottom: 2em;
}
.homePic {
    float: left;
}
.project3, .project3 .homePic {
    clear:both;
    float:right;
}
.project2 {
    clear:both;
}
.homePic {
    margin-right: 2em;
}
.project3 .homePic {
    margin-right: 0;
    margin-left: 2em;
}
.project2, .project3 {
    margin-top: 6em;
    margin-bottom: 6em;
}
.homePic {
    transition: .2s ease-in-out;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.homePic:hover  {
    transform: scale(1.01);
}

.test1 {
    border: 2px solid black;
    border-radius: 10px;
    padding-left: 1em;
    padding-right: 1em;
    margin-top: 1em;
}
.learn {
    display: flex;
    /* flex-wrap: wrap; */
}
.learn li {
    padding-right: 2em;
}
.introPicAndText {
    padding-bottom: 2em;
}

@media screen and (max-width: 1000px) {
    .learn {
        flex-wrap: wrap;
    }
}
.about {
    margin-left: .1em;
}


/* MEDIA QUERIES */
/* projects on homepage */
@media screen and (max-width: 1320px) {
    .projects, .proj, .top2, .introPicAndText {
        flex-wrap: wrap;
        width: 854px;
    }
    .homePic {
        float: none;
    }
    .project3 .homePic {
        margin-left: 0;
        float: none;
    }
}
@media screen and (max-width: 870px) {
    .projects, .projects div, .proj, .top2, .introPicAndText {
        width: 600px;
    }
    .homePic, .project3 {
        float: none;
    }
}
@media screen and (max-width: 620px) {
    .projects, .projects div, .proj, .top2{
        width: 90%;
    }
    .introPicAndText {
        width: 90%;
    }
}
@media screen and (max-width: 620px) {
    /* .homePic {
        width: 90%;
        margin-right: auto;
        margin-left: auto;
        float: none;
    }
    .project3 .homePic {
        width: 90%;
    } */
    .introPicAndText {
        width: 90%;
    }
    .homePic {
        width: 100%;
    }
}
@media screen and (max-width: 620px) {
    .bogdanyPic {
        float: none;
    }
    .about {
        text-align: center;
        margin-left: 0;
    }
    .pic {
        width: 200px;
        margin-left: auto;
        margin-right: auto;
    }
    nav {
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        width: 90%;
        margin-left: auto;
        margin-right: auto;
    }
    nav a {
        margin-bottom: 1em;
    }
    .n1 {
        width: 57px;
    }
    .n2 {
        width: 95px;
    }
    .n3 {
        width: 77px;
    }
}
@media screen and (max-width: 450px) {
    .introPicAndText,.projects, .projects div, .proj, nav, .top2 {
        width: 90%;
        margin-left: auto;
        margin-right: auto;
    }
}

/* .projects {
    margin-left: 18%;
    margin-right: 18%;
}

.project1, .project2, .project3 {
    border: 2px solid black;
    border-radius: 25px;
    margin: 1em;
    padding-left: 1em;
    padding-bottom: 1em;
}
/*text*/
/* .box {
    padding-right: 1em;
}  */

/* PROJECTS PAGE STYLES */
.projects1 {
    width: 900px;
    border: 2px solid black;
    border-radius: 10px;
    padding-left: 1em;
    padding-right: 1em;
    margin-left: auto;
    margin-right: auto;
    margin-top: 2em;
    margin-bottom: 2em;
    background-color: rgb(162, 222, 230);
}
.projects1 p, .projects1 h2 {
    /* color: white; */
}
@media screen and (max-width: 955px) {
    .projects1 {
        /* margin-left: 1em; */
        /* margin-right: 1em; */
        width: 92%;
    }
}

/* WFSS project */
.wfss {
    background-color: #f3afa5f5;
    /* lavender; */
    width: 100%;
    padding-top: 1.5em;
    padding-bottom: 1.5em;
    margin-top: 2em;
}
.wfss h2 {
    text-align: center;
    font-size: 30px;
}
.projwfss, .top3 {
    width: 900px;
    margin-left: auto;
    margin-right: auto;
}

.num, .num2 {
    font-size: 30px;
    font-weight: bold;
    border: 3px solid black;
    padding-left: 10px;
    padding-right: 10px;
    width: 20px;
}
.num2 {
    padding-right: 15px;
}
.part, .part2 {
    display: grid;
    grid-template-areas: "num h3";
    width: 50px;
    grid-gap: 20px;
}
.num, .num2 {
    grid-area: num;
    line-height: 60px;
    padding-left: 20px;
}
.part h3, .part2 h3 {
    grid-area: h3;
    font-size: 35px;
    line-height: 56px;
}
/* .part2 {
    width: 405px;
} */
.bold {
    font-weight: bold;
}
.sketches {
    font-weight: bold;
    text-align: center;
    font-size: 18px;
}
.sketch {
    margin-right: .5em;
    border: solid 2px gray;
}
.sketchPics {
    width: 825px;
    margin-left: auto;
    margin-right: auto;
}
.popup {
    width: 884px;
    margin-left: auto;
    margin-right: auto;
}
.textcenter {
    text-align: center;
}
.arrow {
    padding-bottom: 56px;
}
.research {
    width:550px;
    margin-left:auto;
    margin-right:auto;
}

@media screen and (max-width: 920px) {
    .projwfss, .top3 {
        /* margin-left: 1em;
        margin-right: 1em; */
        width: 98%;
    }
    /* .test1 {
        width: 98%;
    } */
    /* .sketch {
        width: 90%;
        margin-left: auto;
        margin-right: auto;
    } */
    .sketchPics {
        width: 344px;
        margin-right: auto;
        margin-left: auto;
    }
    .sketch {
        width:344px;
        margin-right: auto;
        margin-left: auto;
    }
    .popup {
        width: 95%;
    }
    .test1 {
        width: 91%;
    }
    .research {
        width: 300px;
        margin-right: auto;
        margin-left: auto;
    }
    .researchPic {
        width: 35%;
    }
    .arrow {
        width: 10%;
        padding-bottom: 35px;
    }
}

@media screen and (max-width: 620px) {
    .projwfss, .top3, .unix, .travel {
        width: 90%;
        margin-right: auto;
        margin-left: auto;
    }
}

@media screen and (max-width: 500px) {
    .researchPic {
        width: 100px;
    }
    .arrow {
        width: 10%;
        padding-bottom: 35px;
    }
}
@media screen and (max-width: 400px) {
    .research {
        width: 100%;
    }
    .researchPic {
        width: 40%;
    }
    .arrow {
        width: 8%;
        padding-bottom: 30px;
    }
    .sketchPics {
        width: 100%;
    }
    .sketch {
        width: 90%;
        margin-right: auto;
        margin-left: auto;
    }
}

/*UNIX*/
.unix {
    width: 900px;
    margin-left: auto;
    margin-right: auto;
}
.unixpic {
    display: block;
    width: 700px;
    margin-left: auto;
    margin-right: auto;
}
@media screen and (max-width: 970px) {
    .unix {
        margin-left: 1em;
        margin-right: 1em;
        width: 95%;
    }
}
@media screen and (max-width: 900px) {
    .unixpic {
        width: 95%;
    }
}

/* TRAVEL */
.travel {
    width: 900px;
    margin-left: auto;
    margin-right: auto;
}
.travTitle {
    font-style:italic;
    font-size:20px;
}
.travFlex {
    display: grid;
    gap: 30px;
    grid-template-columns: 185px 685px;
    grid-template-areas: "title grid2";
}
.travTitle {
    grid-area: title;
    /* text-align: center; */
}
.grid2 {
    grid-area: grid2;
    padding-top: 2em;
}
.center {
    text-align: center;
}
@media screen and (max-width: 910px) {
    .travFlex {
        display: block;
        padding-top: 1em;
    }
    .travel {
        width: 90%;
        margin-left: auto;
        margin-right: auto;
    }
    .grid2 {
        padding-bottom: 2em;
        padding-top: 0em;
    }
}

/* FOOTER STYLES */

.footer {
    background-color: #f3afa5f5;
    clear: both;
    height: 5em;
}
.footerText {
    text-align: center;
    padding-top: .5em;
}

.bold {
    font-weight: bold;
}
.contact {
    display: flex;
    flex-wrap: flex-wrap;
    justify-content: space-around;
    width: 250px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 15em;
    margin-bottom: 1em;
}
.contact2 {
    margin-top: 7em;
    display: flex;
    flex-wrap: flex-wrap;
    justify-content: space-around;
    width: 250px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 1em;
}
@media screen and (max-width: 900px) {
    .contact {
        margin-top: 7em;
    }
    .contact2 {
        margin-top: 3em;
    }
}

@media screen and (max-width: 600px) {
    .contact {
        margin-top: 5em;
    }
}
@media screen and (max-width: 250px) {
    .contact, .contact2 {
        width: 100%;
    }
}