:root {
    /*--primary: #07113e;*/
    --primary: #192869;
    --primary: #101D58;
/*    --primary: #0c1641;*/
}


html {
    font-size: 100%;
}

body {
    margin: 0px;
    /* Hide scrollbar for IE, Edge and Firefox */
    -ms-overflow-style: none; /* IE and Edge */
    scrollbar-width: none; /* Firefox */
    font-family: 'Raleway', sans-serif;
    font-family: "source-sans-pro",helvetica;
    font-family: 'Lora', serif;
    line-height: 23px;
}

    /* Hide scrollbar for Chrome, Safari and Opera */
    body::-webkit-scrollbar {
        display: none;
    }

p {
    text-align: left;
}

h3 {
    font-size: 25px;
}

a:link {
    color: #101D58;
    text-decoration: none;
}

a:visited {
    color: #3399ff;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

a:active {
    text-decoration: underline;
}

.link {
    text-align: center;
}



#skill-summary-text {
    margin-left: 10px;
    margin-right: 10px;
}

.center-text {
    text-align: center;
}




#top-content {
    width: 100%;
    height: 105vw;
    background-color: black;
    position: relative;
}

#moon {
    position: absolute;
    top: 0rem;
    height: 103vw;
    width: 100%;
}

img.sticky {
    display: block;
    position: sticky;
    position: -webkit-sticky;
    top: 5vw;
    transform: scale(.4);
    width: 23vw;
    height: auto;
    z-index: 100;
    filter: brightness(100%);
    padding: 0px;
    border-radius: 100%;
    box-shadow: 0 0 1000px -50px #ddd;
    margin: auto auto auto auto;
}

    img.sticky:hover {
        box-shadow: 0 0 500px -10px #ddd;
/*        content: url('../images/the-moon4.png');*/
    }



#canvas-container {
    position: relative;
    top: 0rem;
    width: 100%;
    height: 99%;
}

#canvas {
    z-index: 1;
    position: relative;
    width: 100%;
    top: 0;
    left: 0;
    height: 100%;
    /*background: #0c1445;*/
    background: #07113e;
    display: block;
    touch-action: none;
    /*LIGHT*/
    /*background: hsla(229, 58%, 30%, 1);
    background: linear-gradient(90deg, hsla(229, 58%, 30%, 1) 0%, hsla(229, 80%, 14%, 1) 99%);
    background: -moz-linear-gradient(90deg, hsla(229, 58%, 30%, 1) 0%, hsla(229, 80%, 14%, 1) 99%);
    background: -webkit-linear-gradient(90deg, hsla(229, 58%, 30%, 1) 0%, hsla(229, 80%, 14%, 1) 99%);
    filter: progid: DXImageTransform.Microsoft.gradient( startColorstr="#203078", endColorstr="#07113E", GradientType=1 );*/
    /*DARK*/
    /*background: hsla(229, 62%, 25%, 1);
    background: linear-gradient(90deg, hsla(229, 62%, 25%, 1) 0%, hsla(229, 84%, 10%, 1) 100%);
    background: -moz-linear-gradient(90deg, hsla(229, 62%, 25%, 1) 0%, hsla(229, 84%, 10%, 1) 100%);
    background: -webkit-linear-gradient(90deg, hsla(229, 62%, 25%, 1) 0%, hsla(229, 84%, 10%, 1) 100%);
    filter: progid: DXImageTransform.Microsoft.gradient( startColorstr="#192869", endColorstr="#040C2F", GradientType=1 );*/
    /*SUBTLE DARK*/
    /*background: hsla(229, 66%, 21%, 1);
    background: linear-gradient(90deg, hsla(229, 66%, 21%, 1) 0%, hsla(229, 84%, 10%, 1) 100%);
    background: -moz-linear-gradient(90deg, hsla(229, 66%, 21%, 1) 0%, hsla(229, 84%, 10%, 1) 100%);
    background: -webkit-linear-gradient(90deg, hsla(229, 66%, 21%, 1) 0%, hsla(229, 84%, 10%, 1) 100%);
    filter: progid: DXImageTransform.Microsoft.gradient( startColorstr="#121F58", endColorstr="#040C2F", GradientType=1 );*/
    /*SUBTLER DARK*/
    background: hsla(229, 75%, 15%, 1);
    background: linear-gradient(90deg, hsla(229, 75%, 15%, 1) 0%, hsla(229, 84%, 10%, 1) 100%);
    background: -moz-linear-gradient(90deg, hsla(229, 75%, 15%, 1) 0%, hsla(229, 84%, 10%, 1) 100%);
    background: -webkit-linear-gradient(90deg, hsla(229, 75%, 15%, 1) 0%, hsla(229, 84%, 10%, 1) 100%);
    filter: progid: DXImageTransform.Microsoft.gradient( startColorstr="#0A1545", endColorstr="#040C2F", GradientType=1 );
    /*DARKER*/
    /*    background: hsla(229, 69%, 20%, 1);
    background: linear-gradient(90deg, hsla(229, 69%, 20%, 1) 0%, hsla(228, 93%, 5%, 1) 100%);
    background: -moz-linear-gradient(90deg, hsla(229, 69%, 20%, 1) 0%, hsla(228, 93%, 5%, 1) 100%);
    background: -webkit-linear-gradient(90deg, hsla(229, 69%, 20%, 1) 0%, hsla(228, 93%, 5%, 1) 100%);
    filter: progid: DXImageTransform.Microsoft.gradient( startColorstr="#101D58", endColorstr="#01061B", GradientType=1 );*/

    background: hsla(229, 84%, 10%, 1);
    background: linear-gradient(270deg, hsla(229, 84%, 10%, 1) 0%, hsla(229, 57%, 24%, 1) 68%, hsla(230, 64%, 25%, 1) 100%);
    background: -moz-linear-gradient(270deg, hsla(229, 84%, 10%, 1) 0%, hsla(229, 57%, 24%, 1) 68%, hsla(230, 64%, 25%, 1) 100%);
    background: -webkit-linear-gradient(270deg, hsla(229, 84%, 10%, 1) 0%, hsla(229, 57%, 24%, 1) 68%, hsla(230, 64%, 25%, 1) 100%);
    filter: progid: DXImageTransform.Microsoft.gradient( startColorstr="#040C2F", endColorstr="#1A2760", GradientType=1 );
}

