/* 
Theme Name: Mike O Portfolio
Author: Mike
Version: 1.0
*/


* {
  font-family: 'Josefin Sans', sans-serif;
  font-weight: 600;
  text-transform: uppercase ;
  padding: 0;
  margin: 0;
}

a{
  color: white;
  text-decoration-line: none;
  font-size: 30px;
  justify-content: center;
  width: 100%;
  margin: auto 0;
  text-align: center;
  font-weight: 900;
}

/* Navigation  */

nav {
  background-color: #2b2b2b;
  height: 60px;
  position: fixed;
  width: 100%;
  top: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.2);
}

.logo {
  color: white;
  font-size: 24px;
  font-weight: 900;
  text-decoration: none;
  max-width: 15%;
}

.nav-links {
  list-style: none;
  display: flex;
  gap: 20px;
  margin: 0;
  padding: 0;
}

.nav-links li {
  position: relative;
}

.nav-links a {
  color: white;
  text-decoration: none;
  font-size: 18px;
  font-weight: 500;
  padding: 10px 15px;
  transition: color 0.3s ease;
}

.nav-links a:hover {
  color: #00adb5;
}

.dropdown-menu {
  display: none;
  position: absolute;
  background-color: #333;
  list-style: none;
  padding: 0;
  margin: 0;
  top: 100%;
  left: 0;
  min-width: 150px;
  border-radius: 5px;
  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.2);
}

.dropdown-menu li {
  width: 100%;
}

.dropdown-menu a {
  display: block;
  padding: 10px;
  font-size: 16px;
  color: white;
  transition: background 0.3s ease;
}

.dropdown-menu a:hover {
  background: #00adb5;
  color: black;
}

.dropdown:hover .dropdown-menu {
  display: block;
}

/* Hero Image HomePage  */

.heroImage{
  margin-top: 60px;
  background-color: #19c4b2;
  height: 60vh;
  background-repeat: no-repeat;
}

.heroImage h1,h2{
  padding: 0 0 0 2%;
  text-align: left;
  color: #2b2b2b;
  z-index: 2;
  position: relative;
}

.heroImage h1{
  padding-top: 4%;
  letter-spacing: -3px;
  font-size: 70px;
  font-weight: 900;
  display: flex;
}
.heroImage h1 #Mikeh1{
  font-weight: 900;
  margin: 0 10px;
}

@keyframes shaketxt{
  0% {rotate: 0deg; transition: ease-in;}
  25% {rotate: 5deg; transition: ease-in;}
  50% {rotate: 0deg; transition: ease-in;}
  75% {rotate: -5deg; transition: ease-in;}
  100% {rotate: 0deg; transition: ease-in;}
}

.heroImage h1 #Mikeh1:hover, #Createh2:hover, #Developh2:hover{
  animation-name: shaketxt;
  animation-duration: 1.2s;
  animation-iteration-count: 2;
}
.heroImage h2{
  font-size: 32px;
  letter-spacing: -2px;
  color: white;
  display: flex;
}
#Developh2, #Createh2 {
  margin: 0 10px;
}

.heroImage p{
  width: 50%;
  padding: 30px;
  font-size: 1.1rem;
  text-transform: none;
  font-weight: 400;
  z-index: 2;
  position: relative;
}

.heroImage a{
  padding: 15px;
  font-size: 20px;
  border: 3px white solid;
  border-radius: 10px;
}
.heroImage a:hover{
  transition: 0.4s ease-in-out;
  background-color: rgba(0,0,0,0.2);
  cursor: pointer;
}
/* Footer */
footer{
  background-color: #2b2b2b;
  height: 60px;
}
footer p{
  text-align: center;
  justify-content: center;
  padding: 20px 0;
  color: white;
}

/* Portfolio ProjectGrid */

