/*
By: Raymond Chung
For: rchung95.github.io

Sections:
1. General
2. Navigation Bar
3. About
4. Project Info
5. Footer
6. Media Sizing
7. Icons
*/

/*------------------ 1. General ------------------*/
html {
	height: 100vh;
	width: 100vw;
}

body {
	background-color: #fff;
	font-family: 'Lato', sans-serif;
	color: #616161;
}

section#home {
    background-color: #82dceb;
    color: #fff;
    padding-top: 100px;
    height: 100vh;
    width: 100vw;
}

section#projects {
    background-color: #f1f1f1;
}

footer#contact {
    color: #fff;
    background-color: #2b2d2f;
}

h4#title {
    /* color: #58c4ea; */
    letter-spacing: 4px;
    font-weight: 300;
}

hr#hrTitle {
    border: 1.4px solid #5dd1e4;
    background-color: #5dd1e4;
    margin: 0 40vw 0 40vw;
}

/*------------------ 2. Navigation Bar ------------------*/
a#navbile {
    color: #fff;
    font-size: 20px;
}

.navbar, .navbarP {
    background-color: #82dceb;
}

.navbarP {
    box-shadow: 0 0 0 0 #fff;
}

#navP {
    color: #fff;
}

.navbar {
    padding-top: 10px;
}

nav.custom2 {
    background-color: rgba(0, 0, 0, 0.4) !important;
}

nav ul a {
    color: #616161;
}

.table-of-contents a:hover {
    border-left: 2px solid #58c4ea;
}

.table-of-contents a.active {
    border-left: 8px solid #58c4ea;
}

li#menucontact {
    padding-left: 14px;
}

/*------------------ 3. About ------------------*/
img#pic {
    width: 90%;
}

p#desc {
    font-size: 1.15rem;
}

h2#raymond {
    font-weight: 300;
}

span#chung {
    color: #58c4ea;
    font-weight: 700;
}

h5#sub {
    font-size: 20px;
    font-weight: 300;
    letter-spacing: 1px;
    border: 4px solid #fff;
    padding: 10px;
}

h5#aboutSub {
    font-size: 20px;
    border: 4px solid #fdc424;
    color: #fdc424;
    padding: 10px;
}

.aTop {
    padding: 40px 0 40px 0;
}

/*------------------ 4. Project Info ------------------*/
#pTitle {
    font-weight: 700;
}

#pSubTitle {
    font-style: italic;
    font-size: 1.2rem;
    color: #aab;
}

#space {
    padding-bottom: 40px;
}

hr#hrP {
    border: 1.4px solid #5dd1e4;
    background-color: #5dd1e4;
    margin: 0 32vw 0 32vw;
}

img#portImg, img#blank {
    width: 100%;
}

#menuIcon {
    padding-left: 16px;
}

span#problem {
	font-weight: 700;
	font-style: italic;
	font-size: 1.3em;
}

button#resume {
    font-size: 20px;
    color: #616161;
    background-color: transparent;
    border: 2px solid #616161;
    padding: 10px;
    border-radius: 10px;
    transition: color,border 0.3s ease-out;
}

button#resume:hover {
    color: #5dd1e4;
    border: 2px solid #5dd1e4;
}

div#skills {
    color: #fff;
    background-color: #82dceb;
    margin-bottom: 4px;
}

p#aboutSkills {
    font-size: 14pt;
    margin-bottom: -1px;
}

#blank:hover {
    opacity: 0.65;
}

.modal {
    width: 80vw;
    /*height: 86vh;*/
    max-height: 88vh;
}

a.proj {
    padding-left: 10px;
}

p#caption {
    color: #aab;
    font-size: 0.9rem;
    font-style: italic;
}

img.imgSpace {
    padding-top: 12px;
    padding-bottom: 12px;
}

/*------------------ 5. Footer ------------------*/
.v-section {
    padding-top: 1rem;
    padding-bottom: 0.1rem;
}

#copyright {
    color: rgba(255, 255, 255, 0.4);
}

/*------------------ 6. Media Sizing ------------------*/
@media(min-width: 601px) {
    section#home {
        padding-top: 130px;
        background-image: url(../img/iphoneangle.png);
        background-repeat: no-repeat;
        background-size: 90vw;
        background-position: center 50vh;
    }

    section#projects {
        padding-top: 40px;
    }

    h5#sub {
        font-size: 24px;
    }

    h5#aboutSub {
        font-size: 24px;
    }

    hr#hrTitle {
        margin: 0 45vw 0 45vw !important;
    }

    img#pic {
        width: 80%;
    }

    img#portImg {
        width: auto;
        max-width: 100%;
    }

    p#desc {
        font-size: 1rem;
    }
}

@media(min-width: 901px) {
    section#home {
        background-size: 62vw;
        background-position: center 62vh;
    }

    h5#sub {
        margin: 0 200px 0 200px;
    }

    hr#hrTitle {
        margin: 0 47vw 0 47vw !important;
    }

    #iconFix { /* fix this */
        margin-left: -100px;
    }
}

@media(min-width: 1301px) {
    section#home {
        background-position: center 50vh;
    }
}

/*------------------ 7. Icons ------------------*/
.material-icons {
    font-size: 30px;
}

.list-inline>li {
    display: inline-block;
    padding-right: 5px;
    padding-left: 5px;
    list-style: none;
}

.social-buttons, ul.list-inline.social-buttons, .contact-buttons, ul.list-inline.contact-buttons {
    padding: 0;
    margin-top: 2px;
    margin-bottom: -4px;
}

.social-icons {
    color: transparent;
    font-size: 1.6em;
    border-radius: 200px;
    background-color: rgba(0, 0, 0, 0.12);
}

.contact-icons {
    color: transparent;
    font-size: 1.6em;
    background-color: #313336;
    border-radius: 200px;
}

span.social-icons.fa-stack {
    color: rgba(255, 255, 255, 0.8);
    transition: background-color,color 0.3s ease-in;
}

span.contact-icons.fa-stack {
    margin-top: 4px;
    color: rgba(255, 255, 255, 0.4);
    transition: color,background-color 0.3s ease-in;
}

span.resume.social-icons.fa-stack:hover {
    color: #fff;
    background-color: #65589C;
}

span.contact-icons.fa-stack:hover {
    color: #fff;
    background-color: #0DBEDB; /* #5dd1e4 as alt*/
}

span.linkedin.social-icons.fa-stack.fa-2x:hover {
    color: #fff;
    background-color: #1b8bbf;
}

span.github.social-icons.fa-stack.fa-2x:hover {
    color: #fff;
    background-color: #ff449c;
}

span.email.social-icons.fa-stack.fa-2x:hover {
    color: #fff;
    background-color: #FD5959;
}