.trees-container {
    z-index: 10;
    position: absolute;
    bottom: 0px;
    bottom: -5px;
    width: 100%;
}

img.trees {
    z-index: 10;
    width: 100%;
    /*transform: scaleX(1.001);*/
}


#middle-content {
    background-color: black;
    width: 100%;
/*    height: 11rem;*/
    /*background: linear-gradient(0deg, rgba(70,70,70,1) 0%, rgba(20,20,20,1) 77%, rgba(0,0,0,1) 100%);*/
}

#bottom-content {
    /*background: hsla(229, 54%, 39%, 1);
    background: radial-gradient(circle, hsla(229, 54%, 39%, 1) 0%, hsla(229, 69%, 20%, 1) 100%, hsla(230, 66%, 22%, 1) 100%);
    background: -moz-radial-gradient(circle, hsla(229, 54%, 39%, 1) 0%, hsla(229, 69%, 20%, 1) 100%, hsla(230, 66%, 22%, 1) 100%);
    background: -webkit-radial-gradient(circle, hsla(229, 54%, 39%, 1) 0%, hsla(229, 69%, 20%, 1) 100%, hsla(230, 66%, 22%, 1) 100%);
    filter: progid: DXImageTransform.Microsoft.gradient( startColorstr="#2E429A", endColorstr="#101D58", GradientType=1 );*/


    width: 100%;
/*    height: 74rem;*/
}

.bottom-container {
    display: flex;
    width: 100%;
    /*padding-left: 20vw;*/
}



#footer {
    /*background-color: #262626;*/
    width: 100%;
    /*    height: 60rem;*/
    padding-top: 5vw;
    /*background: hsla(0, 0%, 27%, 1);
    background: radial-gradient(circle, hsla(0, 0%, 27%, 1) 0%, hsla(0, 0%, 4%, 1) 100%);
    background: -moz-radial-gradient(circle, hsla(0, 0%, 27%, 1) 0%, hsla(0, 0%, 4%, 1) 100%);
    background: -webkit-radial-gradient(circle, hsla(0, 0%, 27%, 1) 0%, hsla(0, 0%, 4%, 1) 100%);
    filter: progid: DXImageTransform.Microsoft.gradient( startColorstr="#454545", endColorstr="#0A0A0A", GradientType=1 );*/
    padding-bottom: 5em;
}

#project-header {
    color: white;
    margin-bottom: 3rem;
    text-align: center;
}

#projects-container {
    /*height: 35vw;*/
    height: 45em;
    width: 80%;
    margin: auto;
    background: transparent;
    /*box-shadow: inset 0px 0px 80px 20px rgba(0,0,0,0.85);*/
    /*    display: flex;*/
}

