:root {
    --primary-color: rgb(240, 78, 14);
    --secondary-color: rgb(240, 191, 87);
    --tertiary-color: rgb(98, 106, 121);
    --quarternary-color:  rgb(110, 193, 199);
}

body{
    background-color: whitesmoke;
    background-size: auto;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}

.parallaxI{
    background-image: 
    linear-gradient(to left, rgba(22, 22, 22, 0.7), rgba(27,27,27, 0.3)),
    url("../images/DTLABW.jpg");
    height: 800px;
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    margin-top: 17vh;
    margin-left: -2vh;
    margin-right: -2vh;
    color: whitesmoke;
}

.parallaxII{
    background-color: whitesmoke;
    height: 500px;
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    margin-top: 0vh;
    margin-left: -2vh;
    margin-right: -2vh;
    margin-bottom: -2vh;
    overflow: scroll;
}

.parallaxIII{
    background-image:
    linear-gradient(to left, rgba(126, 126, 126, 0.7), rgba(27,27,27, 0.3)),
    url("../images/HWOOD.jpg");
    height: 700px;
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    margin-top: 0vh;
    margin-left: -2vh;
    margin-right: -2vh;
}

.parallaxIV{
    background-color: rgb(243, 243, 243);
    height: 200px;
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    margin-top: 0vh;
    margin-left: -2vh;
    margin-right: -2vh;
}

.parallaxV{
    background-image: url("");
    height: 700px;
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    margin-top: 0vh;
    margin-left: -2vh;
    margin-right: -2vh;
}

.parallaxVI{
    background-color: rgb(29, 29, 29);
    height: 200px;
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    margin-top: 0vh;
    margin-left: -2vh; 
    margin-right: -2vh;
    color: whitesmoke;
}


.about-introduction{
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: -28px;
    font-size: 20px;
}

.about-greeting{
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 5vh;
    font-size: 40px;
}

.pic-container{
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 17vh;
    margin-top: -17vh;
}

.profile-pic{
    background-image: url("../images/BrianHeadshot1.JPG");
    background-size: cover;
    background-position: 20% 20%;
    height: 353px;
    width: 353px;
    border-radius: 185px;
    border:rgb(243, 243, 243) 3px solid;
}

.about-bio-container{
    display: flex;
    align-items: center;
    justify-content: center;
    color: black;
    margin-top: 0px;
    margin-left: 0px;
    margin-right: 0px;
}

.about-bio-paragraph{
    font-size: 15px;
}

.bracket{
    font-size: 480px;
    font-weight: 20;
    color: var(--secondary-color);
    margin-top: -80px;  
}

.skills-title{
    display: flex;
    justify-content: center;
    color: whitesmoke
}
.about-skills-container{
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 20px;
    margin-right: 20px;
}

.card-content{
    text-align: center;
    margin: 80px;
}

.card{
    background-color: whitesmoke;
    color: black;
    margin: 55px;
    height: 500px;
    width: 400px;
    border-radius: 30px;
}

.card-images{
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: whitesmoke;
    border-bottom: 2px var(--tertiary-color) solid;
}

.mannequin-icon{
    height: 200px;
    width: 194px;
    padding-top: 10px;
}

.coding-laptop-icon{
    height:200px;
    width:200px;
    padding-left: 20px;
    padding-bottom: 16px;
}

.retail-icon {
    height: 200px;
    width:200px;
    padding-top: 15px;
    padding-right: 20px;
}

.mobile-device-icon{
    height: 200px;
    width: 200px;
}

.languages{
    margin-top: 27px;
}

.retail{
    margin-top: 60px;
}

.resume-title{
    display: flex;
    justify-content: center;
    margin-top: 0px;
}

.resumes{
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 25px;
}

.resume-option{
    display:block;
    background-color: var(--secondary-color);
    color: var(--tertiary-color);
    height: 28px;
    padding: 10px;    
    margin-right: 50px;
    font-size: 20px;
    font-weight: 700;
    border-radius: 20px;
}

/* .resume-option::after{
    content: "";
    position: absolute;
    right: 100%;
    height: 28px;
    width: 250px;
    background-color: var(--tertiary-color);
    color: var(--secondary-color);
    opacity: 0;
    transition: all 0.2s ease-in-out;
} */

/* .resume-option:hover::after{
    right: 0;
    opacity: 0.9;
} */

.resume-option:hover .resume-link{
    opacity: 1;
}

.resume-link{
    text-decoration: none;
    display: block;
    text-align: center;
    background-color: var(--tertiary-color);
    opacity: 0;
    color: var(--secondary-color);
    height: 28px;
    width: 250px;
    padding: 10px;
    margin-top: -33px;
    margin-left: -10px;
    font-size: 20px;
    font-weight: 700;
    border-radius: 20px;
    position: absolute;
    transition: all 0.1s ease-in-out;
}

.contact-title{
    display: flex;
    justify-content: center;
}

.social-icons{
    display: flex;
    justify-content: center;
}

.social-icons >a {
    color:white;
    padding:20px;

}