@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Anonymous+Pro&display=swap');


/*This is a comment*/
/*Add css reset*/
*{
	margin:0;
	padding:0;
	box-sizing:border-box;
}
html{
  scroll-behavior: smooth;/*makes scrolling smooth*/
}

body {
    /*a gradient is treated as a backgroung img*/
    background-image: linear-gradient(to bottom left, #2ebf91,#845fca);/*1st color starts transition at 15%*/
    /*background-color: #77a9f5;
    #56CCF2-->#2F80ED
    #9CECFB-->#65C7F7-->#0052D4
    #2ebf91-->#8360c3
    #36D1DC-->#007991*/
    margin: 0;
    font-family: poppins, anonymous pro;
    background-repeat: no-repeat;/*prevents the gradient from repeating itself*/
  }

.navbar{
  background:#f2f2f2;
  padding: .6em;
}

.navbar .logo{
  text-decoration: none;/*removes the underline*/
  font-weight: bold;
  color: black;
  font-size: 1.2em;
  
}
.navbar .logo span{
  
  color: #007af3;
}

.navbar nav{
  display: none;
}

.navbar .container{
  display: flex;
  place-content: space-between;
}

nav.menu-btn{/*is added through javascript*/
  display: block;
}

nav{
  position: fixed;
  z-index: 999;
  width: 45%;
  height: 80vh;
  right: 0%;
 
  padding: 1em;
  background: #20272e;
}

nav .primary-nav{
  margin-top: 1.5em;
  
}
nav .primary-nav li a{
  color: white;
  text-decoration: none;
  display: block;/*this enables hyperlink elements to be positioned by margin and padding*/
  padding: 0.5em;
  font-size: 1.1em;
  text-align: right;
  cursor: pointer;
  
}
nav .primary-nav li a:hover{
  font-weight: bold;
}
nav .sec-nav .secondary-nav li a{

    text-decoration: none;
    display: none;/*this hides 2ndary navs in screens below 600px*/
  
}


/*hamburger button*/
.mobile-menu{
  height: 30px;
  padding-top: 5px;
  cursor: pointer;
}
/*x button*/
.mobile-menu-exit{
  float: right;
  cursor: pointer;
  color: #fff;
}




      /*BODY-SECTION*/

section{
  padding:5em;
}



/*-------HERO------*/

.hero{
  padding-bottom: 0px;/*to get rid of whitspace between sections, set section padding bottom to 0*/
}



.heroimages-container{/*images*/
  display: flex;
  justify-content: center;
  margin-bottom: 100px;
}

.heroimages-container .web-image{
  width: 100%;
  border-radius: 3%;
  margin:0px; 
  padding:  0px;
}
.heroimages-container .img-container{
  padding-right: 15px;/*create space btwn web,app imgs */
}

.img-container{
  position: relative;
  
}
 
.overlay{
  position: absolute;
  bottom: 0; /*top or bottom is the position to display the text*/  
  /*background: rgb(0, 0, 0);
  background: rgba(0,0,0,.5);*/
  color: #007af3;
  width: 100%;
  transition: 0.5s ease;
  opacity: 0;
  color: #ffffff;
  font-size: 20px;
  font-weight: 500;
  padding: 0px;
  text-align: center;
}

.img-container:hover .overlay{
opacity: 1;
}


@media (max-width:720px) {
  .img-container:hover .overlay{
    opacity: 0;/*hides text on hover*/
  }
  
}

     /*for hover effect*/
.heroimages-container img{
  opacity: .7;/*adds greysh color on imgs*/
  transform: scale(1);
  transition: .3s ease-in-out;
}
.heroimages-container img:hover{
  opacity: 1; 
  transform: scale(1.1);/*increases the size of image*/
  animation: flash 1.2s;
}

@keyframes flash{
  0%{
    opacity: .7;
  }
  100%{
    opacity: 1;
  }
}

  /*-----DEV-CONTAINER-----*/

.dev-container{
  margin:  100px 250px ;/*350px*/
  margin-bottom: 0px;
  
  height: 150px;
  /*glassmorphism effect invilves 2 bgs & linear gradient*/
 background: white;
 background: linear-gradient(to right bottom, rgba(
   255,255,255,0.3),rgba(255,255,255,0.2));
border-radius: 1rem;
  }

.developer{
  justify-content: center;/*when you define your div as a flex container, then you cant use text alin property,to center text horizontallywithin the div,instead you use justify content with center as the value*/
  /*above tip got from https://blog.hubspot.com/website/center-div-css*/
  box-sizing:content-box;
  display: flex;
  height: 70px;
  padding: 35px 30px; 
  margin-bottom: 0px;
  
  
  
}

.words{
  font-weight: bold;
  font-size: 1.2em;
  margin-top: 29px;
  margin-right: 5px;
  padding-right: 15px;
  overflow: hidden;
}

.words span{
  display: block;
  height: 100%;
  animation: spin_words 5s infinite;
}

.developer .border{/*separate words with Developer*/
  border-left: 2.5px solid black;
  margin-top: 10px;
  margin-bottom: 0px;
  
  /*height: 60px; height property determines the height of the border*/
}

.developer p{
  padding-left: 20px;
  padding-top: 0px;
  font-size: 1.5em;
  font-weight: 500;
}

@keyframes spin_words{
  10%{transform: translateY(-112%);}
  25%{transform: translateY(-100%);}
  35%{transform: translateY(-212%);}
  50%{transform: translateY(-200%);}
  60%{transform: translateY(-312%);}
  75%{transform: translateY(-300%);}
  85%{transform: translateY(-412%);}
  100%{transform: translateY(-400%);}
}

        
    /*
 .heading{
   margin: 0px;
   padding: 0px;
 }
*/
 ul{
   list-style-type: none; /*removes bullets from all ul tags*/
 }


   /*---Grettings Section---*/

.introduction{
  padding-top: 80px;
}



.greetings{
  text-align: center;
}
.greetings h2{
  font-size: 1.6em;
  letter-spacing: 0.1em;
}
.greetings p{
width: 100%;  
}

/*====Contact Form====*/
.center-contactbtn button{/*contact me btn*/
  padding: 10px 20px;
  font-size: 15px;
  font-weight: 600;
  color:#222 ;/*#222,,#007af3* , #3498db/ /*#3498db*/
  background:(#f5f5f5);/*#f5f5f5*/
  border: none;
  cursor: pointer;
  border-radius:5px;
  z-index: 0;/*this enables the button to be rendered infront of other elements.This helped me solve the bug where the button would only respond when pressed at the farthest right and would not respond on other areas.I thought that some element was being rendered in front of the button, and decided to change its z index.*/
  
  /*transition,position & overflow are used in styling the hover button*/
  transition: 0.8s;
  position: relative;
  overflow: hidden;
}

/*Hover Button Effect for Contact Me btn- got from DarkCode yt channel"  Buttons With Awesome Hover Effects Using Only HTML & CSS"*/ 
#show-contact:hover{
  color: #fff;
  
}
.center-contactbtn button::before{
  content: "";
  position: absolute;
  left: 0%;
  width: 100%;
  height: 0%;
  background: #3498db;
  z-index: -1;
  transition: 0.5s;
}

#show-contact::before{
  top: 0%;
  border-radius: 0 0 50% 50%;
}
#show-contact:hover::before{
  height: 180%;
}
/*end of hover animation*/