.project-image {
    width: 50%;
    margin: auto;
}

    .project-image img {
        width: 90%;
        height: auto;
        display: block;
/*        margin-left: auto;
        margin-right: auto;
        margin-right: 100%;
        margin-top: 8%;
        margin-bottom: 50%;*/
        border: 1px solid gray;
        border-radius: 10px;
    }

.internal-image {
}

    .internal-image img {
        width: 100%;
        height: auto;
        display: block;
        margin-left: auto;
        margin-right: auto;
        margin-right: 100%;
        margin-top: 8%;
        margin-bottom: 50%;
        border: 1px solid gray;
        border-radius: 10px;
        display: none;
    }



.project-text-container {
    margin: auto;
    width: 50%;
}

.project-text {
    /*    width: 50%;*/
    font-size: 14px;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    /*height: 30em;*/
    width: 30em;
    padding: 2em;
    padding-top: 0.5em;
    background: white;
    border-radius: 2%;
    box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
}


.project-message-container {
    /*font-size: 14px;*/
    border: 1px solid gray;
    border-radius: 5%;
    background: #f4f4f4;
    padding: 1em;
}

#skill-image {
    /*border: 1px solid gray;*/
    /* box-shadow: rgb(0 0 0 / 19%) 0px 10px 20px, rgb(0 0 0 / 23%) 0px 10px 20px; */
    /*border-radius: 50%;*/
    transform: scale(.8);
    margin: auto;
}

#myForm {
    z-index: 9900000;
    background: black;
    background: hsla(0, 0%, 27%, 1);
    background: radial-gradient(circle, hsla(0, 0%, 27%, 1) 0%, hsla(0, 0%, 4%, 1) 100%);
    background: -moz-radial-gradient(circle, hsla(0, 0%, 27%, 1) 0%, hsla(0, 0%, 4%, 1) 100%);
    background: -webkit-radial-gradient(circle, hsla(0, 0%, 27%, 1) 0%, hsla(0, 0%, 4%, 1) 100%);
    filter: progid: DXImageTransform.Microsoft.gradient( startColorstr="#454545", endColorstr="#0A0A0A", GradientType=1 );
    border-radius: 10px;
    border: white;
    color: white;
    /* z-index: 8; */
    display: block;
    position: relative;
    /* bottom: 50%; */
    /* right: 20%; */
    width: 489px;
    height: 290px;
    margin: auto;
    text-align: center;
}

#myForm button {
    margin: 8px;
}

#myForm h4 {
    padding: 5px;
}

    #myForm label {
        width: 50%;
        /* padding: 10px; */
        margin: 10px;
    }

    #myForm input {
        width: 50%;
        margin: 10px;
    }

.form-entry {
    display: flex;
}

#ground {
/*    padding: 10px;*/
    background-color: var(--primary);
    width: 100%;
/*    height: 30rem;*/
    background: hsla(229, 54%, 39%, 1);
    background: radial-gradient(circle, hsla(229, 54%, 39%, 1) 0%, hsla(229, 69%, 20%, 1) 100%, hsla(230, 66%, 22%, 1) 100%);
    background: -moz-radial-gradient(circle, hsla(229, 54%, 39%, 1) 0%, hsla(229, 69%, 20%, 1) 100%, hsla(230, 66%, 22%, 1) 100%);
    background: -webkit-radial-gradient(circle, hsla(229, 54%, 39%, 1) 0%, hsla(229, 69%, 20%, 1) 100%, hsla(230, 66%, 22%, 1) 100%);
    filter: progid: DXImageTransform.Microsoft.gradient( startColorstr="#2E429A", endColorstr="#101D58", GradientType=1 );
}

.end {
    position: absolute;
    width: 100%;
    top: 85vw;
}

h1 {
    margin: 0px;
    font-size: 5rem;
}

h2 {
    margin: 0px;
    font-size: 3rem;
}


.name-container {
    color: white;
    text-align: center;
    line-height: 75px;
    padding-top: 5em;
}

.custom-shape-divider-bottom-1658863878 {
    transform: rotate(180deg);
    background-color: black;
}

.custom-shape-divider-bottom-1658863878 .shape-fill {
    fill: var(--primary);
}

.custom-shape-divider-bottom-1658863878 svg {
    position: relative;
    display: block;
    width: calc(100% + 1.3px);
    height: 100px;
    margin-top: -100px;
    filter: drop-shadow(3px 5px 2px rgb(0 0 0 / 0.4));
}




.custom-shape-divider-top-1658883248 {
    background-color: black;
}

