body{
   background-image: linear-gradient(to bottom, #30cfd0 0%, #330867 100%);
   font-family: "work sans", sans-serif;
}
a{
   text-decoration: none;
}

.ui-accordion-content {
   height: auto !important;
 }

/*start of nav section*/

#link{
  color: blue;
  text-decoration: none;
}
#link:hover{
  color: lightgreen;
  text-decoration: underline;  
}
nav{
   display:flex;
   background-color:#2c75ff;
   justify-content: center;
   position:fixed;
   top: 0;
   left:0;
   width:100%;
   z-index:5;
   height: 40px;
}

.sec-nav-li{
   height: 50px;
   width: 75%;
   max-width: 75%;
   
   display:flex;
   align-items: center;
   padding:0 10%;
   list-style: none;
   margin: auto;
}

nav ul{
   display:flex;
   align-items: center;
   margin:auto ;
   list-style: none;
}

nav ul li a{
   font-size: 16px;
   height: auto;
   padding: 0 15px;
   color: white;
   display: flex;
   align-items: center;
   justify-content: center;
   flex-flow: wrap;
   
}

nav ul li a:hover{
   transition: 0.2s;
   color: navy;
}

/*end of nav section*/

/*start of hero section*/

.clickMe{
   width: 90%;
   max-width: 1100px;
   height: auto;
   background-color: none;
   text-align: center;
   padding: 40px 50px 70px;
   margin: 0 auto;
   margin-top: 5px;
   margin-bottom: 5px;
   
}


.comtainer{
   position:relative;
   width:100%;
   max-width: 1200px;
   margin: 0 auto;
   padding:0 15px;
}

.typecontainer {
   height: 200px;
   position: relative;
   border: 3px solid green;
   border-style: none;
   
   
   color: pink;
   font-weight: bold;
   font-family: cursive;
 }
 
 .vertical-center {
   margin: 0;
   position: relative;
   top: 50%;
   -ms-transform: translateY(-50%);
   transform: translateY(-50%);
 }

.hero{
   padding-top:80px;
}

.typeWriter{
   padding-top:80px;
}

.typeBut{
   color: pink;
   text-align: center;
   font-size: 34px;
   margin: 30px 0px 100px;

}

.fade-in-image{
   border-style: none;
   border-radius: 50%;
   margin: 0 auto;
   max-width: 440px;
   display:block;
   position: relative;
}

/* .fade-in-image::before {
   content: attr(title);
   position: absolute;
    
   right: -50%;
   bottom: 60%;
   transform: translateX(-50%);
   padding: 4px 8px;
   background-color: yellow;
   color: black;
   font-size: 24px;
   border-radius: 4px;
   opacity: 0;
   visibility: hidden;
   transition: opacity 0.1s, visibility 0.1s;

   
} */
.blink {
   animation: blink 2s steps(1, end) infinite;
 }
 
 @keyframes blink {
   0% {
     opacity: 1;
   }
   50% {
     opacity: 0;
   }
   100% {
     opacity: 1;
   }
 }

 #stopBlink {
   width: 100px;
   height: 100px;
   background-color: none;
   animation: blink 2s infinite;
 }


.fade-in-image:hover::before {
   opacity: 1;
   visibility: visible;
   
}



.img-section {
   opacity: 0;
   animation: fadeIn 5s forwards;
 }

 #date-time{
   color: white;
   text-align: center;
 }

 #date-time:hover{
   font-size: 36px;
   color: darkmagenta
 }

 .wave {
   animation-name: wave-animation;  /* Refers to the name of your @keyframes element below */
   animation-duration: 2.5s;        /* Change to speed up or slow down */
   animation-iteration-count: infinite;  /* Never stop waving :) */
   transform-origin: 70% 70%;       /* Pivot around the bottom-left palm */
   display: inline-block;
   color: white;
   text-align: center
 }
 
 @keyframes wave-animation {
     0% { transform: rotate( 0.0deg) }
    10% { transform: rotate(14.0deg) }  /* The following five values can be played with to make the waving more or less extreme */
    20% { transform: rotate(-8.0deg) }
    30% { transform: rotate(14.0deg) }
    40% { transform: rotate(-4.0deg) }
    50% { transform: rotate(10.0deg) }
    60% { transform: rotate( 0.0deg) }  /* Reset for the last half to pause */
   100% { transform: rotate( 0.0deg) }
 }

 
 
 #helloThere{
   text-align: center;
   color: white;
 }
 
 
 
 
 /* For demonstration purposes only: */
 body { font-size: 3.5em }
 h1 { font-size: 0.5em }
 
 /*end of hero section*/


 
 .next-section {
   opacity: 0;
 }
 
 .fade-in {
   animation-fill-mode: forwards;
 }
 
 .fade-in-delay {
   animation: fadeIn 5s forwards;
   animation-delay: 7s; /* Delay the start of the fade-in animation */
 }
 
 @keyframes fadeIn {
   0% {
     opacity: 0;
   }
   100% {
     opacity: 1;
   }
 }

 /*start of about me section*/


