/*Styling CSS for ProfessionalPortfolioCRH*/
/*Authored by Charissa Hollister on 04/19/22*/

* {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}

/*variables*/

:root {
    --primary-color: #e56fea;
    --secondary-color: ivory;
    --bg-color:  #2a607c;
    --bg-color2: #0076c6;
    --padding: 20px;
    --blur: 10px;
}

/*general selectors*/
.left-align{
    justify-content: left;
}
.right-align{
    justify-content: right;
}
.float-right {
    float: right;
}

/*--headline with quicklinks*/
header {
    display: flex;
    width: 100vw;
    justify-content: space-between;
    align-items: center;
    padding: 15px 0;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    background-color: var(--bg-color);
    color: var(--secondary-color);
    z-index: 9999
}

header h2{
    font-size: 48px;
    padding-left: 25px;
}

nav {
    justify-content: space-around;
    align-items: center;
    font-family: 'Gill Sans', 'Gill Sans MT', 'Calibri', 'Trebuchet MS', sans-serif;
    font-size: 30px;
    display: flex;
}

nav div{
    padding: 0 25px;
}

nav a {
    color: var(--primary-color);
}

nav a:hover{
    color: var(--secondary-color);
}

/*hero background image and subtitle*/

.heropg {
    height: 300px;
    width: 100vw;
    margin-bottom: 25px;
    background-image: url(./images/digital\ computer\ wallpapers.webp);
    background-size: cover;
    background-position: center;
    position: relative;
    border: black 1px solid;
}

.subtitleBox{
position: absolute;
right: 0;
bottom:20px;
width: 51vw;
min-width: 250px;
height: 100px;
border: black 0.5px dashed;
opacity: 87%;
background: linear-gradient(to right,var(--secondary-color),var(--primary-color));
border-right: none;
border-top-left-radius: 12px;
border-top-right-radius: 0;
border-bottom-left-radius: 12px;
border-bottom-right-radius: 0;
display: flex;
}

.subtitle{
    position: absolute;
right: 0;
padding-right: 2vw;
bottom:20px;
font-weight: bold;
    width: 49vw;
    min-width: 250px;
    height: 100px;
    font-size: 40px;
    text-align: right;
    line-height: 100px;
}

/*Coming soon page*/
.heropg aside{
    position: absolute;
    right: 0;
    bottom:20px;
    border: black 0.5px dashed;
    opacity: 85%;
    background: linear-gradient(to right,var(--secondary-color),var(--primary-color));
    font-size: 40px;
    text-align: right;
    line-height: 100px;
    border-right: none;
    border-top-left-radius: 12px;
    border-top-right-radius: 0;
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 0;
    width: 50vw;
    min-width: 480px; 
    height: 150px;
    padding-right: 20px;
}
.avatarWork{
    position: absolute;
    right: 36vw;
    top: 74px;
    width: 30vw;
    min-width: 30px;
    margin: 20px;
    margin-left: 50px;
    }

/*about me and contact left column*/

.aboutMe, .contactMe{
display: flex;
justify-content: left;
padding: 12px 0;
margin-bottom: 20px;
}

.aboutMe aside, .contactMe aside{
    width:30vw;
    min-width: 50px;
    display: flex;
justify-content: right;
align-items: center;
border-right: 1px solid var(--primary-color);
}

.avatarWave{
    width: 10vw;
    min-width: 30px;
    padding: 12px 8px 12px 0;
}

.aboutMe h3, .contactMe h3{
    font-size: 28px;
    padding: 0 20px 0 10px;
}

/*about me right column*/
.aboutMe div{
    width:70vw;
    word-wrap: normal;
    align-items: center;
}

.aboutMe p{
    padding: 10px 20px;
    font-size: 20PX;
    color: navy;
text-indent: 30px;
}

/*contact me right column*/

.contactMe section {
    justify-content: space-around;
    align-items: center;
    font-family: 'Gill Sans', 'Gill Sans MT', 'Calibri', 'Trebuchet MS', sans-serif;
    font-size: 30px;
    display: flex;
    margin: 20px 0;
}

.contactMe a{
color: darkmagenta;
}
.contactMe a:hover{
    color: black;
}

.contactMe div{
    margin: 0 25px;
}

/*work*/

    /*flex box for work section 
    left and right columns*/
.workSec{
    display: flex;
    width: 100vw;
    margin: auto;
    flex-wrap: wrap;
    border: none;
    margin-top: 20px;
    justify-content: space-between;
    align-items: center;
}

.leftProj, .rightProj{
    width:35vw;
    min-height: 500px;
    justify-content: center;
    text-align: center;
}

.leftProjImg, .rightProjImg{
    width: 22vw;
    height: auto;
    margin: 10px 0;
    display: flex;
    transition: 0.3s;
    /*add shadow*/
}

/* .gitHubLink{

} */

/*attempt at click then move and expand, come back to later
.project1embed iframe{
    width: 22vw;
    height: auto;
}

#btnControl {
    display: none;
}
#btnControl:checked + label {
    border: #e56fea solid 5px;
    transform: scale(1.7); 
    justify-content: left;
    margin-right:-20vw;  
}*/

/*container for project sections*/
.projs{
    display: flex;
    align-items: center;
    margin:auto;
    justify-content: center;
}

.leftProjImg:hover{
    border: #e56fea solid 5px;
    transform: scale(1.7); 
    justify-content: left;
    margin-right:-20vw;
}
.rightProjImg:hover{
    border: #e56fea solid 5px;
    transform: scale(1.7); 
    justify-content: right;
    margin-left:-20vw;
}