.custom-shape-divider-top-1658883248 .shape-fill {
    fill: var(--primary);
}

.custom-shape-divider-top-1658883248 svg {
    position: relative;
    display: block;
    width: calc(100% + 1.3px);
    height: 100px;
    margin-top: 50rem;
}

/*.custom-shape-divider-bottom-1658863878 {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    overflow: hidden;
    line-height: 0;
    transform: rotate(180deg);
}

    .custom-shape-divider-bottom-1658863878 svg {
        position: relative;
        display: block;
        width: calc(100% + 1.3px);
        height: 100px;
    }

    .custom-shape-divider-bottom-1658863878 .shape-fill {
        fill: #FFFFFF;
    }*/


.myButton {
    /*    margin-top: 2rem;*/
    /*    margin: auto;
    padding: 0.4rem;
    background: blue;
    color: white;
    border: none;
    border-radius: 5%;
    background: hsla(229, 54%, 39%, 1);
    background: radial-gradient(circle, hsla(229, 54%, 39%, 1) 0%, hsla(229, 69%, 20%, 1) 100%, hsla(230, 66%, 22%, 1) 100%);
    background: -moz-radial-gradient(circle, hsla(229, 54%, 39%, 1) 0%, hsla(229, 69%, 20%, 1) 100%, hsla(230, 66%, 22%, 1) 100%);
    background: -webkit-radial-gradient(circle, hsla(229, 54%, 39%, 1) 0%, hsla(229, 69%, 20%, 1) 100%, hsla(230, 66%, 22%, 1) 100%);
    filter: progid: DXImageTransform.Microsoft.gradient( startColorstr="#2E429A", endColorstr="#101D58", GradientType=1 );*/
    /*background-color: #101D58;*/ /* Bright blue to match the site theme */
    background: -webkit-radial-gradient(circle, hsla(229, 54%, 39%, 1) 0%, hsla(229, 69%, 20%, 1) 100%, hsla(230, 66%, 22%, 1) 100%);
    border: none;
    border-radius: 25px; /* Rounded corners for a modern look */
    color: white;
    padding: 12px 30px;
    font-size: 18px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease;
    font-family: 'Lora', serif;
}


.custom-shape-divider-top-1660160075 {
    margin: auto;
    margin-top: -2px;
}
/* CSS */
/*.button-29 {
    align-items: center;
    appearance: none;
    background-image: radial-gradient(100% 100% at 100% 0, #5adaff 0, #5468ff 100%);
    border: 0;
    border-radius: 6px;
    box-shadow: rgba(45, 35, 66, .4) 0 2px 4px,rgba(45, 35, 66, .3) 0 7px 13px -3px,rgba(58, 65, 111, .5) 0 -3px 0 inset;
    box-sizing: border-box;
    color: #fff;
    cursor: pointer;
    display: inline-flex;
    font-family: "JetBrains Mono",monospace;
    height: 48px;
    justify-content: center;
    line-height: 1;
    list-style: none;
    overflow: hidden;
    padding-left: 16px;
    padding-right: 16px;
    position: relative;
    text-align: left;
    text-decoration: none;
    transition: box-shadow .15s,transform .15s;
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
    white-space: nowrap;
    will-change: box-shadow,transform;
    font-size: 18px;
    margin: 30px;
}

.button-29:focus {
    box-shadow: #3c4fe0 0 0 0 1.5px inset, rgba(45, 35, 66, .4) 0 2px 4px, rgba(45, 35, 66, .3) 0 7px 13px -3px, #3c4fe0 0 -3px 0 inset;
}

.button-29:hover {
    box-shadow: rgba(45, 35, 66, .4) 0 4px 8px, rgba(45, 35, 66, .3) 0 7px 13px -3px, #3c4fe0 0 -3px 0 inset;
    transform: translateY(-2px);
}

.button-29:active {
    box-shadow: #3c4fe0 0 3px 7px inset;
    transform: translateY(2px);
}*/
.field img {
    width: 4vw;
    height: 4vw;
    pointer-events: none
}

.field-lg img {
    width: 8vw;
    height: 8vw;
}


#container {
    width: 600px;
    height: 600px;
    /* border: 1px solid #000; */
    position: relative;
    /* margin: auto; */
    margin-left: 35%;
    margin-right: 50%;
    margin-top: 3%;
}


#center {
    width: 300px;
    height: 300px;
    position: absolute;
    left: 151px;
    top: 114px;
    background: none;
    display: block;
    color: white;
    text-align: center;
}