.aboutme{
   width: 90%;
   max-width: 1100px;
   height: auto;
   background-color: white;
   text-align: center;
   padding: 40px 50px 70px;
   margin: 0 auto;
   box-shadow: 10px 10px 0px rgb(0 0 0 / 80% ), -10px -10px 0px rgb(255 90 90 / 80%);
}

.aboutme-section{
   padding: 5px;
   display: flex;
   align-items: center;
   justify-content: center;
   flex-flow: wrap;
   
}

.aboutme-image{
   height:450px;
   width:400px;
   background-image: url("simon.jpg");
   background-size: cover;
   background-position: center;   
   
}
.aboutme-text{
   height: auto;
   width: 40%;
   margin-left: 40px;
   text-align: left;
   

}

/*end of about me section*/

/*start of my skills section*/

.myskills{
  width: 100%;
  max-width: 1100px;
  height: auto;
  background-color: white;
  text-align: center;
  padding: 40px 50px 70px;
  margin: 0 auto;
  box-shadow: 10px 10px 0px rgb(0 0 0 / 80% ), -10px -10px 0px rgb(255 90 90 / 80%);
}

.myskills-section{
  padding: 5px;
  display: flex;
  align-items: center;
  
  flex-flow: wrap;
  
}


.skills-list{
  height: auto;
  width: 100%;
  margin-left: 10px;
  text-align: left;
  
  

}

.skills-list li{
   font-size: 24px;
  overflow-wrap: normal;
  margin-top: 15px;

}

.myskills h4{
   margin-top: 20px;
   padding: 20px;
   background-color: pink; 
   width: 30%;
   justify-content: center;
   border-color: red;
   border-style: solid;
   box-shadow: 10px 10px gray;

 }

/*End of my skills section*/

/*start of my certificates section*/

 /* Clear floats after image containers */
 .row::after {
   content: "";
   clear: both;
   display: table;
 }

 .row {
   display: flex;
 }
 
 .column {
   flex: 27.5%;
   padding: 5px;
   margin: 5px;
 }



.cert-container{
   width: 1000px;  
   background-color: none;
   text-align: center;
   /* padding: 40px 50px 70px; */
   margin: 0 auto;
   margin-top: 75px;
   margin-bottom: -50px;   
   

}

#cert.images{
   height: 20px;
   display: grid;
   
}



.cert-h3{
  color: pink;
  margin-top: 20px;
  display: flex;
   align-items: center;
   justify-content: center;
   flex-flow: wrap;
}


.cert-h2{
  display: flex;
   align-items: center;
   justify-content: center;
   flex-flow: wrap;
   color:white;
   text-decoration: underline;
   
}



.certificates{
   padding-top:80px;
}

.certificates img{
   border-style: none;
   
   margin-left: 10px ;
   margin-top: 10px;
   max-width: 440px;
   
   
}

.certificates h3{
   color: pink; 
   
}


.cert-h2{
   display: flex;
    align-items: center;
    justify-content: center;
    flex-flow: wrap;
}

.certificates h2{
   color: white;
   text-decoration: underline;
}

/*End of my certificates section*/

/*start of my projects section*/


#projects{
   padding: 5px;
   margin: 5%;
   width: 90%;
   height: auto;
   text-align: center;
}

.projects{
   display: flex;
   align-items: center;
   justify-content: center;
   flex-flow: wrap;
}


