/* 
#D705F2
#0511F2
#040DBF
#056CF2
#0583F2
*/

* {
    box-sizing: border-box;
}

body,
html {
    height: 100%;
    width: 100%;
    margin: 0;
    scroll-behavior: smooth;
}

.paralax {
    background: linear-gradient(
            100deg,
            rgb(255, 255, 255) 10%,
            rgb(0, 6, 47) 100%
        ),
        linear-gradient(120deg, rgb(255, 65, 65) 30%, rgb(0, 28, 100) 110%),
        radial-gradient(
            100% 220% at 100% 0%,
            rgb(128, 0, 255) 0%,
            rgb(255, 255, 255) 30%,
            rgb(0, 160, 255) 100%
        ),
        linear-gradient(60deg, rgb(34, 0, 242) 0%, rgb(83, 0, 0) 100%),
        linear-gradient(190deg, rgb(185, 0, 255) 0%, rgb(0, 136, 123) 90%),
        linear-gradient(180deg, rgb(252, 0, 0) 0%, rgba(0, 50, 255, 1) 75%),
        linear-gradient(220deg, rgba(255, 0, 250, 1) 0%, rgb(255, 223, 0) 70%),
        radial-gradient(
            80% 110% at 50% 0%,
            rgb(2, 1, 1) 0%,
            rgb(0, 52, 187) 100%
        );
    background-blend-mode: overlay, overlay, color-burn, screen, color-burn,
        difference, color-dodge, normal;
    height: 100%;
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

body {
    padding: 0;
}

main {
    padding: 0;
    margin: 0;
}

#projects {
    margin: 0;
}

#projects img {
    width: 100%;
    max-width: 800px;
}

header {
    padding: 0;
    margin: 20% auto;
    width: 90%;
}

header h1 {
    font-family: 'Bebas Neue', cursive;
    font-size: 600%;
    /* text-align: center; */
    width: 100%;
}

h2 {
    font-family: 'Inter', sans-serif;
    font-weight: 800;
    font-size: 400%;
    width: 100%;
}

/* header h2 {
    text-align: center;
    margin: 0;
} */

h3 {
    margin: 0;
}

p,
h1,
h2,
h3,
a {
    font-family: 'Inter', sans-serif;
    color: #fff;
}

a {
    text-decoration: none;
    padding: 1%;
    width: 100%;
    margin: 1% auto;
    /* transition-duration: 0.5s; */
    transition: 0.5s ease;
}

#links ul {
    display: flex;
    list-style-type: none;
    /* margin: auto; */
    padding: 2%;
    width: 100%;
}

#links {
    width: 100%;
}

#links li {
    width: 100%;
    /* padding: 2%; */
    border-width: 4px transparent;
    font-family: 'Inter', sans-serif;
    font-size: 100%;
    color: #fff;
    margin: 1% auto;
    text-align: center;
}

#links a {
    width: 100%;
    padding: 2% 15%;
    margin: 2% auto;
    transition: 0.3s ease-in-out;
    border-width: 4px;
    border-style: solid;
    border-image: linear-gradient(
            144deg,
            rgba(214, 5, 242, 0) 0%,
            rgba(5, 131, 242, 0) 74%,
            rgba(5, 108, 242, 0) 100%
        )
        1;
}

#links a:hover {
    width: 100%;
    padding: 2% 15%;
    margin: 2% auto;
    border-width: 4px;
    border-style: solid;
    border-image: linear-gradient(
            144deg,
            rgba(215, 5, 242, 1) 0%,
            rgba(5, 131, 242, 1) 74%,
            rgba(5, 108, 242, 1) 100%
        )
        1;
    background: rgba(5, 17, 242, 0.255);
    /* -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px); */
}

#email a {
    margin: 1% auto;
    padding: 0.5rem;
    transition: all 0.5s ease;
    border-width: 4px 0px 4px 0px;
    border-style: solid;
    border-image: linear-gradient(
            144deg,
            rgba(214, 5, 242, 0) 0%,
            rgba(5, 131, 242, 0) 74%,
            rgba(5, 108, 242, 0) 100%
        )
        1;
}

#email a:hover {
    border-width: 4px;
    border-style: solid;
    border-image: linear-gradient(
            144deg,
            rgba(215, 5, 242, 1) 0%,
            rgba(5, 131, 242, 1) 74%,
            rgba(5, 108, 242, 1) 100%
        )
        1;
    background: rgba(5, 17, 242, 0.255);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}

#about {
    padding: 2%;
    width: 100%;
    margin: auto;
}

#about p {
    font-size: 20px;
    line-height: 2;
    width: 55%;
    margin-right: 1%;
}

.heading {
    width: 100%;
    padding: 1rem;
    border-bottom: 1px solid #fff;
    margin: 0;
}

.container {
    position: relative;
    width: 80%;
}

