@media only screen and (max-width: 800px) {
  .navigationBar {
    display:none;
  }

      /* Style the navigation menu */
      .mobileNavigationBar  {
        overflow: hidden;
        position: relative;
        background-color:rgb(27,36,47);
        position:sticky;
        top:0;
        z-index: 3;
      }

      /* Hide the links inside the navigation menu (except for logo/home) */
      .mobileNavigationBar #myLinks {
        display: none;
      }

      /* Style navigation menu links */
      .mobileNavigationBar a {
        color: white;
        padding: 14px 16px;
        text-decoration: none;
        font-size: 17px;
        display: block;
        font-family: 'Roboto', sans-serif;
        font-weight: bold;
        /*border-style: solid; */
        border-width:1px;
        border-color:white;
      }

      /* Style the hamburger menu */
      .mobileNavigationBar a.icon {
        background: inherit;
        display: block;
        position: absolute;
        left: 0;
        top: 0;
        border-width:1px;
      }

      /* Add a grey background color on mouse-over */
      .mobileNavigationBar a:hover {
        background-color:rgba(255,255,255,.12);
        /*background-color: #333333; */
      }
}

@media only screen and (min-width: 801px) {
.navigationBar{
      background-color:rgb(27,36,47);
      padding-bottom:10px;
      padding-top:10px;
      display: inline-block;
      width:100%;
      height:35px;
     /* top:0;
      left:0; */
      /* height:auto; make navButtons more responsive to extend navbar Bottom in diff resolution */
      position:sticky;
      top:0;
      text-align: left;
      z-index:2;
    }
  .mobileNavigationBar{
    display:none;
  }
}

.m-fadeOut {
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s linear 300ms, opacity 300ms;
}
.m-fadeIn {
  visibility: visible;
  opacity: 1;
  transition: visibility 0s linear 0s, opacity 300ms;
}

/* The container <div> - needed to position the dropdown content */
.dropdown {
  position: relative; /*might adjust later*/
  display: inline-block;
  padding-left:22px;
  /*transform: translate(-50%);*/
}

/* Change the background color of the menu buttons when mouseover */
.dropdown:hover .menubtn {
  /*background-color:#C0BEBF;*/
  /*background-color:rgba(0,0,0,.20); */
  /*background-color:#0f77ff;*/
  background-color:#6db8ff;
  cursor: pointer;
 }



 .menubtn {
  /*background-color: black;*/
  background-color:inherit;
  color: white;
  padding: 8px;
  font-size: 20px;
  border: none;
  border-radius: 15%;  /*shapes the buttons to make them more round */
  font-family: 'Roboto', sans-serif;
  font-weight: bold;

}




























































body{
  width:100%;
  margin-left:auto;
  margin-top:auto;
  margin-bottom:0%;
  overflox-x:hidden;
  background-color: #fefefe;
}
html {
  scroll-behavior: smooth;
}

/*
html:not([data-scroll="1200"]) .navigationBar {
  position: fixed;
  top:0;
  left:0;
}
*/

a{
  text-decoration:none;
  color:green;
}

/*---------------startScreen----------------------- */
.welcomeScreenTitle{
  font-family: 'Roboto', sans-serif;
  text-align:left;
  font-size:40px;
  color:white;
  text-align:center;
}

@media screen and (max-width: 500px) {
  .welcomeScreenTitle{
    font-family: 'Roboto', sans-serif;
    text-align:left;
    font-size:35px;
    color:white;
    text-align:center;
  }
}

.welcomeScreenSubTitle{
  font-family: 'Roboto', sans-serif;
  text-align:left;
  font-size:30px;
  color:white;
  text-align:center;
}

@media screen and (max-width: 500px) {
  .welcomeScreenSubTitle{
    font-family: 'Roboto', sans-serif;
    text-align:left;
    font-size:20px;
    color:white;
    text-align:center;
  }
}

.textTitles{
  font-family: 'Roboto', sans-serif;
  text-align:left;
  font-size:22px;
}

.text{
  font-family: 'Roboto', sans-serif;
  font-size:16px;
}