.field {
    /* width: 100px;
    height: 100px;*/
    position: absolute;
    background: white;
    border-radius: 50%;
   /* transform: scale(.7);*/
    /*background: #f00;*/
    filter: grayscale(1);
}

    .field:hover {
        filter: grayscale(0);
    }



.field-lg {
    /*width: 200px;
    height: 200px;*/
    /*padding: 50px;*/
    /*transform: scale(1.7);*/
}

#crosshair-x {
    width: 600px;
    height: 1px;
    background: #000;
    position: absolute;
    left: 0;
    top: 300px;
    display: none;
}

#crosshair-y {
    width: 1px;
    height: 600px;
    background: #000;
    position: absolute;
    left: 300px;
    top: 0;
    display: none;
}

/** {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}*/


.gallery {
    background: #EEE;
}

.gallery-cell {
    width: 100%;
    height: 100%;
    display: flex;
    /*margin-right: 10px;*/
    /*counter-increment: gallery-cell;*/
}

    /* cell number */
    .gallery-cell:before {
        display: block;
        text-align: center;
        /*content: counter(gallery-cell);*/
        line-height: 200px;
        font-size: 80px;
        color: white;
    }



/*SKILLS START*/


@keyframes rotateClockwise {
    100% {
        transform: rotate(360deg);
    }
}

@keyframes rotateClockwise2 {
    0% {
        transform: rotate(30deg);
    }
    100% {
        transform: rotate(390deg);
    }
}

@keyframes rotateClockwise3 {
    0% {
        transform: rotate(60deg);
    }
    100% {
        transform: rotate(420deg);
    }
}

@keyframes rotateClockwise4 {
    0% {
        transform: rotate(90deg);
    }
    100% {
        transform: rotate(450deg);
    }
}

@keyframes rotateClockwise5 {
    0% {
        transform: rotate(120deg);
    }
    100% {
        transform: rotate(480deg);
    }
}

@keyframes rotateClockwise6 {
    0% {
        transform: rotate(150deg);
    }
    100% {
        transform: rotate(510deg);
    }
}

@keyframes rotateCounterClockwise {
    100% {
        transform: rotate(-360deg);
    }
}

@keyframes rotateCounterClockwise2 {
    100% {
        transform: rotate(-390deg);
    }
}

@keyframes rotateCounterClockwise3 {
    100% {
        transform: rotate(-420deg);
    }
}

@keyframes rotateCounterClockwise4 {
    100% {
        transform: rotate(-450deg);
    }
}

@keyframes rotateCounterClockwise5 {
    100% {
        transform: rotate(-480deg);
    }
}

@keyframes rotateCounterClockwise6 {
    100% {
        transform: rotate(-510deg);
    }
}

.content {
    background: hsla(229, 54%, 39%, 1);
    background: radial-gradient(circle, hsla(229, 54%, 39%, 1) 0%, hsla(229, 69%, 20%, 1) 100%, hsla(230, 66%, 22%, 1) 100%);
    background: -moz-radial-gradient(circle, hsla(229, 54%, 39%, 1) 0%, hsla(229, 69%, 20%, 1) 100%, hsla(230, 66%, 22%, 1) 100%);
    background: -webkit-radial-gradient(circle, hsla(229, 54%, 39%, 1) 0%, hsla(229, 69%, 20%, 1) 100%, hsla(230, 66%, 22%, 1) 100%);
    filter: progid: DXImageTransform.Microsoft.gradient( startColorstr="#2E429A", endColorstr="#101D58", GradientType=1 );
}

#skills-header {
    margin: auto;
    padding-top: 1.2em;
    text-align: center;
    color: white;
    margin-bottom: 2em;
}

.skill-header-container {
    display: flex;
}

.skill-header-right {
    margin: auto;
}

.skill-header-container img {
    width: 10em;
    height: 10em;
}

.skill-message-content {
    background: #f4f4f4;
    border: 1px solid gray;
    border-radius: 5%;
}

.skill-message-container-container {
    width: 50%;
    position: relative;
    right: 7vw;
    /*padding-right: 27vw;*/
}

#skill-message-container {
    background-color: white;
    background-color: white;
    position: relative;
    /*    height: 30em;
    width: 30em;*/
    /*    left: 70em;*/
    padding: 3em;
    border-radius: 2%;
    box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
    /*box-shadow: rgb(0 0 0 / 17%) 0px -23px 25px 0px inset, rgb(0 0 0 / 15%) 0px -36px 30px 0px inset, rgb(0 0 0 / 10%) 0px -79px 40px 0px inset, rgb(0 0 0 / 6%) 0px 2px 1px, rgb(0 0 0 / 9%) 0px 4px 2px, rgb(0 0 0 / 9%) 0px 8px 4px, rgb(0 0 0 / 9%) 0px 16px 8px, rgb(0 0 0 / 9%) 0px 32px 16px;*/
    margin: auto;
    /*margin-top: 2em;*/
    margin-left: 15em;
    margin-right: 15em;
    font-size: 14px;
    padding-top: 0em;
    width: 30em;
    /*    margin-right: 15vw;*/
}

