body{
    margin: 0;
    padding: 0;
}

nav{
    transition: background-color 0.8s ease-in-out;
}

header{
    background: linear-gradient(90deg, #FC466B 0%, #3F5EFB 100%);
}

.nav-scrolled{
    background: #9055a8;
    transition: background-color 0.8s ease-in-out;
}


nav span #leopard-brand{
    width: 10vh;
    margin-left: 1em;
}

nav .navbar-links ul{
    list-style-type: none;
}

nav .navbar-links ul li{
    display: inline-block;
}

nav .navbar-links ul li a{
    text-decoration: none;
    color: white;
    font-weight: bold;
}

@media screen and (max-width: 600px) {
    nav{
        background-color: #9055a8;
    }

    nav .navbar-links ul li a{
        font-size: xx-small;
    }

    nav span #leopard-brand{
        width: 10%;
        margin-left: 1em;
    }

    html{
        font-size: x-small;
    }

    .chevron i{
        display: none;
    }
}

nav .navbar-links ul li a:hover{
    text-decoration: underline;
}

.intro{
    padding-top: 10%;
    height: 100vh;
    background: linear-gradient(90deg, #FC466B 0%, #3F5EFB 100%);
}


.main-title{
    display: flex;
    justify-content: center;
    align-items: center;
}

.main-title h1{
    color: aliceblue;
    font-size: 15vmin;
}

.main-title p{
    color: rgb(253, 253, 253);
    font-size: 10vmin;
    font-weight: lighter;
}

.chevron i{
    font-size: 10vh;
    color: white;
    animation-name: down-arrow;
    animation-duration: 2s;
    animation-iteration-count: infinite;
    bottom: 0;
    position: absolute;
}

@keyframes down-arrow {
    0%{color: white;  bottom: 0;}
    100% {color: #f9ef9c; bottom: 1vmin;}
}

#about-section .subtitle{
    font-size: 8vmin;
    color: #451A6E;
    font-weight: bold;
    text-align: center;
}

#about-section #skills{
    font-weight: 500;
    color: #451A6E;
    font-size: 3vmax;
    text-align: center;
}

.skill-container{
    border: 2px #be82d6 solid;
    border-radius: 4px;
    margin-left: 2vmax;
    box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);
}

.skill-container ul li{
    list-style: circle;
}

.sections{
    margin:0%;
    padding: 5%;
    background-color:white
}

#about-section #introducing-text{
    border: 2px solid #be82d6;
    padding: 3%;
    font-weight: 420;
    text-justify: inter-word;
    border-radius: 4px;
    box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);
}

#resume-title{
    background-color: #bc7fd4;
    padding: 2vmin;
}

#resume-title h2{
    font-size: 8vmin;
    color: white;
    font-weight: bold;
    text-align: center;
}

#resume-section .logos{
    width: 100%;
    height: auto;
    max-width: 12vmax;
}

#resume-section .jobs{
    border: #A095F5 2px solid;
    padding: 5vmin;
    border-radius: 5px;
    border-left: thick double #8232cd;
    display: flex;
    align-items: center;
    box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);
}

#resume-section .jobs .job-title{
    font-weight: 400;
    text-decoration: underline 1px;
}

#resume-section .jobs .company{
    font-weight: 500;
}

#resume-section .jobs .time-worked{
    font-weight: 400;
    font-size: 14px;
    color: #3a356b;
}

#resume-section h2{
    font-weight: bold;
    color: #451A6E;
}

#projects-title{
    background: #A095F5;
    padding: 2vmin;
    margin-bottom: 8vmin;
}

#projects-title h2{
    font-size: 8vmin;
    color: white;
    font-weight: bold;
    text-align: center;
}

#projects .project-box{
    border: #bc7fd4 2px solid;
    border-radius: 5px;
    margin: 2vmin 2vmin 2vmin 2vmin;
    padding: 1em;
}

#projects .project-box:hover{
    border: #8232cd 2px solid;
    box-shadow: 2px 2px 2px 2px rgba(0, 0, 0, 0.2);
}

#projects .project-box img{
    width: 35vmax;
    height: 16vmax;
    border-radius: 6px;
    box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);
}

#projects .project-box #homey{
    width: 23vmax;
    height: 15vmax;
    border-radius: 6px;
    box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);
}

#photography-title{
    background: #6ebae1 ;
    padding: 2vmin;
    margin-top: 8vmin;
    margin-bottom: 8vmin;
}

#photography-title h2{
    font-size: 8vmin;
    color: white;
    font-weight: bold;
    text-align: center;
}

#photos .photo-box img{
    border-radius: 6px;
    width: 15em;
}


footer{
    background-color: #5c0053;
    position: absolute;
    margin: 0;
    width: 100%;
    font-size: 15px;
}

.icons-contact{
    color: whitesmoke;
}

.icons-contact:hover{
    color: #d793fc;
}