.Portfolio{
  padding: 1% 0;
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -3px;
}
.Portfolio h1{
  margin: 2% 7.5%;
  color: black;
  font-weight: 900;
}
.ProjectGrid{
  margin: 1% auto;
  position: relative;
  max-width: 85%;
  display: grid;
  grid-template-columns: auto 25% 25% 25%;
  grid-gap: 12.5px;
}
.ProjectGrid .ProjectCard{
  text-align: center;
  height: 50vh;
  background-color: #19c4b2;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: top;
}
.whitebg{
  background-color: white;
}
.gridcolumn2{
  grid-column: span 2;
}
.ProjectGrid img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  background-position: center;
}
.ProjectGrid img:active{
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.overlay {
  background-color: rgba(0, 0, 0, 0.5);
  transition: .5s ease;
  opacity:0;
  width: 100%;
  height: 100%;
  display: grid;
}
.ProjectCard:hover .overlay {
  opacity: 1;
  cursor: pointer;
}
.overlay > p {
  display: flex;
}
.overlay > p > a {
  display: flex;
  height: 100%;
  align-items: center;
  justify-content: center;
}

/* About Me */
.Contact{
  background-color: #19c4b2;
  height: 31vh;
}
.Parallax{
    background-color: black;
    height: 101vh;
    margin-top: 60px;
    position: relative;
    display: flex;
    overflow: hidden;
  }
  .Parallax img{
    position: absolute;
    pointer-events: none;
  }
  #Below{
    bottom:0;
  }
  #Above{
    top:0;
  }
  #Left_Img, #Left_Box, #Mid_Img, #Mid_Box, #Right_Img, #Right_Box {
    scale: 70%;
  }
  #Left_Img{
    top: 26%;
    left:15%;
  }
  #Left_Box{
    top: 28%;
    left:17%;
  }
  #Mid_Img{
    top: 26%;
    left: 36%;
  }
  #Mid_Box{
    top: 28%;
    left: 38%;
  }
  #Right_Img{
    top: 26%;
    left: 58%;
  }
  #Right_Box{
    top: 28%;
    left: 60%;
  }

  #Title_Solid{
    top: 5%;
    scale: 75%;
    left:0;right:0;
     margin:auto; /* Required */
    position:absolute; /* Required */
  }
  #Title_Outline{
    top: 15%;
    scale: 75%;
    left:0;
    right:0;
    margin:auto; /* Required */
    position:absolute; /* Required */
  }
  #Circle{
    scale: 75%;
    top:20%;
    left: 7%;
  }
  .colordown{
    position: absolute;
    bottom: 0;
    width: 100%;
    z-index: 2;
  }
  /* About Me 1st section */
  .AboutMe{
    height: 100vh;
    background-color: #1539d2;
    position: relative;
    font-family: hwt-arabesque, sans-serif;
  }
  .AboutMe h2{
    color: black;
    font-weight: 900;
    font-size: 24px;
    text-align: center;
    justify-content: center;
    width: 50%;
    margin: 0 auto;
  }
  table{
    width: 80%;
    margin: 0 auto;
  }
  td{
    color: black;
    font-weight: 900;
    font-size: 24px;
    width: 50%;
    height: 50px;
    margin: 0 auto;
    text-align: center;
  }
  .AboutMe p, .Skills p{
    color: #FFFFFF;
    text-transform: none;
    font-weight: 400;
    font-size: 1rem;
    text-align: center;
    justify-content: center;
    width: 80%;
    line-height: 1.3rem;
    margin: 20px auto;
  }
  .AboutMe h1, .Skills h1, .ContactAboutMe h1{
    color: #FFFFFF;
    font-weight: 400;
    font-size: 70px;
    text-align: center;
    justify-content: center;
    width: 100%;
    padding-top: 20px;
    margin-bottom: 10px;
  }
  #pink{
    width: 100%;
    position: absolute;
    bottom: 0;
    background-color: #ff00ff;
    height: 50px;
  }
  .Skills{
    height: 100vh;
    background-color: #ff00ff;
    position: relative;
  }

.hidden{
  opacity: 0;
  filter: blur(1px);
  transition: all 2s;
}
.show{
  opacity: 1;
  filter: blur(0);
  transition: all 2s;
}
#AMimg{
 margin:auto; /* Required */
 position:absolute; /* Required */
 bottom:0; /* Aligns at the bottom */
 left:0;right:0; /* Aligns horizontal center */
 max-height:45%; /* images bigger than 175 px  */
 max-width:45%;  /* will be shrinked to size */ 
}