.homePicture{
    max-width:350px;
    width:75%;
    height:auto;
    border-radius:35%;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

@media screen and (max-width: 500px) {
  .homePicture{
    max-width:250px;
    width:75%;
    height:auto;
    border-radius:35%;
    display: block;
    margin-left: auto;
    margin-right: auto;
  }
}


.welcomeScreenButton {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.welcomeScreenButton a {
  font-size: 1.5rem;
  padding: 1rem 3rem;
  color: #f4f4f4;
  text-transform: uppercase;
}

.startScreenButton {
  text-decoration: none;
  border: 1px solid rgb(146, 148, 248);
  position: relative;
  overflow: hidden;
  font-family: 'Roboto', sans-serif;
}

@media screen and (max-width: 500px) {
  .startScreenButton {
    text-decoration: none;
    border: 1px solid rgb(146, 148, 248);
    position: relative;
    overflow: hidden;
    font-family: 'Roboto', sans-serif;
    margin-top:-20%;
  }
}


.startScreenButton:hover {
  box-shadow: 1px 1px 25px 10px rgba(146, 148, 248, 0.4);
  cursor: pointer;
}

.startScreenButton:before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    120deg,
    transparent,
    rgba(146, 148, 248, 0.4),
    transparent
  );
  transition: all 650ms;
}

.startScreenButton:hover:before {
  left: 100%;
}



@media screen and (max-width: 500px) {
  .flexContainerWelcomeScreen{
    display:flex;
    flex-direction:column;
    height:100vh;
    align-items:center;
    justify-content: center;

    background: linear-gradient(-90deg, #020202, #0f77ff, #020202, #0f77ff);
  
    background-size: 300% 300%;
    animation: change 7s ease-in-out infinite;
  }
}

@media screen and (min-width: 501px) {
  .flexContainerWelcomeScreen{
    display:flex;
    flex-direction:column;
    height:100vh;
    align-items:center;
    justify-content: center;
    /*background-color:rgb(31, 31, 31); */
    /*background: linear-gradient(-45deg, #007bb5,#3B5998,#007bb5,#3B5998); */
    
    background: linear-gradient(-45deg, #020202, #0f77ff, #020202, #0f77ff);

    background-size: 400% 400%;
    animation: change 10s ease-in-out infinite;
  }
}

@keyframes change{
  0%{
    background-position:0 50%;
  }
  50%{
    background-position:100% 50%;
  }
  100%{
    background-position:0 50%;
  }
}

.welcomeScreenPicture{
  flex:1;
  margin-top:10%;
}

.welcomeScreenText{
  flex:1;
}


/*----------------------------------------- */


/*----------------About---------------------- */
.flexContainerAboutTitle{
  display:flex;
}
.flexContainerAboutTitle div{
/*  border: 1px #ccc solid;*/
  padding: 10px;
}

.aboutTitle{
  justify-content: center;
  flex:1;
}

.flexContainerAboutContent{
  display:flex;
}
.flexContainerAboutContent div{
}

.aboutText{
  width:75%;
  margin-left:auto;
  margin-right:auto;
}
/*-------------------------------------- */

/*----------------Skills---------------------- */

.slideAnimationContainer{
  transform: translateX(-50%);
    transition: opacity 250ms ease-in, transform 400ms ease-in;
    opacity: 0;
    
}

.slideAnimationContainer.appear{
  transform: translateX(0);
  opacity: 1;
  margin-top:5%;
/*background-color:rgb(132, 171, 253);*/
background-color:rgb(27,36,47);
}

.flexContainerSkillsTitle{
  display:flex;
}
.skillsTitle{
  justify-content: center;
  flex:1;

}

@media only screen and (max-width: 800px){
  .flexContainerSkills{
    display:flex;
    flex-direction:column;

  }
}
@media only screen and (min-width: 801px){
  .flexContainerSkills{
    display:flex;

  }
}


.skillsComfortable{
  flex:1;
}
.skillsText{
  flex:1;
  padding-left:10px;
  padding-right:10px;
}

.skillsTextDiv{
  width:70%;
  margin-left:15%;
  margin-right:15%;
}


.skillsBarsContainer{
  width:70%;
  margin-left:15%;
  margin-right:15%;
}

.skillsBars{
  height:20px;
  width:100%;
  max-width:100%;
  background-color:white;

}

.skillsBarsText{
  width:80px;
  height:inherit;
  background-color:rgb(17,205,47);
  text-align:center;
  color:white;
}

.skillsBarsFiller{
  height:inherit;
  background-color:green;
  background-color:rgba(57, 255, 20, 80);
}
/*-------------------------------------- */


/*-----------------editingPicture--------------------- */
.editingTitle{
  justify-content: center;
  flex:1;
  margin-top:5%;
  margin-bottom:5%;
}

@media only screen and (min-width: 801px){
  .pictureText{
    font-family: 'Roboto', sans-serif;
    font-size:20px;
  }
  .pictureTextDiv{
    width:75%;
    margin-left:auto;
    margin-right:auto;
  }
}
@media only screen and (max-width: 800px){
  .pictureText{
    font-family: 'Roboto', sans-serif;
    font-size:18px;
  }
  .pictureTextDiv{
    width:75%;
    margin-left:auto;
    margin-right:auto;
  }
}



@media only screen and (min-width: 801px){
  .flexContainerEditingPicture{
    display:flex;
    align-items:center;
  }
}
@media only screen and (max-width: 800px){
  .flexContainerEditingPicture{
    display:flex;
    flex-direction:column;
   
  }
}

.flexBoxPictureText{
flex:1;
margin-right: 5%;
margin-left: 5%;
}
.flexBoxPictureSlide{
flex:1;
margin-right:5%;
margin-left:5%;
}

.pictureContainer{
  width:100%;
  height:100%;
}

.imgPicture{
  width:100%;
  margin-left:auto;
  margin-right:auto;
  margin-top:auto;
} 



.auto-slider{
  position: relative;
  box-sizing: content-box;
  display: inline-block;
  padding: 10px 10px 10px;
  background: #fff;
  max-width: 100%;
  margin: 0 auto;
  overflow: hidden;
  border-radius: 4px;
  box-shadow: 1px 1px 6px rgba(0, 0, 0, 0.4);

}

div#slider { 
  overflow: hidden;
}
div#slider figure img { 
  width: 33.33%; float: left;
  object-fit: cover; /* should be resized to fit its container */
}
div#slider figure { 
  position: relative;
  width: 300%;
  margin: 0;
  left: 0;
  text-align: left;
  font-size: 0;
  animation: 20s sliding ease infinite; 
}