/*project titles*/
.leftH4{
    color: var(--primary-color2);
    position: absolute;
    font-size: 23px ;
    left: 3vw;
    padding: 10px 3vw;
    border: solid 3px var(--primary-color);
    width: auto;
    opacity: 85%;
    background: linear-gradient(to left,var(--secondary-color),var(--primary-color));
}

.rightH4{
    color: var(--primary-color2);
    position: absolute;
    font-size: 23px ;
    right: 3vw;
    padding: 10px 3vw;
    border: solid 3px var(--primary-color);
    width: auto;
    opacity: 85%;
    background: linear-gradient(to right,var(--secondary-color),var(--primary-color));
}



    /*center block*/
.centerBlock img{
    width: 30vw;
    text-align: center;
    margin:auto;
    justify-content: center;
}

/*Other Section*/
.OtherProj{
    display: flex;
    width:100vw;
    justify-content: center;
    align-items: top;
    margin-top:35px;
}

.otherImg{
    width: 35vw;
    height: auto;
    max-height: 200px;
    margin: 25px 0;
    display: flex;
    /*add shadow*/
}

.midH4{
    color: var(--bg-color2);
    position: absolute;
    font-size: 23px ;
    padding: 10px 3vw;
    border: solid 3px var(--primary-color);
    opacity: 85%;
    background: linear-gradient(to top,var(--secondary-color),var(--primary-color));
justify-content: center;
text-align: center;
margin: 0 39vw;
width: 21vw;
text-align: center;
}

/* for items inside of OtherProj on top of picture
.OtherProj p{}*/



/*footer*/
footer {
    padding: 20px;
    padding-left: 40px;
    width: 100vw;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    background-color: var(--bg-color);
    color: var(--secondary-color);
    display: inline-block;
}

footer h2{
    display: inline-block;
    font-size: 45px;
}

footer span{
    font-size: 25px;
}

footer p {
    padding: 10px;
    padding-bottom: 20px;
    padding-right: 50px;
    float: right;
    font-family: 'Gill Sans', 'Gill Sans MT', 'Calibri', 'Trebuchet MS', sans-serif;
    font-size: 30px;
    color: var(--primary-color);
}



  /* MEDIA QUERY FOR SMALLER DESKTOP SCREENS AND SMALLER */
  @media screen and (max-width: 980px) {


    header {
        padding: 20px;
        padding-left: 40px;
        display: inline-block;
    }
    
    header h2{
        display: inline-block;
        font-size: 45px;
    }

    nav{
        padding: 10px;
        width: 90vw;
        margin: 0 7vw 0 3vw;
        font-size: 30px;
    }

    nav div{
    padding:0;
    }
    

    .aboutMe, .contactMe{
    display: block;
    width:100vw;
    justify-content: center;
    }

    .aboutMe aside, .contactMe aside{
    width:60vw;
    justify-content: center;
    align-items: center;
    border-bottom: 2px solid var(--primary-color);
    border-right: none;
    margin: 5px 20vw;
    padding: 10px 0;
    }
    
    .aboutMe h3, .contactMe h3{
        font-size: 40px;
    }

    .aboutMe div{
        width:100vw;
        word-wrap: normal;
        align-items: center;
    }

    .contactMe section{
        padding-top: 5px;
        width: 100vw;
        font-size: 30px;
        align-items: space-evenly;
    }
        
    .leftProj, .rightProj{
        width:40vw;
        margin: 5vw;
    }
    
    .leftProjImg{
        width: 38vw;
        left:7vw;
    }

    .rightProjImg{
        width: 40vw;
        right:7vw;
    }

    .leftH4, .rightH4{
        font-size: 30px;
    }
    .centerBlock img{
        visibility: hidden;
        width: 0;
        height: 0;
    }
    
    .otherImg{
        width: 65vw;
    }
    
    .midH4{
        font-size: 40px ;
        margin: 0 32vw;
        width: 46vw;
    }
    
    footer p {
        padding: 10px;
        padding-bottom: 20px;
    }


    }
    
    /* MEDIA QUERY FOR MOBILE PHONES AND SMALLER */
@media screen and (max-width: 650px) {

    header{
        width: 100%;
    }
    .aboutMe div{
        font-size: 12px;
    }

    .avatarWave{
        width:30vw;
        height: auto;
    }

    nav{
        display: block;
    }

    .subtitle{
        font-size: 18px;
    }

    .workSec{
        width: 100vw;
        justify-content: center;
        align-items: center;
    }
   
    .leftProj, .rightProj{
        justify-content: center;
        width:100vw;
        margin-top: 0;
        margin-bottom: 0;

    }

    .projs{
        display: block;
        width:100vw;  
        padding: 0 20vw; 
        margin: 0;
    }

    .leftProjImg, .rightProjImg{
        text-align: center;
        justify-content: center;
        align-items: center;
        width: 60vw;
        margin-left: 20vw;
        margin-right: 20vw;
        padding: 20px 0;
        height: auto;
    }

    .leftProjImg:hover, .rightProjImg:hover{
        transform: scale(1.4); 
        justify-content: left;
        margin-right:-20vw;
    }

    .leftH4, .rightH4{
        justify-content: center;
        font-size: 18px ;
        left: 22vw;
        width: 56vw;
        opacity: 85%;
        background: linear-gradient(to left,var(--secondary-color),var(--primary-color));
    }

    .contactMe aside{
        width: 100vw;
        font-size: 25px;
    }
.contactMe section{
    display: block;
}

footer{
    width: 100%;
    display: inline-block;
    font-size: 18px;
}

span{
font-size: 8px;
}


/*coming soon mobile*/
    .avatarWork{
        position: absolute;
        right: 25vw;
        top: 30vh;
        margin: 20px;
        }



}