/* this section for basic global stuff text type global margin etc. */
/* will update code with time */

@font-face {
  font-family: Noto Sans;
  src: url(/fonts/Noto_Sans/NotoSans-Italic-VariableFont_wdth\,wght.ttf),
       url(/fonts/Noto_Sans/NotoSans-VariableFont_wdth\,wght.ttf);
}

@font-face {
  font-family: Poppins; 
  src: url(/fonts/Poppins/Poppins-BlackItalic.ttf);
}

@font-face {
  font-family: Poppins-Bold; 
  src: url(/fonts/Poppins/Poppins-Bold.ttf);
}

footer, .introduction {
  font-family: Noto Sans, sans-serif; 
  font-optical-sizing: auto;
  font-weight: 600;
}

.topNav {
  font-family: Poppins, sans-serif; /*Specify your font name here*/
  font-optical-sizing: auto;
  font-weight: 600;
}

h3, h2 {
  font-family: Poppins-Bold, sans-serif;
  font-optical-sizing: auto;
  font-weight: 600;
}

.btn {
  font-family: Poppins-Bold, sans-serif;
  font-optical-sizing: auto;
  font-weight: 600;
}

*{ 
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body { min-height: 100vh; }


/* color switching with resize, intresting stuff.

 @media screen and (min-width: 480px) {
  body {
    background-color: lightgreen;
  }
}
*/

/* this section for animation CSS */

.blinkLogo {
  -moz-animation: blink 2s steps(5, start) infinite;
  -o-animation: blink 2s steps(5, start) infinite;
  -webkit-animation: blink 2s steps(5, start) infinite;
  animation: blink 2s steps(5, start) infinite;
}

@keyframes blink {
  to {
    visibility: hidden;
  }
}

@-webkit-keyframes blink {
  to {
    visibility: hidden;
  }
}

.blink {
  -moz-animation: blink 1s steps(5, start) infinite;
  -o-animation: blink 1s steps(5, start) infinite;
  -webkit-animation: blink 1s steps(5, start) infinite;
  animation: blink 1s steps(5, start) infinite;
}

/* This is where main CSS file starts */

.main {
  padding: 16px;
  margin-top: 60px;
  height: 900px; 
}

.topNav {
  background-color: white;
  overflow: hidden;
  position: fixed;
  top: 0;
  width: 100%;
  border: 5px solid;
  border-radius: 5px;
  box-shadow: 0 0 8px 0;
}

h2, h3 {
  text-align: center;
  margin-top: 2%;
}

h4 {
  text-align: center;
  margin-top: 2%;
  letter-spacing: 2.5px;
}

.navigation {
  list-style-type: none;
}

.bodyTop {
  text-align: center;
  justify-content: space-evenly;
  border: 5px solid;
  border-radius: 10px;
  box-shadow: 0 0 5px 0;
  margin: auto;
  background-color: rgb(2, 159, 143);
  width: 30%;
  padding: 50px; 
  margin-top: 60px;
}

.btn {
  display:flex;
  border: 5px solid;
  box-shadow: 0 0 5px 0;
  padding: 15px;
}

.miscellaneous {
  text-align: center;
  overflow: hidden;
  justify-content: space-evenly;
  border: 5px solid;
  border-radius: 10px;
  box-shadow: 0 0 5px 0;
  margin: auto;
  background-color: rgb(119, 58, 102);
  width: 30%;
  padding: 50px; 
  margin-top: 60px;
}

/* this section where RoadMap CSS starts */

.roadmap {
  text-align: left;
  justify-content: space-evenly;
  border: 5px solid;
  border-radius: 10px;
  box-shadow: 0 0 5px 0;
  margin: auto;
  width: 50%;
  padding: 50px; 
  margin-top: 60px;
}

/* this section where usefulSites css starts */

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

.cards .card {
  position: relative;
  width: 300px;
  height: 300px;
  border-radius: 10px  
}

/* this section where fun page css starts */

.poopImg {
  text-align: center;
  background-color: rgba(110, 79, 79, 0.783);
  height: 100%;
  width: auto;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.funImg {
  display: block;
  margin-left: auto;
  margin-right: auto; 
}

/* this section where Portfolio css starts */

/* ## here is the old code for archive ## */

/*.name {
  text-align: center;
  background-color: whitesmoke;
  border: 3px solid;
  letter-spacing: 2.5px;
  border-radius: 10px;
  margin: auto;
  width: 45%;
  padding: 50px; 
  margin-top: 60px;
}

hr {
  height: 10px;
  border-color: black;
}

img {
  max-width:100%;
  max-height:100%;
  margin: auto;
}
*/

.profilePic {
  margin-left: 5%;
  width: 175px;
  height: 250px;
  border-radius: 10px;
}

.profilePic:hover {
  content: url(/img/poop\ emoji.png);
  height: 175px;
  width: 175px;
}

.profileButtons {
  margin-left: 40%;
}

.profile {
  display: flex;
  align-items: center;
  background-color: whitesmoke;
  border: 1px solid;
  border-radius: 20px;
  margin: auto;
  width: 45%;
  height: 40%;
  padding: 50px; 
  margin-top: 10px;
  box-shadow: 0 0 5px 0;
}

.introduction {
  text-align: center;
  border: 1px solid;
  border-radius: 10px;
  margin-left: 10%;
  margin-right: 10%;
  background-color: whitesmoke;
  margin: auto;
  width: 45%;
  padding: 50px; 
  margin-top: 60px;
  box-shadow: 0 0 5px 0;
}

.projects {
  text-align: left;
  background-color: rgba(101, 113, 175, 0.687);
  border: 3px solid;
  border-radius: 10px;
  margin: auto;
  width: 45%;
  padding: 45px; 
  margin-top: 15px;
}

/* This is where footer CSS file starts here */

footer {
  position: absolute;
  text-align: center;
  background-color: beige;
  width: 100%;
  height: 14vh;
  padding: 35px;
  font-size: 14px;
}