body{
    background-color:rgba(44, 44, 44);
    font-family: monospace;
}

  /* Dropdown Button */
.dropbtn {
  background-color: #fffbee;
    color:#2c2c2c;
    padding: 16px;
    font-size: 16px;
    margin-top: 10px;
    cursor: pointer;
    border-radius: 50%;
    border-top-left-radius: 50%;
    border-top-right-radius: 50%;
    border-bottom-right-radius: 50%;
    border-bottom-left-radius: 50%;
    font-family: monospace;
  }
  
  /* Dropdown button on hover & focus */
  .dropbtn:hover, .dropbtn:focus {
    background-color: #2c2c2c;
    border-radius: 50%;
    border-top-left-radius: 50%;
    border-top-right-radius: 50%;
    border-bottom-right-radius: 50%;
    border-bottom-left-radius: 50%;
    color: #fffbee;
  }
  
  /* The container <div> - needed to position the dropdown content */
  .dropdown {
    position: relative;
    display: inline-block;
    font-family: monospace;
    
    border-radius: 10px;
    padding:10px
  }
  
  /* Dropdown Content (Hidden by Default) */
  .dropdown-content {
    display: none;
    position: absolute;
    background-color: #fffbee;
    min-width: 160px;
    z-index: 1;
    border-radius: 10%;
    
    
  }
  
  /* Links inside the dropdown */
  .dropdown-content a {
    color: #2c2c2c;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    border-radius: 25%;
   
  }

  header{
    width: 100%;
  }
  
  /* Change color of dropdown links on hover */
  .dropdown-content a:hover {
    color:#fffbee;  
    background-color: #2c2c2c;
    border-radius: 10%;
    display: block;
  }

  
  
  /* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */
  .show {display:block;} 
  


  #myBtn {
    display: none; /* Hidden by default */
    position: fixed; /* Fixed/sticky position */
    bottom: 20px; /* Place the button at the bottom of the page */
    right: 30px; /* Place the button 30px from the right */
    z-index: 99; /* Make sure it does not overlap */
    border: none; /* Remove borders */
    outline: none; /* Remove outline */
    background-color: #2c2c2c; /* Set a background color */
    color: white; /* Text color */
    cursor: pointer; /* Add a mouse pointer on hover */
    padding: 15px; /* Some padding */
    border-radius: 10px; /* Rounded corners */
    font-size: 18px; /* Increase font size */
    
  }
  
  #myBtn:hover {
    background-color: #325B7D; 
  }


  /*parallax styles*/

  body, html {
    height: 100%;
    
  }
  
  .parallax {
    /* main image used */
    background-image: url('img/poka-dots.png');
    width: 100%;
  
    /* 100% height */
    height: 100%; 
  
    /* parallax scrolling effect */
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
  }



/*parallax 2*/

.parallax2 {
  background-image: url('img/dottedFaces.png');
height: 100%;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;

  }


/*parallax 3*/