.popup-form{
  position: absolute;
  top: 160%;/*y-axis movement*/
  right: 25%;/*x-axis movement*/
  opacity: 0;
  padding: 20px 30px;
  background: #fff;
  transform: translate(0,-50%) scale(1.25);
  width: 380px;
  box-shadow: 2px 2px 5px 5px rgba(0, 0, 0, 0.15);
  border-radius: 10px;
  transition:top 0ms ease-in-out 200ms,
              opacity 200ms ease-in-out 0ms,
              transform 200ms ease-in-out 0ms;

  z-index: -1;}/*once inactive, to be rendered behind button */

.popup-form.active{/*the active class is added thru javascript DOM manipulation*/
opacity: 1;
z-index: 10;/*once active, to be rendered infront of other content.Reason for 10 value is that,if its below the value, it inerferes with the Contact Me btn hover animation.That is why the value is above*/
transform: translate(0, -50%) scale(1);
transition: top 0ms ease-in-out 0ms,
            opacity 200ms ease-in-out 0ms,
            transform 200ms ease-in-out 0ms;
}
.popup-form .close-button{
  position: absolute;
  top: 10px;
  right: 10px;
  width:15px; height: 15px ;
  background: #888;
  color: #eee;
  text-align: center;
  line-height: 15px;
  border-radius: 15px;
  cursor: pointer;
}


.form h2{
  text-align: center;
  color: #222;
  margin: 10px 0 20px;
  font-size: 25px;
}

.popup-form .form .form-element{
  margin: 15px;
  
}