#skill-message-header {
    margin: 0px;
}

#skill-message-proficiency {
    margin: 0px;
/*    margin-top: 5px;*/
/*    margin-bottom: 50px;*/
}

#border-box {
    border: 5px solid red;
}

.ring {
    position: relative;
    /*    left: 50%;
    top: 50px;*/
    /*    margin-left: -190px;
    height: 400px;
    width: 400px;*/
    /*    border: 3px solid #666;*/
    border-radius: 50%;
    margin: auto;
    /* margin-top: 8.5em;
    margin-right: 50em;*/
    /*margin-bottom: 50%;*/
    margin-bottom: 50em;
    font-size: 14px;
    left: 6vw;
    z-index: 10;
    /*    margin-left: 30vw;*/
}

.dot {
    position: absolute;
    height: 45em;
    width: 4.5em;
    top: -2.5em;
    left: 50%;
    margin-left: -2em;
}

/*    &:before


{
    display: block;
    content: '';
    background: url('../images/js.png'), white;
    background-size: 50px 42px;
    background-repeat: no-repeat;
    background-position: center;
    height: 60px;
    width: 60px;
    border-radius: 50%;
    box-shadow: 0 2px 3px rgba(0,0,0,.1);
    z-index: 100;
}*/
/*&:hover:before {*/
/*box-shadow: 0px 0px 15px 2px #ddd;*/
/*}*/
.imageDiv {
    position: absolute;
    display: block;
    content: "";
    /*    background-size: 50px 42px;*/
    background-repeat: no-repeat;
    background-position: center;
    border-radius: 50%;
    box-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
    box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px;
    z-index: 10;
    filter: grayscale(1);
    /*    animation: rotateCounterClockwise 32s linear infinite;*/
}

    .imageDiv:hover {
        filter: grayscale(0);
    }

.imageDiv2 {
    position: absolute;
    bottom: 0;
    display: block;
    content: "";
    /*    background-size: 50px 42px;*/
    background-repeat: no-repeat;
    background-position: center;
    border-radius: 50%;
    box-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
    box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px;
    z-index: 10;
    filter: grayscale(1);
    /*animation: rotateCounterClockwise 32s linear infinite;*/
}

    .imageDiv2:hover {
        filter: grayscale(0);
    }

/*#imageDiv3 {
    position: absolute;
    left: 0;
    display: block;
    content: '';
    background: url('../images/sql.jpg'), white;
    background-size: 50px 42px;
    background-repeat: no-repeat;
    background-position: center;
    height: 60px;
    width: 60px;
    border-radius: 50%;
    box-shadow: 0 2px 3px rgba(0,0,0,.1);
    z-index: 10;
    animation: rotateCounterClockwise 64s linear infinite;
}

    #imageDiv3:hover {
        box-shadow: 0px 0px 15px 2px #ddd;
    }
*/
/*#imageDiv4 {
    position: absolute;
    right: 0;
    display: block;
    content: '';
    background: url('../images/GitHub.png'), white;
    background-size: 50px 42px;
    background-repeat: no-repeat;
    background-position: center;
    height: 60px;
    width: 60px;
    border-radius: 50%;
    box-shadow: 0 2px 3px rgba(0,0,0,.1);
    z-index: 10;
    animation: rotateCounterClockwise 64s linear infinite;
}

    #imageDiv4:hover {
        box-shadow: 0px 0px 15px 2px #ddd;
    }*/
/*.imgWrap {
    transform: scale(2.3);
}

.imgWrap2 {
    position: absolute;
    bottom: 0;
    display: block;
    transform: scale(2.3);
}*/
.img1 {
    height: 10em;
    width: 10em;
    background: url(../images/python-django.png), white;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 9.4em;
    animation: rotateCounterClockwise 64s linear infinite;
    margin-left: -2.5em;
    margin-top: -2.5em;
}

.img2 {
    height: 10em;
    width: 10em;
    background: url("../images/react.png"), white;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 6em;
    animation: rotateCounterClockwise 64s linear infinite;
    margin-left: -2.5em;
    margin-top: -2.5em;
    margin-bottom: -3em;
}