@keyframes sliding{
  0%{left: 0%; }
  33%{left: -100%;}
  66%{left: -200%;}
  100%{left: 0%;}
}        

@keyframes indicating{
  from{
      left: -100%;
  }
  to{
      left: 0;
  }
}  
/*----------------------------------------- */


/*-----------------editingVideo--------------------- */

@media only screen and (min-width: 801px){
  .videoText{
    font-family: 'Roboto', sans-serif;
    font-size:20px;
  }
  .videoTextDiv{
    width:75%;
    margin-left:auto;
    margin-right:auto;
  }
}
@media only screen and (max-width: 800px){
  .videoText{
    font-family: 'Roboto', sans-serif;
    font-size:18px;
  }
  .videoTextDiv{
    width:75%;
    margin-left:auto;
    margin-right:auto;
  }
}


@media only screen and (min-width: 801px){
  .flexContainerEditingVideo{
    display:flex;
    align-items:center;
    margin-top:5%;
  }
}
@media only screen and (max-width: 800px){
  .flexContainerEditingVideo{
    display:flex;
    flex-direction:column;
    margin-top:5%;
   
  }
}

.flexBoxVideoText{
flex:1;
margin-right: 5%;
margin-left: 5%;
}
.flexBoxVideo{
flex:1;
margin-right:5%;
margin-left:5%;
}

.videoContainer{
  position: relative;
  overflow: hidden;
  width: 100%;
  padding-top: 56.25%; 
}

  .editVideo{
    position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
  }
/*-------------------------------------- */

/*----------------Fun section---------------------- */

.flexContainerFunSectionTitle{
display:flex;
margin-top:5%;
margin-bottom:5%;
}
.funTitle{
  justify-content: center;
  flex:1;
}
.flexContainerFunSection{
display:flex;
}

.flexBoxFun{
  flex:1;
  margin-bottom:5%;
}
/*-------------------------------------- */

/*----------- guessing game ----------------------*/
.guessingGameGrid{
  display:grid;
  place-items:center;
}

@media only screen and (min-width: 801px) {
  #guessingGame{
   height:600px;
   width:350px;
   color:black;
   padding:20px;
   text-align:center;
   /*background-color:rgba(0,0,0,.20);*/
   background-color:rgb(27,36,47);
   display:inline-block;
  }
}

@media only screen and (max-width: 800px) {
  #guessingGame{
   height:600px;
   width:320px;
   color:black;
   padding:20px;
   margin-right:1%;
   text-align:center;
   background-color:rgb(27,36,47);
   display:inline-block;
  }
}

.guessingGameGridContainer {
 display: grid;
 grid-gap: 10px;
 grid-template-columns: auto auto auto;
 margin-left:25%;
 margin-right:25%;
 margin-top:10%;
}