.popup-form .form .form-element label{
  font-size: 14px;
  color: #222;
  float: left;/*labels of input fields stay on left side of the form*/
}

.popup-form .form .form-element input[type="text"]
{
  margin-top: 5px;
  padding: 10px;
  display: block;
  width: 90%;
  outline: none;
  border:1px solid #aaa;
  border-radius: 5px;  
}

.popup-form .form .form-element button{/*submit btn*/
width: 100%;
height: 40px;
border: none;
outline: none;
font-size: 16px;
background: #0957ff;/*007af3*/
color:#f5f5f5;
border-radius: 10px;
cursor: pointer;
}


.popup-form .form .form-element #msg-area{
  margin-top: 0px;
  margin-right:15px;
  width: 330px;
  height: 150px;
}
/**/


.heading h2{
text-decoration: underline 2.5px;
text-align: center;
word-spacing: 0.5em;/*spaces words*/
letter-spacing: 3px;/*spaces letters of a word*/

}

.showcasecontainer{
/*all child elements are in flexbox*/
margin: 30px 50px 20px;/*create space btwn heading & gm panel*/
height: 250px;/*g.m card becomes long*/
  display: flex;
  justify-content: space-around;/*provide equal space on all-around-sides of the 3 child elements*/
  /*align-items: baseline;*/
  background: white;
  background: linear-gradient(to right bottom,rgba(255,255,255, 0.2),rgba(255,255,255,0.1));
  border-radius: 01rem;
  border: solid  0.1px rgba(255,255,255,0.4);


}

/*media query- if max width of device is 720px, implement the given code below*/
@media (max-width:720px) {
  .showcasecontainer{
    flex-direction:column;/*content will be arranged horizontal manner*/
    text-align: center;
    background: none;
    margin-top: 100px;
  }
}



h3{
 /* text-align: center;*/
  font-size: 1.4em;
  letter-spacing: 0.2em;
  color: rgb(28, 28, 28);
  margin-bottom: -1px;/*reduse space between h3 & li*/
  
}
.web-list, .mobile-list, .games-list{
 /*remove padding and margin*/
  margin: 0px;
  padding: 0px; 
}



    /*---FOOTER-SECTION---*/

  .social-msg{
     /*margin is 60 px to give room for the sm icons to play thier animation*/
    text-align: center;
    padding-left: 10px;
    margin-bottom: 60px;
    font-family:Anonymous Pro;
    font-size: 1.15em;
    letter-spacing: 0.1em;
    font-weight:bold;
    color: rgb(43, 43, 43);

  }
  .social-icons{
    margin-top: 60px;
    margin-bottom: 100px;
  }
  .social-icons ul { 
    position: absolute;
    left: 50%;
    padding: 0%;
    margin: 0%;
    transform: translate(-50%,-50% );
    display: flex;
  }

  .social-icons ul li{
    list-style-type: none;
    margin: 0 .5em;
  }

  .social-icons ul li .fa{
    /*edit words in fa  class*/
    font-size: 35px;
    line-height: 60px;
    transition: .4s;
    color: #000;
    cursor: pointer;/*changes the mouse from arrow to hand pointer*/
  }

  .social-icons ul li .fa:hover{
    color: #fff;
  }

  .social-icons ul li a{
    position: relative;
    display: block;
    width:60px;
    height:60px;
    border-radius: 50%;
    background-color: rgb(91, 161, 226);
    text-align: center;
    transition: 0.4s;
    box-shadow:0 5px 4px rgba(0,0,0,.5);
  }
  
  .social-icons ul li a:hover{
transform:translate(0, -10px)
  }
  .social-icons ul li:nth-child(1) a:hover{
    background-color:#211F1F ;
  }
  .social-icons ul li:nth-child(2) a:hover{
    background-color:#E4405F ;
  }
  .social-icons ul li:nth-child(3) a:hover{
    background-color:#1DA1F2 ;
  }
  
  .social-icons ul li:nth-child(4) a:hover{
    background-color:#1877F2 ;
  }
  
  .social-icons ul li:nth-child(1){ /*using nth child to control an individual link.this animation will only play on link 1(github)*/
  
/*code got from geeksforgeeks sites
the effect was inspired by ubisoft snowdrop site*/
  animation-name: social-icons;
  animation-duration: 4s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
  margin-top: 5px;
  margin-bottom: 5px;
}
@keyframes social-icons{
  0%{ transform: translate(0, 0px);}
  50%{ transform: translate(0, -15px);}
  100%{transform: translate(0, -0px);}
}
.social-icons ul li:nth-child(2){/*this animation only plays on link 2(instagram)*/
  animation-name: social-icons;
  animation-duration: 4.5s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
  margin-top: 5px;
  margin-bottom: 5px;
}
@keyframes social-icons{
  0%{ transform: translate(0, 0px);}
  50%{ transform: translate(0, -15px);}
  100%{transform: translate(0, -0px);}
}

