/*  HOME PAGE = index.html  */

/* header */

header {
    text-align: center;
}
img.logo {
    max-width: 40%;
    width: 150px;
}

/* Click through to other pages */
nav a {
    font-family:Arial, Helvetica, sans-serif;
    color: rgb(195, 233, 222);
    margin-bottom: 40px;
    text-decoration: none;
    text-size-adjust: 10%;

}
a:hover {
    color: rgb(136, 134, 134);
}


/* logo */
main {
    text-align: center;
}

img.software {
    max-width: 15%;
    margin-bottom: 80px;
}

img.engineer {
    max-width: 15%;
    margin-bottom: 80px;
    
}

/* Picture of Halina */
img.hero {
    margin-top: 2%;
    border-radius: 50%;
    width: 30%;
    height: auto;
    max-width: 60%;
    max-height: auto;
    border: 8px solid #c3e9de;
    border-style: outset;

}
 
/* Quote */
div {
    margin-top: 30px;
    max-height: 60%;
    max-width: 40%;
    margin-left: 30%;
    font-style: italic;
    background-color: #dbf5f4;
    border-radius: 75%;
    background: radial-gradient(circle at center, #ceefef 0, #f2ffff, white 100%);
    
}

p1 {
    font-size: smaller;
    padding-bottom: 5%;
    position: relative;
    top: 15px;
    text-size-adjust: 10%;

}

/*@media only screen and (-webkit-min-device-pixel-ratio:3) {
    main{
        display:flex;
        flex-direction:column;
        align-items:center;
    }
    main img{
        width: 80%;
        max-width: 80%;
    }
    
}


/*================================================================*/
/*  ABOUT PAGE = about.html  */

header {
    text-align: center;
}

img.logo {
    max-width: 40%;
    width: 150px;
}


/* Click through to other pages */
nav a {
    font-family:Arial, Helvetica, sans-serif;
    color: #c3e9de;
    margin-bottom: 40px;
    text-decoration: none;
    font-size: 1.5vw; 
    
}

/* logo */
main {
    text-align: center;
}

img.about {
    max-width: 20%;

}

/* Bio paragraph*/
p {
    margin-top: 30px;
    max-height: 60%;
    max-width: 40%;
    margin-left: 30%;
    font-style: italic;
    text-align: center;
    background-color: #dbf5f4;
    border-radius: 75%;
    background: radial-gradient(circle at center, #ceefef 0, #f2ffff, white 100%);
    
}


/*================================================================*/
/*  EXPERIENCE PAGE = experience.html  */

header {
    text-align: center;
}
img.logo {
    max-width: 40%;
    max-height: auto;
}

/* Click through to other pages */
nav a {
    font-family:Arial, Helvetica, sans-serif;
    color: rgb(195, 233, 222);
    margin-bottom: 40px;
    text-decoration: none;
    font-size: 1.5vw; 
    
}

/* logo */
main {
    text-align: center;
}

h2 {
    font-family:Arial, Helvetica, sans-serif;
    color: rgb(195, 233, 222);
    margin-bottom: 10px;
    text-decoration: none;
    font-size: 3vw; 

}

div2 {
    margin-top: 30px;
    max-height: 60%;
    max-width: 20%;
    font-style: italic;
    text-align: right;
    background-color: #dbf5f4;
    border-radius: 75%;
    background-image: linear-gradient(to right, rgba(255,0,0,0), rgb(255, 255, 255));
}

h3 {
    margin-top: 70px;
    font-family:Arial, Helvetica, sans-serif;
    color: rgb(195, 233, 222);
    margin-bottom: 20px;
    text-decoration: none;
    font-size: 3vw; 
}
div3 {
    margin-top: 30px;
    max-height: 60%;
    max-width: 20%;
    font-style: italic;
    text-align: right;
    background-color: #dbf5f4;
    border-radius: 75%;
    background: radial-gradient(circle at center, #ddf3f3 0, #f2ffff, white 100%);
    
}

img.experience {
    max-width: 20%;
}

img.education {
    max-width: 20%;
}

img.linkedIn {
    width: 30px;
    
}

img.linkedin:hover{
    color: red;
}


/*================================================================*/
/*  PORTFOLIO PAGE = portfolio.html  */

header {
    text-align: center;
}
img.logo {
    max-width: 40%;
    max-height: auto;
}

/* Click through to other pages */
nav a {
    font-family:Arial, Helvetica, sans-serif;
    color: rgb(195, 233, 222);
    margin-bottom: 40px;
    text-decoration: none;
    font-size: 1.5vw; 
    
}

/* logo */
main {
    text-align: center;
}

img.portfolio {
    max-width: 20%;
    margin-left: 40%;
    margin-top: 20px;
    
}

img.comingsoon {

    max-width: 40%;
    max-height: 60%;
    margin-top: 8%;
    padding-right: 20px;
    margin-left: 30%;
}