#projects h2{
   color: white;
   text-decoration: underline;
   margin-top: 50px;
}

.earth-project{
   width:400px;
   height: 400px;
   background-color: white;
   position: relative;
   border-radius: 10px;
   background-image: url("earth.jpg");
   margin: 20px;
   background-size: cover;
   background-position: center;

}
.bbc-project{
   width:400px;
   height: 400px;
   background-color: white;
   position: relative;
   border-radius: 10px;
   background-image: url("bbc-news.png");
   margin: 20px;
   background-size: cover;
   background-position: center;

}
.text{
   position: absolute;
   height: 60px;
   width: 100%;
   left: 0;
   bottom: 0;
   z-index: 2;
   background-color: white;
   overflow: hidden;
   transition: 0.2s;
   padding:20px
}

.text:hover{
   height: 175px;
   transition: 0.3s;
}

.text h3{
   margin-top: 3px;
}

.content{
   color: black;
}
.button{
   border: 2.5px solid lightblue;
   border-radius: 5px;
   width: 160px;
   margin-bottom: 100px;
   margin-left: 10px;
   padding: 10px;
   text-decoration: none;
   
}

/*End of my projects section*/

/*Start of App section*/
#Apps-Built{
   padding: 5px;
   margin: 5%;
   width: 90%;
   height: auto;
   text-align: center;
}

.Apps-Built{
   display: flex;
   align-items: center;
   justify-content: center;
   flex-flow: wrap;
}


#Apps-Built h2{
   color: white;
   text-decoration: underline;
}

.app-project{
   width:300px;
   height: 300px;
   background-color: white;
   position: relative;
   border-radius: 10px;
   background-image: url("appsheet.jpg");
   background-position:bottom;
   margin: 20px;
   
   

}



.apptext{
   position: absolute;
   height: 100px;
   width: 100%;
   left: 0;
   bottom: 10;
   z-index: 2;
   background-color: white;
   overflow: hidden;
   transition: 0.2s;
   padding:20px
}

.apptext:hover{
   height: 400px;
   width: 325px;
   transition: 0.3s;
}

.apptext h3{
   margin-top: 3px;
   margin-bottom: 10px;
}

.apptext p{
   margin-top: 3px;
   font-size: 16px;
   text-align: left;
}

.content{
   color: black;
}

/*End of App section

/*start of contact section*/

#get-in-touch{
   color: white;
 }

 #email-label{
   color: white;
 }

 #email-clarification{
   color: white;
 }

 #subject-label{
   color: white;
 }

 #content-label{
   color: white;
 }

 #submit-but{
   color: white;
   border: 0;
   border-radius: 5px;
   background: blue;
   width: 140px;
   height: 40px;
   margin-top: 20px;
   margin-bottom: 20px;
   margin-left: auto;
   text-transform: uppercase;
   font-weight: bold;
   cursor: pointer;
   transition: 0.3s;
 }

 #submit-but:hover{
   border-radius: 25px;
   
   border: 4px solid green;
   background-color: green;
   border-style: solid;
   
   box-shadow: 0 0 40px yellow;
}

 #cont{
   background-color: #2c75ff;
   margin-bottom: 20px;
   border-radius: 25px;
   
   
 }

/*End of contact section*/

/*start of footer section*/

footer{
   height: 75px;
   width: auto;
   background-color: #2c75ff;
   
   
}

footer .container{
   display: flex;
   align-items: center;
   height: 100%;
}

.social-media{
   font-size: 200%;
   width: auto;
   margin-left: auto;
   margin-right: 20px;
}

.social-media a i{
   color: white;
   transition: 0.2s;
}
.social-media a i:hover{
   color: pink;
   transition: 0.2s;

}

.copyright{
   color: white;
   margin-left: 20px;
   font-size: 24px;
}

/* @keyframes shake {
   0% { transform: translateX(0); }
   20% { transform: translateX(-5px); }
   40% { transform: translateX(5px); }
   60% { transform: translateX(-5px); }
   80% { transform: translateX(5px); }
   100% { transform: translateX(0); }
 }
 
 .shake {
   animation-name: shake;
   animation-duration: 0.5s;
   animation-iteration-count: infinite;
 } */

/*End of footer section*/