/* body */
body {
    background: #333333;
}

/* main nav */
body ul li .nav-link {
    color: #EBEBEB;
    font-family: "Nunito","sans-serif";
}

body ul {
    margin-top: 1.5%;
}

/* first letter nav */
.yellow {
    color: #FFEA00;
}

body ul li .nav-link:hover {
    color: #FFEA00;
}

body ul li {
    padding: 1%
}

#resume {
    border: solid #FFEA00;
}
/* end nav */

/* globe container */
.globecontainer {
    display: flex;
    justify-content: center;
    margin-top: -3%;
}

/* globe image */
.globe {
    border-radius: 50%;
    display: inline-block;
    overflow: hidden;
    box-shadow: 0 5px 15px 0px rgba(0,0,0,0.6);
    transform: translatey(0px);
    animation: float 6s ease-in-out infinite; 
}

@keyframes float {
    0% {
      box-shadow: 0 0px 0px 0px rgba(0,0,0,0.6);
      transform: translatey(0px);
    }
    50% {
      box-shadow: 0 0px 0px 0px rgba(0,0,0,0.2);
      transform: translatey(-20px);
    }
    100% {
      box-shadow: 0 0px 0px 0px rgba(0,0,0,0.6);
      transform: translatey(0px);
    }
}
/* end globe image */

/* welcome cont */
.welcome {
    font-family: "Nunito", "sans-serif";
    display: flex;
    align-items: flex-end;
    justify-content: center;
    color: #EBEBEB;
}

.welcome #socials {
    display: flex;
    justify-content: center;
    padding: 2%;
    margin-top: -2%;
}

.welcome #welcometextinfo {
    display: flex;
    justify-content: center;
    margin-top: 2%;
}

.welcome #socials #github, .welcome #socials #linkedin {
    margin: 0px 15px;
    color: #ffff;
    font-size: 2rem;
    margin-bottom: -2%;
}

.welcome #welcometext {
    color: #FFEA00;
    text-transform: uppercase;
    font-size: 2rem;
    display: flex;
    justify-content: center;
    margin-bottom: 2%;
}

.welcome .shortintro p {
    display: flex;
    justify-content: center;
    font-size: 1.5rem; 
    line-height: 1.5;
}

.welcome .shortintro .gettoknowcont {
    display: flex;
    justify-content: center;
    width: 100%;
    margin: 2% 0;
}

/* get to know me btn */
#gettoknow, #sendbtn {
    color: #04d9ff;
    border: solid #04d9ff;
    min-width: 16%;
    padding: 1%;
    font-size: 1.3rem;
}

/* btn hover */
#gettoknow:hover {
    animation: neonGlow 2s infinite alternate;
}

#sendbtn:hover {
    animation: neonGlow 2s infinite alternate;
}

@keyframes neonGlow {
    0% {
      box-shadow: 0 0 10px rgba(255,255,255,.8),
                   0 0 20px rgba(255,255,255,.8),
                   0 0 22px  rgba(255,255,255,.8),
                   0 0 40px  rgba(66,220,219,.8),
                   0 0 60px  rgba(66,220,219,.8),
                   0 0 80px  rgba(66,220,219,.5),
                   0 0 100px rgba(66,220,219,.5),
                   0 0 140px rgba(66,220,219,.5),
                   0 0 200px rgba(66,220,219,.5);
    }
    100% {
      box-shadow: 0 0 2px rgba(255,255,255,.8),
                   0 0 8px rgba(255,255,255,.8),
                   0 0 10px rgba(255,255,255,.8),
                   0 0 20px rgba(66,220,219,.8),
                   0 0 30px rgba(66,220,219,.8),
                   0 0 40px rgba(66,220,219,.8),
                   0 0 50px rgba(66,220,219,.5),
                   0 0 80px rgba(66,220,219,.5);
    }
}

/* btn active */
#gettoknow:active {
    animation: neonGlowActive 2s infinite alternate;
}

#sendbtn:active {
    animation: neonGlowActive 2s infinite alternate;
}

@keyframes neonGlowActive {
    0% {
      text-shadow: 0 0 10px rgba(255,255,255,.8),
                   0 0 20px rgba(255,255,255,.8),
                   0 0 22px  rgba(255,255,255,.8),
                   0 0 40px  rgba(66,220,219,.8),
                   0 0 60px  rgba(66,220,219,.8),
                   0 0 80px  rgba(66,220,219,.5),
                   0 0 100px rgba(66,220,219,.5),
                   0 0 140px rgba(66,220,219,.5),
                   0 0 200px rgba(66,220,219,.5);
    }
    100% {
      text-shadow: 0 0 2px rgba(255,255,255,.8),
                   0 0 8px rgba(255,255,255,.8),
                   0 0 10px rgba(255,255,255,.8),
                   0 0 20px rgba(66,220,219,.8),
                   0 0 30px rgba(66,220,219,.8),
                   0 0 40px rgba(66,220,219,.8),
                   0 0 50px rgba(66,220,219,.5),
                   0 0 80px rgba(66,220,219,.5);
    }
}
/* end welcome cont  */
  
  
/* ABOUT ME SECTION */
/* section titles */
#aboutme #aboutsection #abouttitle, #worktitle {
    display: flex;
    justify-content: flex-start;
    padding: 3%;
    font-family: "Nunito", "sans-serif";
    font-size: 2rem;
}

