/* GLOBAL SETTINGS */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    overflow: hide;
  
    font-family: Oswald;
    background: black;
  }

/* JAVASCRIPT */
.particles-js{
    background: none;
    position: absolute;
    width: 100%;
    height: 65%;

    z-index: 100;
}

.particles-js-canvas-el{
    background:none;
    
}

/* STYLE FUNCTIONS */

.hLink{
    text-decoration: none;
    font-size: 1.5vw;
    color: darkblue;
}

.container{
    display: flex;
    justify-content: space-evenly;
    align-content: center;

    width: 100%;
    height: auto;
}

.splitContainer {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-content: center;
    align-items: center;
    text-align: center;

    width: 50%;
    height: auto;
}

.contentContainer {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-around;
    align-content: center;
    align-items: center;
    text-align: center;

    padding: 2.5vh;
    width: 70%;
    height: auto;
}

.titleText{
    font-size: 5vw;
    font-weight: bold;
    color: white;
}

.standardText{
    font-size: 2vw;
    color: white;
}

.subText{
    font-size: 1.5vw;
    color: gray;
}


.button {
    width: 25vh;
    height: auto;
    
    padding: 0.1vw 0.1vw;
    border: 0.25vw solid white;
    border-radius: 15px;
    font-size: 3vw;
    color: white;

    z-index: 999;
}

.button:hover{
    background: hsl(194, 100%, 13%);
    transition: all ease-in-out 200ms;
    box-shadow: 1px 1px 15px white;
}

.button:active{
    background: hsl(194, 100%, 90%);
}

.clearBackground{
    background: none;
}

/* SPECIFIC SELECTORS */

#backgroundImage{
    display: block;
    width: 100%;
    height: 100%;
}

#imageText{
    position: absolute;
    top: 10vh;

    z-index: 2;
    background: none;

    text-align: center;
}

.skillsContent{
    padding: 2.5vh;
    margin: 2.5vh;
    border: 0.125vw solid white;
    border-radius: 15px;
    box-shadow: 1px 1px 12px white;
}

.skillsContent:hover{
    box-shadow: 1px 1px 17px white;
    transition: all ease-in-out 200ms;
}

.experienceContent{
    padding: 2.5vh;
    margin: 2.5vh;
    border: 0.125vw solid white;
    border-radius: 15px;
    box-shadow: 1px 1px 12px white;
}

.experienceContent:hover{
    box-shadow: 1px 1px 17px white;
    transition: all ease-in-out 200ms;
}

.experienceDescription{
    width: auto;
    height: auto;
    padding: 2.5vh;
    margin: 2.5vh;
    border: 0.125vw solid white;
    border-radius: 15px;
    box-shadow: 1px 1px 12px white;
}

.edContent{
    padding: 2.5vh;
    margin: 2.5vh;
    border: 0.125vw solid white;
    border-radius: 15px;
    box-shadow: 1px 1px 12px white;
}

.edContent:hover{
    box-shadow: 1px 1px 17px white;
    transition: all ease-in-out 200ms;
}

.ecContent{
    padding: 2.5vh;
    margin: 2.5vh;
    border: 0.125vw solid white;
    border-radius: 15px;
    box-shadow: 1px 1px 12px white;
}

.ecContent:hover{
    box-shadow: 1px 1px 17px white;
    transition: all ease-in-out 200ms;
}

.pContent{
    padding: 2.5vh;
    margin: 2.5vh;
    border: 0.125vw solid white;
    border-radius: 15px;
    box-shadow: 1px 1px 12px white;
}

.pContent:hover{
    box-shadow: 1px 1px 17px white;
    transition: all ease-in-out 200ms;
}


.pContent:hover{
    box-shadow: 1px 1px 17px white;
    transition: all ease-in-out 200ms;
}

.contactForm{
    display: flex;
    flex-direction: column;
    justify-content: center;
    font-size: 3vw;
    width: 100%;
}

.contactInput{
    border: 0.125vw solid white;
    border-radius: 15px;
    padding: 1vh;
    margin: 1vh;
    font-size: 2vh;
    color: white;
    height: auto;
}

.ciButton:hover{
    box-shadow: 1px 1px 17px white;
    transition: all ease-in-out 200ms;
}