/* default styling */

html {
    -webkit-font-smoothing: antialiased;
}
body {
    padding: 0;
    font-size: 100%;
}

body, h1, p, li {
    font-family: 'Montserrat', sans-serif;
    margin: 0;
    font-size-adjust: 0.5;
}




/* Text Styles */

p, li {
    font-size: 1.875rem;
    text-align: left;
}

ul, p {
    margin-bottom: 30px;
    line-height: 1.6;
    color: #fff;
}


h1 {
    font-size: 3em;
    margin: 30px 0 30px 0;
    text-align: left;
    line-height: 1.05em;
    color: #fff;

}

a {
    text-decoration: none;
    color: #33b1f8;
    transition: color .4s;
}

a:hover {
    text-decoration: none;
    color: #aa73ff;
}


a > h1 {
    color: #33b1f8;
    transition: color .4s;
}

a > h1:hover {
    color: #aa73ff;
}
/* particle.js style */


#particles-js {
    width: 100%;
    position: absolute;
    background: #323840;
    top: 0;
    left: 0;
  }

canvas{
    position: fixed;
    top: 0;
    left: 0;
    z-index: -1;
}

/* Grid styling */

.box-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 3em;
    max-width: 960px;
    margin: 0 auto;
    padding: 100px;
}

.header {
    grid-column: span 2;
}

.kicker {
    grid-column: span 2;
    text-align: center;
}


.box {
    flex-wrap: wrap;
    display: flex;
    border: 10px solid #fff;
    padding: 0 30px;
    box-shadow: 0px 0px #fff, 1px 1px #fff, 2px 2px #fff, 3px 3px #fff, 4px 4px #fff, 5px 5px #fff, 6px 6px #fff, 7px 7px #fff, 8px 8px #fff, 9px 9px #fff, 10px 10px #fff, 11px 11px #fff, 12px 12px #fff, 13px 13px #fff, 14px 14px #fff, 15px 15px #fff, 16px 16px #fff, 17px 17px #fff, 18px 18px #fff, 19px 19px #fff, 20px 20px #fff, 21px 21px #fff, 22px 22px #fff, 23px 23px #fff, 24px 24px #fff, 25px 25px #fff, 26px 26px #fff, 27px 27px #fff, 28px 28px #fff, 29px 29px #fff, 30px 30px #fff;
}


/* Media Queries */

@media all and (max-width: 1296px) {


    p, li {
        font-size: 1em;
        line-height: 1.25em;
    }

    h1 {
        font-size: 2.5em;
        line-height: 1.25em;
    }
}


@media all and (max-width:756px) {
    .box-wrapper {
        padding: 5px;
        grid-gap: 1em;
    }
    .box {
        box-shadow: none;
        margin: 0 0 5px 0;
    }

    .project {
     grid-column: span 2;
    }
    h1 {
        font-size: 2em;
    }
}