.social-icons ul li:nth-child(3){/*this animation only plays on link 3(twitter)*/
  animation-name: social-icons;
  animation-duration: 5s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
  margin-top: 5px;
  margin-bottom: 5px;
}
@keyframes social-icons{
  0%{ transform: translate(0, 0px);}
  50%{ transform: translate(0, -15px);}
  100%{transform: translate(0, -0px);}
}

.social-icons ul li:nth-child(4){/*this animation only plays on link 4(instagram)*/
  animation-name: social-icons;
  animation-duration: 5.5s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
  margin-top: 5px;
  margin-bottom: 5px;
}
@keyframes social-icons{
  0%{ transform: translate(0, 0px);}
  50%{ transform: translate(0, -15px);}
  100%{transform: translate(0, -0px);}
}

/*-------COPYRIGHT-------*/
.copyright{
  font-family: Arial, sans-serif ;    /*cursive*/
  font-size: .8em;
  text-align: center;
  margin-top: 50px;
  padding-top: 20px;
}



/*-----MEDIA QUERIES-----*/
@media (min-width:600px) {/*the NavBar section - code got from Design Course 2021 Complete Crash Course */
  .mobile-menu,.mobile-menu-exit{
    display: none;/*hides these buttons when screen is larger than 600px*/
  }
  
 .navbar .container{
    display: grid;
    grid-template-columns: 180px auto;
    justify-content: unset;
  }
  .navbar nav{
    display: flex;
    justify-content: space-between;
    background: none;
    position: unset;
    height: auto;
    width: 100%;
    padding: 0%;
  }

  .navbar nav ul{
    display: flex;
  }

  /*the reason the first nav links are this color is that they camouflage coz they cant be separated from sec nav links so i use this color to camouflage the links on the navigation area-this is until a better sol is found*/
  .navbar nav .first-nav ul a{
    color: #f2f2f2;
  }
 
  .navbar nav ul a{
    color:black;
    font-size: 1em;
    padding: 0.1em 1em;
    text-decoration: none;
  }
  

 .navbar  nav .primary-nav{
    margin:0em;
  }
  

  .navbar nav ul li.current a{
    font-weight: bold;
  }
  .navbar .sec-nav .secondary-nav li a{
    display: unset;/*since under 600px these links are hidden, use unset property for them to be seen in screens above 600px*/
  } 


}
@media(max-width:720px) {
  .heroimages-container{
    flex-direction: column; 
    align-items: center;
  }
}

@media only screen and (max-width:800px){
 .heroimages-container .web-image{
     width: 110%;   
    /*padding-left: 50px;*/
    
  }
}

@media only screen and (max-width:700px){
  .heroimages-container .game{
      width:95%;   
     padding-right: 15px;/*pushes the game image in line with the other images*/
   }
  }
@media(max-width:720px){
  .heroimages-container img{
    opacity: 1;/*removes grey color on imgs*/
  }

}
@media (max-width:720px) {
  .heroimages-container img:hover{
    transform: scale(1);/*removes expand on hover effect*/
  }
}
@media (max-width:480px) {
  .overlay{
    opacity: 1;/*text on imgs ia visible*/
  }
}

@media (max-width:720px) {
  .popup-form{
    margin-top: 150px;
    margin-right: -60px;/*to move the form on the right side of phone screen */
    width: 250px;
  }
 
  .popup-form .form .form-element #msg-area{
    width: 200px;
    height: 50px;
  }
}

@media (max-width:720px) {/*reduce whitespace btwn sections*/
  .introduction{
    padding-top: 10px;
  }  
}

@media (max-width:950px) { /*max width is 950 coz when scalling the rolling words get squeezed when value is under 950px*/
  .dev-container{
    margin: 50px 0px;

    background: none;
  } 
}
@media (max-width:480px) { /*prevents the words rolling from being squeezed*/
    .words{
    padding-right: 80px;
  }
}

@media (max-width:720px) {
  .showcase{
    padding-top: 0px;
  
  }
  
}
@media (max-width:720px) {
  .showcasecontainer{
    margin-bottom: 50px;
    border: none;
  
  }
  
}