.bold {
    font-weight: 700;
}

#aboutme #aboutsection #aboutinfo {
    font-family: "Nunito", "sans-serif";
    text-align: left;
    line-height: 1.5;
    margin: 0% 2%;
    font-size: 1.1rem;
}

#aboutme #aboutsection #aboutinfo #skills ul {
    list-style-type: disc;
    margin: 0% 5%;
}

.bioimage img {
    -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
    filter: grayscale(100%);
    box-shadow: rgba(0, 0, 0, 0.09) 0px 2px 1px, rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px, rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px;
}

.bioimage img:hover {
    -webkit-filter: grayscale(10%); /* Safari 6.0 - 9.0 */
    filter: grayscale(10%);
}
/* divider */
#aboutme{
    box-shadow: 0 1em 1em -1em rgba(0, 0, 0, .25);
    margin-bottom: 10%;
    padding:0px 0px 100px 0px;
}

/* divider */
.welcome{
    padding:30px 0;
    margin:0 2%;
    box-shadow: 0 1em 1em -1em rgba(0, 0, 0, .25);
}

/* divider */
#work{
    box-shadow: 0 1em 1em -1em rgba(0, 0, 0, .25);
    margin-bottom: 10%;
    padding:0px 0px 100px 0px;
}

/* gallery pictures */

.gallery {
    max-width: 600px;
    height: 400px;
    box-shadow: 0 0 5px grey;
    margin: 20px;
    padding: 5%;
    -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
    filter: grayscale(100%);
}
  
  
  
/* reveal gallerye picture on hover */
  
.gallery:hover {
    -webkit-filter: grayscale(10%); /* Safari 6.0 - 9.0 */
    filter: grayscale(10%);
    transform: scale(1.2)
}
  
  
/* hide gallerye name on hover */
  
  
#tradr {
    background-image: url(../images/tradr.png);
    background-size: cover;
    background-position: center;
}

.allcards {
    display: flex;
    align-items:center;
    margin: 2% 0%;
}
  
  
#moviemadness {
    background-image: url(../images/MovieMadness.png);
    background-size: cover;
    background-position: center;
}

  
#teambuilder {
    background-image: url(../images/TeamWebpage.png);
    background-size: cover;
    background-position: center;
}
  
  
#letsquiz {
    background-image: url(../images/Letsquiz.png);
    background-size: cover;
    background-position: center;
}
  

#truweather {
    background-image: url(../images/TRUweather.png);
    background-size: cover;
    background-position: center;
}

.cardtxt {
    font-family: "Nunito", "sans-serif";
    line-height: 1.5;
}
  
.cardtxt h5 {
    font-weight: 800;
    font-size: 1.4rem;
    margin-bottom: 3%;
    text-align: center;
}

.cardtxt p{
    text-align: start;
    padding: 0% 2%;
    font-weight: 500;
}

.cardlink {
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
    margin: 0% 3% 2% 0%;
}

.cardlink a {
    color: inherit;
}

/* The flip card container - set the width and height to whatever you want. We have added the border property to demonstrate that the flip itself goes out of the box on hover (remove perspective if you don't want the 3D effect */
.flip-card {
    background-color: transparent;
    min-width: 500px;
    height: 300px;
    margin: auto;
    perspective: 1000px; /* Remove this if you don't want the 3D effect */
}
  
/* position the front and back side */
.flip-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 0.8s;
    transform-style: preserve-3d;
}
  
/* horizontal flip when you move the mouse over the flip box container */
.flip-card:hover .flip-card-inner {
    transform: rotateY(180deg);
}
  
/* Position the front and back side */
.flip-card-front, .flip-card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden; /* Safari */
    backface-visibility: hidden;
}
  
/* Style the front side (fallback if image is missing) */
  .flip-card-front {
    color: black;
}
  
/* Style the back side */
  .flip-card-back {
    transform: rotateY(180deg);
}

/* contact */

#contact h2 {
    color: #FFEA00;
    text-transform: uppercase;
    font-size: 2rem;
    display: flex;
    justify-content: center;
    margin-bottom: 2%;
    font-family: "Nunito", "sans-serif";
}

#contact p {
    color: #EBEBEB;
    font-family: "Nunito", "sans-serif";
    font-size: 1.5rem;
    line-height: 1.5;
}

#contact {
    margin: 15% 5%;
}

#contacttextinfo {
    margin: 5% 0;
}