.parallax3 {
  /* The image used */
  background-image: url('img/eyeSee.png');

  /* Full height */
  height: 100%; 

  /* Create the parallax scrolling effect */
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.hoverlogo{
  
color: #fffbee;
font-size: 30px;
text-align: center;
width: 100%;
padding-top: 100px;
padding-bottom: 100px;
background-image: url('img/poka-dots-white.png');
border-top: 30px solid #fffbee;
-webkit-animation: fadein 5s;
-moz-animation: fadein 5;
-ms-animation: fadein 5s;
-o-animation: fadein 5s;
animation: fadein 5s;
margin-top: 300px;

    

}



/* DEMO-SPECIFIC STYLES */
.typewriter h1 {
    color: #fffbee;
   
    font-family: monospace;
    overflow: hidden; /* Ensures the content is not revealed until the animation */
    border-right: .15em solid #fffbee; /* The typwriter cursor */
    white-space: nowrap; /* Keeps the content on a single line */
    margin: 0 auto; /* Gives that scrolling effect as the typing happens */
    letter-spacing: .15em; /* Adjust as needed */
    animation: typing 5.0s steps(30, end), blink-caret .5s step-end infinite;
      float: left;
      padding-top: 50px;
      line-height: 100px;
      font-size: 50px;
      padding-left: 10px;
   margin-bottom: 1000px;
  }
  
  /* typing */
  @keyframes typing {
    from { width: 0% }
    to { width: 100% }
  }
  
  /* cursor */
  @keyframes blink-caret {
    from, to { border-color: transparent }
    100% { border-color: #fffbee; }
  }
  

  .gallery {
    display: grid;
   padding-top:250px;
    grid-gap: 5px;
    margin: 0;
    -webkit-animation: fadein 3s; /* Safari, Chrome and Opera > 12.1 */
     -moz-animation: fadein 3s; /* Firefox < 16 */
      -ms-animation: fadein 3s; /* Internet Explorer */
       -o-animation: fadein 3s; /* Opera < 12.1 */
          animation: fadein 3s;
}


  .gallery__img {
    width: min-content;
    height: 100%;
    object-fit: fill;
    border-radius: 50%;
    height: 250px;
    width: 250px;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    border-radius: 50%;

}

.gallery__item--1 {
    grid-column-start:1;
    grid-column-end: 2;
    grid-row-start: 1;
    grid-row-end: 2;
    min-height: min-content;
    width: min-content;
    
}

.gallery__item--2 {
    grid-column-start:4;
    grid-column-end: 5;
    grid-row-start: 2;
    grid-row-end: 4;
    min-height: min-content;
    width: min-content;
}

.gallery__item--3 {
    grid-column-start:5;
    grid-column-end: 6;
    grid-row-start: 2;
    grid-row-end: 1;
    min-height: min-content;
    width: min-content;
}

.gallery__item--4 {
    grid-column-start:7;
    grid-column-end: 8;
    grid-row-start: 2;
    grid-row-end: 4;
    min-height: min-content;
    width: min-content;
}

.gallery__item--5 {
    grid-column-start:8;
    grid-column-end: 8;
    grid-row-start: 2;
    grid-row-end: 1;
    min-height: min-content;
    width: min-content;
}



.box {
    align-self: flex-end;
    animation-duration: 7.2s;
    animation-iteration-count:2;
    height: 0px;
    transform-origin: bottom;
    width: 250px;
    min-height: min-content;
}
.bounce-2 {
    animation-name: bounce-2;
    animation-timing-function: ease;
  
}
@keyframes bounce-2 {
    0%   { transform: translateY(0); }
    50%  { transform: translateY(50px); }
    100% { transform: translateY(0); }
}


@keyframes fadein {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Firefox < 16 */
@-moz-keyframes fadein {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Internet Explorer */
@-ms-keyframes fadein {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Opera < 12.1 */
@-o-keyframes fadein {
  from { opacity: 0; }
  to   { opacity: 1; }
}


.aboutMe{
  color: #fffbee;
  background-color: rgba(44, 44, 44, .9);
  font-family: monospace, serif;
  font-size: 30px;
  font-weight: bolder;
  padding: 10px;
     
      
 
  padding-left: 100px;
  padding-right: 100px;
  
  text-align: center;
  border-radius: 50px;
  box-shadow: 3px 3px 3px #fffbee;

}

.aboutMe p{
  padding:10px;
  color: #fffbee;
  margin-top: 0px;
  background-color: rgba(50, 91, 125,.5);
  font-family: monospace, serif;
  font-size: 14px;
  max-width: 35em;
  min-width: fit-content;
  text-align: justify;
}
.aboutMe p a{
 color:#fffbee;
}

.grid-container {
  display: grid;
  grid-template-columns: auto auto auto auto auto auto;
  grid-gap: 10px;
  background-color: rgba(44, 44, 44, .01);
  padding: 100px 30px 30px 30px;
  float:right;
}

#topLogo{
  content: normal;

 
}



.container2 {
  display: grid;
  grid-template-columns: auto auto auto auto auto auto;
  grid-gap: 10px;
  background-color: rgba(44, 44, 44, .01);
  padding: 100px 30px 30px 30px;
  float:right;
}

.portfolio{
  color: #fffbee;
 display: grid;
  font-family: monospace, serif;
  font-size: 30px;
  font-weight: bolder;
  float: inline-start;
  min-width: fit-content;
  text-align: center;

}


.stage{
  background-color: #2c2c2c;
color: #fffbee;
font-size: 100px;
text-align: center;
border-top: 30px solid #fffbee;
padding-bottom: 30px;
padding-top: 30px;

}
.stage a:hover{
  color: #325B7D;
  text-decoration: none;
}

a:visited {
  color:#325B7D;
  text-decoration: none;
    }

 .stage a:link{
font-family: monospace, serif;
color: #325B7D;
text-decoration: none;
  }

    a:link{
  color: #2c2c2c;
    }

    footer{
      
      width: 100%;
      border-bottom: 30px solid #fffbee;
      padding-top: 50px;
     
      
  }

a {
  text-decoration: none;
}
  .stage a {
  text-decoration: none;
  }
 
  footer p{
      color: white;
      padding-top: 10px;
      
  }
   .footer_styles{
       padding-top: 10px;
       width:50px;
      
   }

   .email_us{
    width: 100%;
    
    
}


.gallery2 {
  display: grid;
 
  margin: 0;
  
}


.gallery__img2 {
  width: min-content;
  height: 100%;
  object-fit: fill;
  
  height: 500px;
  width: 500px;
  justify-content: center;
  align-items: center;
 margin-right: -22px;

}

.gallery__item--1-1 {
  grid-column-start:1;
  grid-column-end: 1;
  grid-row-start: 1;
  grid-row-end: 1;
  min-height: min-content;
  width: min-content;
  -webkit-animation: fadein 5s; /* Safari, Chrome and Opera > 12.1 */
  -moz-animation: fadein 5s; /* Firefox < 16 */
   -ms-animation: fadein 5s; /* Internet Explorer */
    -o-animation: fadein 5s; /* Opera < 12.1 */
       animation: fadein 5s;
}

.gallery__item--2-2 {
  grid-column-start:2;
  grid-column-end: 2;
  grid-row-start: 1;
  grid-row-end: 1;
  min-height: min-content;
  width: min-content;
  -webkit-animation: fadein 10s; /* Safari, Chrome and Opera > 12.1 */
  -moz-animation: fadein 10s; /* Firefox < 16 */
   -ms-animation: fadein 10s; /* Internet Explorer */
    -o-animation: fadein 10s; /* Opera < 12.1 */
       animation: fadein 10s;
}

.gallery__item--3-3 {
  grid-column-start:3;
  grid-column-end: 3;
  grid-row-start: 1;
  grid-row-end: 1;
  min-height: min-content;
  width: min-content;
  -webkit-animation: fadein 13s; /* Safari, Chrome and Opera > 12.1 */
  -moz-animation: fadein 13s; /* Firefox < 16 */
   -ms-animation: fadein 13s; /* Internet Explorer */
    -o-animation: fadein 13s; /* Opera < 12.1 */
       animation: fadein 13s;
}

.topLogo {
  width: 20%;
  float: right;
 
  margin-bottom: 10px;
  padding-bottom:100px
}