.pane {
    width: 100%;
    height: auto;
    padding: 1rem;
    background-color: rgba(255, 255, 255, 0.198);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    /* border-top: 1px solid #fff;
    border-bottom: 1px solid #fff; */
    box-shadow: 0px 10px 10px -5px #03011882;
}

.card {
    width: 90%;
    height: auto;
    margin: 2% auto;
    padding: 1rem;
    /* border-radius: 0.5rem; */
    /* background-color: rgba(255, 255, 255, 0.353); */
    /* background-color: #0301187d; */
    background: rgba(5, 17, 242, 0.255);
    background: linear-gradient(
        41deg,
        rgba(5, 17, 242, 0.64) 0%,
        rgba(214, 5, 242, 0.496) 64%,
        rgba(5, 108, 242, 0.501) 100%
    );
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border: 1px solid #fff;
    box-shadow: 0px 10px 10px -5px #03011882;
    border-radius: 0.3rem;
}

.gradient-border {
    border-width: 3px;
    border-style: solid;
    border-image: linear-gradient(
            144deg,
            rgba(215, 5, 242, 1) 0%,
            rgba(5, 131, 242, 1) 74%,
            rgba(5, 108, 242, 1) 100%
        )
        1;
}

.gradient-top {
    border-width: 3px 0px 0px 0px;
    border-style: solid;
    border-image: linear-gradient(
            144deg,
            rgba(215, 5, 242, 1) 0%,
            rgba(5, 131, 242, 1) 74%,
            rgba(5, 108, 242, 1) 100%
        )
        1;
}

.gradient-bottom {
    border-width: 0px 0px 3px 0px;
    border-style: solid;
    border-image: linear-gradient(
            144deg,
            rgba(215, 5, 242, 1) 0%,
            rgba(5, 131, 242, 1) 74%,
            rgba(5, 108, 242, 1) 100%
        )
        1;
}

.gradient-top-bottom {
    border-width: 3px 0px 3px 0px;
    border-style: solid;
    border-image: linear-gradient(
            144deg,
            rgba(215, 5, 242, 1) 0%,
            rgba(5, 131, 242, 1) 74%,
            rgba(5, 108, 242, 1) 100%
        )
        1;
}

.image {
    opacity: 0.3;
    display: block;
    width: 100%;
    height: auto;
    margin: 2rem auto;
    transition: 0.5s ease;
    backface-visibility: hidden;
    box-shadow: 1rem #030118;
    border-radius: 0.3rem;
}

.middle {
    transition: 0.5s ease;
    opacity: 0.75;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 70%;
    height: auto;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    /* padding: 2rem; */
}

.middle p {
    margin: 5% auto;
}

.container:hover .image {
    opacity: 1;
    background-color: rgba(255, 255, 255, 0.088);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
}

.container:hover .middle {
    opacity: 1;
}

figure {
    width: 100%;
    margin: 3% auto;
}

figcaption {
    text-align: center;
    /* width: 60%; */
    height: auto;
    font-size: 2rem;
}

figcaption p,
h3,
a {
    /* padding: 0.5rem; */
    /* color: #000; */
    color: #fff;
    margin: 0;
    text-align: center;
}

#headshot {
    margin: auto;
    width: 25%;
    height: auto;
    float: right;
}

.clear {
    clear: both;
}

#email {
    padding: 1%;
    margin: 1% auto;
    text-align: center;
}

#email p {
    margin: 1% auto;
}

footer {
    margin: 1%;
    font-size: 0.75rem;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande',
        'Lucida Sans', Arial, sans-serif;
    color: #fff;
    text-align: center;
}

@media screen and (max-width: 400px) {
    figcaption {
        text-align: center;
        width: 90%;
        height: auto;
        font-size: 1rem;
    }

    header h1 {
        font-family: 'Bebas Neue', cursive;
        font-size: 400%;
        /* text-align: center; */
        width: 100%;
    }

    header h2 {
        font-family: 'Inter', sans-serif;
        font-weight: 800;
        font-size: 200%;
        width: 100%;
    }

    /* a:hover {
        transition: 0.5s ease;
        color: #030118;
        -webkit-backdrop-filter: blur(8px);
        backdrop-filter: blur(8px);
        border-radius: 1rem;
        box-shadow: 2rem #030118;
    } */
}

@media screen and (max-width: 600px) {
    figcaption {
        text-align: center;
        width: 90%;
        height: auto;
        font-size: 0.9rem;
    }

    header h1 {
        font-family: 'Bebas Neue', cursive;
        font-size: 400%;
        /* text-align: center; */
        width: 100%;
    }

    h2 {
        font-family: 'Inter', sans-serif;
        font-weight: 800;
        font-size: 200%;
        width: 100%;
    }

    /* a:hover {
        transition: 0.5s ease;
        color: #030118;
        -webkit-backdrop-filter: blur(8px);
        backdrop-filter: blur(8px);
        border-radius: 1rem;
        box-shadow: 2rem #030118;
    } */
}