.img3 {
    height: 4.5em;
    width: 4.5em;
    transform: rotate(-90deg);
    background: url(../images/bootstrap.png), white;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 2.5em;
    animation: rotateCounterClockwise4 64s linear infinite;
}

.img4 {
    height: 4.5em;
    width: 4.5em;
    transform: rotate(-90deg);
    background: url("../images/devops.png"), white;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 7em;
    animation: rotateCounterClockwise4 64s linear infinite;
}

.img5 {
    height: 4.5em;
    width: 4.5em;
    transform: rotate(-30deg);
    background: url(../images/java.png), white;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 3.5em;
    animation: rotateCounterClockwise2 64s linear infinite;
}

.img6 {
    height: 4.5em;
    width: 4.5em;
    transform: rotate(-30deg);
    background: url("../images/myGithub2.png"), white;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 4em;
    animation: rotateCounterClockwise2 64s linear infinite;
}

.img7 {
    height: 10em;
    width: 10em;
    transform: rotate(-60deg);
    background: url(../images/sql.png), white;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 7em;
    animation: rotateCounterClockwise3 64s linear infinite;
    margin-left: -2.5em;
    margin-top: -2.5em;
}

.img8 {
    height: 10em;
    width: 10em;
    transform: rotate(-60deg);
    background: url("../images/CS_NET.png"), white;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 10em;
    animation: rotateCounterClockwise3 64s linear infinite;
    margin-left: -2.5em;
    margin-bottom: -2.5em;
}

.img9 {
    height: 10em;
    width: 10em;
    transform: rotate(-120deg);
    background: url("../images/js-css-html.png"), white;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 8.5em;
    animation: rotateCounterClockwise5 64s linear infinite;
    margin-left: -2.5em;
    margin-top: -2.5em;
}

.img10 {
    height: 10em;
    width: 10em;
    transform: rotate(-120deg);
    background: url("../images/azure.png"), white;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 10em;
    animation: rotateCounterClockwise5 64s linear infinite;
    margin-left: -2.5em;
    margin-top: -2.5em;
    margin-bottom: -3em;
}

.img11 {
    height: 4.5em;
    width: 4.5em;
    transform: rotate(-150deg);
    background: url("../images/typescript.png"), white;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 2.3em;
    animation: rotateCounterClockwise6 64s linear infinite;
}

.img12 {
    height: 4.5em;
    width: 4.5em;
    transform: rotate(-150deg);
    background: url("../images/android.png"), white;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 2.5em;
    animation: rotateCounterClockwise6 64s linear infinite;
}

.dot--one {
    -webkit-animation: rotateClockwise 64s linear infinite;
    animation: rotateClockwise 64s linear infinite;
    z-index: 5;
}

    .dot--one:before {
        animation: rotateCounterClockwise 64s linear infinite;
        /*    background: #e6a933;*/
    }

    .dot--one img {
        animation: rotateCounterClockwise 64s linear infinite;
    }

.dot--two {
    /* transform: rotate(90deg); */
    /*    top: 181px;
  left: -6px;
  width: 450px;
  height: 40px;*/
    z-index: 5;
    -webkit-animation: rotateClockwise4 64s linear infinite;
    animation: rotateClockwise4 64s linear infinite;
}

    .dot--two:before {
        background: #e63348;
    }

.dot--three {
    /* transform: rotate(30deg); */
    -webkit-animation: rotateClockwise2 64s linear infinite;
    animation: rotateClockwise2 64s linear infinite;
    /*    animation: rotateClockwise 8s linear infinite;*/
}

    .dot--three:before {
        background: #70b942;
    }

.dot--four {
    /* transform: rotate(60deg); */
    -webkit-animation: rotateClockwise3 64s linear infinite;
    animation: rotateClockwise3 64s linear infinite;
    /*    animation: rotateClockwise 8s linear infinite;*/
}

    .dot--four:before {
        background: #009ee3;
    }

.dot--five {
    /* transform: rotate(120deg); */
    -webkit-animation: rotateClockwise5 64s linear infinite;
    animation: rotateClockwise5 64s linear infinite;
    /*    animation: rotateClockwise 8s linear infinite;*/
}

.dot--six {
    /* transform: rotate(150deg); */
    -webkit-animation: rotateClockwise6 64s linear infinite;
    animation: rotateClockwise6 64s linear infinite;
    /*    animation: rotateClockwise 8s linear infinite;*/
}

.active-skill {
    filter: grayscale(0);
    box-shadow: 0px 0px 15px 2px #ddd;
}