#guessingGameNumber1{
  width:50px;
  height:50px;
  font-size:20px;
  font-family: 'Roboto', sans-serif;
  background-color: #fefefe;
}
#guessingGameNumber2{
  width:50px;
  height:50px;
  font-size:20px;
  font-family: 'Roboto', sans-serif;
  background-color: #fefefe;
}
#guessingGameNumber3{
  width:50px;
  height:50px;
  font-size:20px;
  font-family: 'Roboto', sans-serif;
  background-color: #fefefe;
}
#guessingGameNumber4{
  width:50px;
  height:50px;
  font-size:20px;
  font-family: 'Roboto', sans-serif;
  background-color: #fefefe;
}
#guessingGameNumber5{
  width:50px;
  height:50px;
  font-size:20px;
  font-family: 'Roboto', sans-serif;
  background-color: #fefefe;
}
#guessingGameNumber6{
  width:50px;
  height:50px;
  font-size:20px;
  font-family: 'Roboto', sans-serif;
  background-color: #fefefe;
}
#guessingGameNumber7{
  width:50px;
  height:50px;
  font-size:20px;
  font-family: 'Roboto', sans-serif;
  background-color: #fefefe;
}
#guessingGameNumber8{
  width:50px;
  height:50px;
  font-size:20px;
  font-family: 'Roboto', sans-serif;
  background-color: #fefefe;
}
#guessingGameNumber9{
  width:50px;
  height:50px;
  font-size:20px;
  font-family: 'Roboto', sans-serif;
  background-color: #fefefe;
}
#guessingGameNumber0{
  width:50px;
  height:50px;
  font-size:20px;
  grid-column-start: 2;
  grid-column-end: 2;
  font-family: 'Roboto', sans-serif;
  background-color: #fefefe;
}

.guessingGameGuessBox{
  height:50px;
  width:75px;
  margin-top:8%;
  margin-left:39%;
  background-color: #fefefe;
  text-align:center;
  font-family: 'Roboto', sans-serif;
  font-size:20px;
}

#guessingGameGuessedValue{
  margin-top:15px;
  margin-left:30px;
  font-family: 'Roboto', sans-serif;
  position:absolute;
}

#guessingGameGuessedValueWinner{
  margin-top:15px;
  margin-left:30px;
  font-family: 'Roboto', sans-serif;
  color:black;
  position:absolute;
}

#guessingGameGuessedValueWinnerTotalGuesses{
  margin-top:15px;
  margin-left:30px;
  font-family: 'Roboto', sans-serif;
  color:black;
  position:absolute;
}

#guessingGameClickGuess{
height:50px;
width:200px;
margin-top:5%;
background-color:black;
font-family: 'Roboto', sans-serif;
font-size:20px;
color:white;
font-weight: bold;
position:relative;
}

#guessingGameClickGuessPlayAgain{
height:50px;
width:200px;
margin-top:5%;
background-color:black;
font-family: 'Roboto', sans-serif;
font-size:20px;
color:white;
font-weight: bold;
position:relative;
}

#guessingGameInfoText{
font-family: 'Roboto', sans-serif;
color:white;
}

 #guessingGameInfoText2{
font-family: 'Roboto', sans-serif;
margin-top:-10%;
margin-left:-60%;
position: relative;
color:white;
}
/*------------------------------------------------------------------*/



/*----------------Footer---------------------- */

.flexContainerFooter{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content: center;
  margin-top:5%;
  background-color:rgb(27,36,47);

}

.footerIcons{
flex:1;
margin-bottom:5%;
}

.footerTitle{
  font-family: 'Roboto', sans-serif;
  text-align:center;
  font-size:24px;
  color:White;
}
.footerTextDiv{
  flex:1;
  width:75%;
  margin-left:auto;
  margin-right:auto;
}
.footerText{
  font-family: 'Roboto', sans-serif;
  font-size:20px;
  text-align:center;
  color:White;
}


 /* Font icons style */
 .fa {
  padding: 20px;
  font-size: 30px;
  width: 30px;
  text-align: center;
  text-decoration: none;
}

/* Hover effect */
.fa:hover {
  opacity: 0.7;
}

/* Specific color for each brand */

.fa-facebook {
  background: #3B5998;
  color: white;
}

.fa-linkedin {
  background: #007bb5;
  color: white;
}

/*-------------------------------------- */




/*---------------Slideshow-------------- */

/*-------------------------------------- */