.skillimgs{
  width: 60%;
  margin: 20px auto;
  justify-content: center;
  text-align: center;
}
.skillimgs p{
  width: 100%;
}

.skillimgs img{
  height: 90px;
  margin: 10px;
}
.skillimgs h2{
  color: black;
  font-weight: 900;
  font-size: 26px;
  text-align: center;
  justify-content: center;
  width: 100%;
  margin-bottom: 30px;
}

/* Project  */
.projecthero {
  display: flex;  
  align-items: center; 
  gap: 5%; 
  margin-top: 60px;
  height: 33vh;
  background-color: #2b2b2b;
  color: #fff;
}

.projecthero img{
  width: 150px; 
  height: auto;
  border-radius: 8px; 
  margin-left: 5%;
}
.projecthero p{
  text-transform: none;
  margin: 1.5% 0;
}

.designtitle {
  flex: 1; 
  margin-right: 10%;
}

.Project{
  display: flex;
  width: 100%;
  height: 55vh;
}
.Information{
  width: 33.33%;
  padding: 2.5%;
}
.Information h1{
  color: black;
  font-size: 2rem;
  font-weight: 900;
  padding: 1% 0;
}
section:nth-child(odd) .Information h2{
  color: white;
  font-size: 1.15rem;
  padding: 1% 0;
}
section:nth-child(even) .Information h2{
  color: #19c4b2;
  font-weight: 900;
  font-size: 1.15rem;
  padding: 1% 0;
}
.Information p{
  color: black;
  text-transform: none;
}
.Information a{
  color: black;
  display: block;
  font-size: 0.9rem;
  padding: 1% 0;
  margin-top: 3%;
  border: 2px solid black;
  text-transform: none;
}
.Information a:hover{
  color: rgba(0,0,0,0.6);
  border: 2px solid rgba(0,0,0,0.6);
}
.Container{
   width: 66.66%;
   padding: 1%;
   display:flex;
   align-items: center;
   justify-content: center;
}
section:nth-child(even) {
  background-color: #fff; 
}
section:nth-child(odd) {
  background-color: #19c4b2; 
}
/* Overig  */
#Overig{
  margin: 5%;
}

@media only screen and (min-width: 250px) and (max-width: 767px){
.heroImage h1{font-size: 50px; padding: 30px 30px 0 30px;}
.heroImage h2{font-size: 22px; padding: 5px 30px 0 30px;}
.heroImage p{ width: 75%; padding: 10px 30px; font-size: 0.9rem;}
.heroImage a{font-size: 18px;}
.heroImage #linky{font-size: 0.65rem; padding: 10px;}
.heroImage {background-size: 90%; height: 60vh;}
#homehero{height: 55vh;}
#Portfolio h1{padding-top: 2vh; font-size: 1.8rem;}
#ProjectGrid{overflow-x: hidden;width: 100%;grid-template-columns: auto; grid-gap: 20px;}
#ProjectGrid .ProjectCard{min-width: 200px; min-height: 35vh; grid-column: span 2;}
.overlay{opacity: 0.8;}
.overlay > p{font-size: 3rem;}
.overlay > p > a{ opacity: 1;}
.AboutMe h2{width: 90%;}
.AboutMe p{width: 90%; font-size: 0.8rem;}
.AboutMe { height: 151vh;}
#skillimgs{ width: 90%;}
#skillimgs img{ height: 60px; margin: 15px 5px;}
 #Left_Img, #Left_Box { scale: 80%;}
    #Left_Img{top: 26%; left:4%; }
    #Left_Box{top: 28%;left:8%;}
 #Mid_Img, #Mid_Box, #Right_Img, #Right_Box {display: none; }
 #Title_Solid{ scale: 60%; left: -60%; top: 2%;}
 #Title_Outline{ scale: 60%; left: -60%; top: 4%;}
} 

@media only screen and (min-width: 767px) and (max-width: 1100px){
    .heroImage #linky{font-size: 0.9rem; padding: 20px;}
    .heroImage p{ width: 75% ; font-size: 1.1rem;}
}