/*ul {
    list-style: none;
}*/
/* Remove default bullets */

li::before {
    /*content: "\2600";*/ /* Unicode bullet symbol */
    color: black; /* Bullet color */
    /* Optional tweaks */
    font-weight: normal;
    padding-right: 5px;
}

@media (max-width: 1500px) {

    #project-header {
        margin-bottom: 0rem;
    }

    body {
        line-height: 20px;
    }

    .name-container {
        line-height: 60px;
    }

    #skill-message-container, .project-text {
        font-size: 12px;
    }

    h1 {
        font-size: 4rem;
    }

    h2 {
        font-size: 2rem;
    }

    h3 {
        font-size: 22px;
    }

    .ring {
        font-size: 12px;
    }
}

@media (max-width: 1300px) {

    body {
        line-height: 16px;
    }

    .name-container {
        line-height: 50px;
    }

    #skill-message-container, .project-text {
        font-size: 11px;
    }

    h3 {
        font-size: 20px;
    }

    .ring {
        font-size: 11px;
    }
}

@media (max-width: 1100px) {

    #project-header {
        margin-bottom: 3rem;
    }

    #skill-message-container, .project-text {
        font-size: 10px;
    }

    h3 {
        font-size: 15px;
    }

    .ring {
        font-size: 10px;
    }

    #projects-container {
        height: 25em;
    }
}

#footer-small {
    display: none;
    width: 100%;
    padding-top: 5vw;
    padding-bottom: 5em;
}

@media (max-width: 950px) {

    #footer {
        display: none;
    }

    #footer-small{
        display: block;
    }

    #skill-message-container {
/*        margin: auto;*/
    }

    h3 {
        font-size: 12px;
    }

    #skills-header {
        margin-bottom: 3em;
    }

    .skill-message-container-container {
        display: none;
    }



    /*#projects-container {*/
        /*height: 22em;*/
        /*height: 50em;
    }*/
/*
    .project-image {
        display: none;
    }
*/
/*    .project-text {
        font-size: 14px;
        height: 45em
    }*/

    .ring {
        font-size: 14px;
        /*margin-left: 30vw*/
        left: 0;
    }
/*
    .internal-image img {
        display: block;
        margin-bottom: 10%;
    }*/
}


@media (max-width: 768px) {
    body {
        font-size: 13px;
    }

    /*#projects-container {*/
        /* height: 22em; */
        /*height: 60em;
    }*/

    h1 {
        font-size: 3rem;
    }

    h2 {
        font-size: 2rem;
    }

    #skill-message-container {
/*        margin: auto;*/
    }

/*    .skill-message-container-container {
        display: none;
    }
*/
/*    .gallery-cell {
        display: block;
    }*/

    /*    .skill-message-container-container, #project-text {
        display: none;
    }*/

    .ring {
        font-size: 10px;
    }
}

@media (max-width: 575px) {
    .project-text {
        font-size: 8px;
        height: 60em;
    }

/*    .flickity-prev-next-button {
        display: none;
    }*/

    .ring {
        font-size: 8px;
    }

}

/*
@media (max-width: 450px) {
    #project-text {
        font-size: 8px;
        height: 60em;
    }


    .ring {
        font-size: 8px;
    }
}*/


@media (max-width: 450px) {
    .project-text {
        font-size: 8px;
        height: 60em;
    }


    .ring {
        font-size: 5px;
    }
}

@media (max-width: 400px) {
    .project-text {
        font-size: 8px;
        height: 60em;
    }


}

.flickity-page-dots {
bottom: 0px !important;
}

.flickity-viewport {
    height: 100% !important;
}

.flickity-page-dots li::before {
    display: none;
}

.project-container-small {
    padding-bottom: 3em;
}

#project-header-small {
    color: white;
    margin-bottom: 5rem;
    text-align: center;
}

.image-container-small {
    width: 100%;
    margin: auto;
}

.image-container-small img {
    width: 100%;
/*    border-radius: 10%;*/
}

.text-small {
    padding-top: 3em;
    width: 90%;
 /*   background: white;*/
/*    padding: 2em;*/
    margin: auto;
    /*border-radius: 8%;
    box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;*/
}

.text-small h3 {
    padding: 1em;
    text-align: center;
    color: white;
    font-size: 20px;
}

.text-content-small {
    line-height: 20px;
    color: white;
    width: 90%;
/*    background: #f4f4f4;*/
/*    border: 1px solid gray;*/
    border-radius: 5%;
    margin: auto;
}

.link {
    padding: 1em;
}