html {
  /*background-image: url("../img/cyber3.jpg");
  background-repeat: no-repeat;
  background-size: cover;*/
  scroll-behavior: smooth;
  font-family: 'Chakra Petch', sans-serif;
  color: #fff;
  height: auto;
  overflow-y: scroll;
}

li.bullets{
  margin-left: 12vh;
  list-style-type: circle !important;
}

nav {
  background-color: #000;
  width: 100%;
  height: 48px;
  line-height: 48px;
}

nav ul a {
  font-size: 1.5rem;
}

nav ul a:hover {
  background-color: #01c557;
}

nav ul li.active {
  background-color: #01c557;
}


ul.dropdown-content a {
  font-size: 1.5rem;
}

nav i,
nav [class^="mdi-"], nav [class*="mdi-"],
nav i.material-icons {
  font-size: 24px;
  height: 48px;
  line-height: 48px;
}

@media only screen and (min-width: 601px){
nav, nav .nav-wrapper i, nav a.sidenav-trigger, nav a.sidenav-trigger i {
    line-height: 48px;
}}

.dropdown-content {
  background-color: #000;
}

.dropdown-content li > a {
  color: #fff;
}

.dropdown-content li{
  margin: 0;
}

.dropdown-content li:hover,
.dropdown-content li.active {
  background-color: #01c557;
}

.dropdown-content li.divider {
  margin: 0;
}

.sidenav {
  background-color: #000;
}

.sidenav li > a {
  font-size: 1.2rem;
  color: #fff;
}

.sidenav li > a.title {
  font-size: 1.5rem;
  color: #fff;
}

ul.sidenav > li > span.title {
  font-size: 1.5rem;
  padding: 0 32px;
}

.sidenav li > a.active {
  background-color: #01c557;
  z-index: 100;
}

.parallax-container {
  height: 70vh;
}

.parallax-container .parallax img {
  height: 111vh;
}

div.bg {
  background-color: #fff;
  color: #000;
}


#day, #night{
  margin-right: 3vh;
  color: #fff;
}

#day:hover, #night:hover{
  cursor: pointer;
  color: #01c557;
}
/*typed effect*/

.text-display {
  display: inline-block;
}

.type1 {
  margin-top: 1rem;
  font-family: 'Chakra Petch', monospace;
  overflow: hidden;
  white-space: nowrap;
  border-right: 6px solid;
  width: 0;
  animation:
    typed 1.1s steps(20, end) forwards,
    blink .8s infinite;
}

@keyframes typed {
  from { width: 0 }
  to { width: 100% }
}

@keyframes blink {
  from { border-color: transparent }
  to { border-color: #fff; }
}

/*make the title texts responsive*/

.title{
  margin-top: 3vh;
}

@media only screen and (min-width: 360px) {
  .title {
    font-size: 2.5rem;
  }
}

@media only screen and (min-width: 450px) {
  .title {
    font-size: 2.8rem;
  }
}

@media only screen and (min-width: 570px) {
  .title {
    font-size: 3.1rem;
  }
}

@media only screen and (min-width: 690px) {
  .title {
    font-size: 3.3rem;
  }
}

@media only screen and (min-width: 810px) {
  .title {
    font-size: 3.5rem;
  }
}


@media only screen and (min-width: 870px) {
  .title {
    font-size: 3.8rem;
  }
}

@media only screen and (min-width: 960px) {
  .title {
    font-size: 4rem;
  }
}

@media only screen and (max-width: 360px) {
  .title {
    font-size: 2.5rem;
  }
}

/* */

/* Make h2 with subtitle class text responsive */

@media only screen and (min-width: 360px) {
  .subtitle {
    font-size: 2.3rem;
  }
}

@media only screen and (min-width: 450px) {
  .subtitle {
    font-size: 2.6rem;
  }
}

@media only screen and (min-width: 570px) {
  .subtitle {
    font-size: 2.9rem;
  }
}

@media only screen and (min-width: 690px) {
  .subtitle {
    font-size: 3.1rem;
  }
}

@media only screen and (min-width: 810px) {
  .subtitle {
    font-size: 3.3rem;
  }
}


@media only screen and (min-width: 870px) {
  .subtitle {
    font-size: 3.6rem;
  }
}

@media only screen and (min-width: 960px) {
  .subtitle {
    font-size: 3.8rem;
  }
}

@media only screen and (max-width: 360px) {
  .subtitle {
    font-size: 2.3rem;
  }
}


/* floating cards*/

@keyframes float {
	0% {
		transform: translatey(0px);
	}
	50% {
		transform: translatey(-0.8vh);
	}
	100% {
		transform: translatey(0px);
	}
}


.card {
  background-color: rgba(1, 24, 88, 0.4);
  border-radius: 5px;
  box-shadow: 0 5px 15px 0px rgba(0,0,0,0.6);
	transform: translatey(0px);
	animation: float 3s ease-in-out infinite;
}

.animate__animated.animate__zoomIn {
  --animate-duration: 1s;
}

.card1:hover{
  cursor: pointer;
  box-shadow: inset 1px 1px 18px 8px rgba(254, 1, 142, 0.6);
}

li {
  margin-bottom: 0.8rem;
}

.material-icons.color1 {
  color: rgba(1, 232, 86, 0.8);
  margin-left: 1rem;
  margin-right: 1.5rem;
}

/* */

/* Page  footer */

.page-footer {
  background-color: #000;
}

/* */

/* cube */

.size {
  margin-top: 4vh;
  margin-bottom: 4vh;
}

.one {
  --i: 0;
}

.two {
  --i: 1;
}

.three {
  --i: 2;
}

.four {
  --i: 3;
}

.cube {
  width: 8vh;
  height: 8vh;
  transform-style: preserve-3d;
  animation: animate 10s linear infinite;
}

@keyframes animate {
  0%
  {
    transform: rotateX(-30deg) rotateY(0deg);
  }
  100%
  {
    transform: rotateX(-30deg) rotateY(360deg);
  }
}

.cube div {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
}

.cube div span {
  display: flex;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(#151515, rgba(254, 1, 142));
  transform: rotateY(calc(90deg * var(--i))) translateZ(4vh);
}

.top {
  position: absolute;
  top: 0;
  left: 0;
  width: 8vh;
  height: 8vh;
  background: #151515;
  transform: rotateX(90deg) translateZ(4vh);
}

.reflection {
  position: absolute;
  top: 0;
  left: 0;
  width: 8vh;
  height: 8vh;
  background: rgba(254, 1, 142);
  transform: rotateX(90deg) translateZ(-6vh);
  filter: blur(15px);
}

/* for green cube */

.cube div.cube2 span {
  display: flex;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(#151515, #01c557);
  transform: rotateY(calc(90deg * var(--i))) translateZ(4vh);
}

.reflection2 {
  position: absolute;
  top: 0;
  left: 0;
  width: 8vh;
  height: 8vh;
  background: #01c557;
  transform: rotateX(90deg) translateZ(-6vh);
  filter: blur(15px);
}

/* */

/* */

.parallax-container.p2 {
  height: 8vh !important;
}

/* Scanning text */

html.resume {
  background-color: #0c192c;
  color: #fff;
}

.text-display {
  display: inline-block;
}

.type2 {
  margin-top: 1rem;
  font-family: 'Chakra Petch', monospace;
  overflow: hidden;
  white-space: nowrap;
  width: 0;
  animation: t 1.5s linear infinite alternate;
}

@keyframes t{
  90%,100% {width:100%}
}

.row.length1, .col.length1{
  margin-top: 16vh;
}

.scan .row .col .fingerprint {
  position: relative;
  width: 20vh;
  height: 25vh;
  background: url("../img/print.png");
  background-size: 20vh;
  background-repeat: no-repeat;
}

.scan .row .col .fingerprint::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url("../img/print2.png");
  filter: drop-shadow(0 0 2px #6e9e4e);
  background-size: 20vh;
  background-repeat: no-repeat;
  animation: animate3 4s ease-in-out infinite;
}

@keyframes animate3 {
  0%, 100%
  {
    height: 0%;
  }
  50%
  {
    height: 100%;
  }
}


.scan .row .col .fingerprint::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 8px;
  background-color: #6e9e4e;
  border-radius: 8px;
  filter: drop-shadow(0 0 20px #6e9e4e) drop-shadow(0 0 60px #6e9e4e);
  animation: animate_line 4s ease-in-out infinite;
}

@keyframes animate_line {
  0%, 100%
  {
    top: 0;
  }
  50%
  {
    top: 100%;
  }
}

/* */

/* resume background */


.bubbles {
  position: relative;
  display: flex;
}

.bubbles span {
  position: relative;
  width: 30px;
  height: 30px;
  background-color: #fe018e;
  border-radius: 50px;
  margin: 0 4px;
  box-shadow: 0 0 0 10px #fe018e66,
  0 0 50px #fe018e,
  0 0 100px #fe018e;
  animation: animate2 15s linear infinite;
  animation-duration: calc(180s / var(--i));
}

.bubbles span:nth-child(even){
  background-color: #01e756;
  box-shadow: 0 0 0 10px #01e75666,
  0 0 50px #01e756,
  0 0 100px #01e756;
}

@keyframes animate2 {
  0%
  {
    transform: translateY(100vh) scale(0.1);
  }
  100%
  {
    transform: translateY(-10vh) scale(0.6);
  }
}

.a {
  --i: 11;
}
.b {
  --i: 12;
}
.c {
  --i: 20;
}
.d {
  --i: 22;
}
.e {
  --i: 18;
}
.f {
  --i: 26;
}
.g {
  --i: 15;
}
.h {
  --i: 19;
}
.i {
  --i: 16;
}
.j {
  --i: 14;
}
.k {
  --i: 21;
}
.l {
  --i: 28;
}
.m {
  --i: 13;
}
.n {
  --i: 23;
}
.o {
  --i: 20;
}
.p {
  --i: 17;
}
.q {
  --i: 10;
}
.r {
  --i: 27 ;
}

/* */

/* resume page */

i.hm {
  color: #fff;
}

i.hm:hover {
  cursor: pointer;
  color: #01c557;
}

.animate__animated.animate__fadeIn {
  --animate-duration: 2.2s;
}

h1.m{
  margin-top: 0;
  margin-bottom: 5vh;
}

.resume_img img {
  width: 80%;
  height: 75vh;
  position: relative;
  border-radius: 8px;
  transform-style: preserve-3d;
  animation: animate4 7s linear infinite;
}

@keyframes animate4 {
  0%, 100%
  {
    transform: rotateX(5deg) rotateY(-10deg);
  }
  50%
  {
    transform: rotateX(5deg) rotateY(10deg);
  }
}

.resume_img img:hover {
  cursor: pointer;
  box-shadow: 0 10px 20px 0px rgba(0,0,0,0.6);
}

.popup {
  position: fixed;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, .8);
  height: 100%;
  width: 100%;
  z-index: 100;
  display: none;
}

.popup img {
  margin-top: 5vh;
}

.popup i:hover {
  cursor: pointer;
}

.button {
  display: none;
  margin-top: 35vh;
}

.button1 {
  margin-top: -5vh;
  margin-bottom: 8vh;
}

.button1 a {
  background-color: #000;
  border-radius: 10px;
  font-size: 0.8rem;
}

.button1 a:hover {
  background-color: rgba(1, 197, 87);
}

/* Home page projects section */

.whitespace{
  height: 2vh;
}

.pimg {
  overflow: hidden;
  border-radius: 15px;
  border: 5px solid #000;
  height: 45vh;
  padding: 0 !important;
}

.pimg img {
  height: 100%;
  width: 100%;
  transition: .2s linear;
}

.pimg img:hover {
  cursor: pointer;
  transform: scale(1.1);
}

.projects {
  margin-top: 5vh;
}

.projects p {
  margin-bottom: 8vh;
}

/* */

#proj {
  scroll-margin-top: 5vh;
}

/* projects page */

.prj {
  background-image: url('../img/cyber4.jpg');
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
}

div.bg2 {
  background-color: #fff;
  color: #000;
  margin-top: 7vh;
  margin-bottom: 8vh;
}

.carousel {
  border-radius: 15px;
  border: 4px solid #000;

}

.carousel-item {
  width: 80%;
  height: 60vh;
}


.carousel-item img {
  height: 100%;
  width: 100%;
}

.carousel-item:hover {
  cursor: pointer;
}

.pimg2 {
  overflow: hidden;
  padding: 0 !important;
}

.pimg2 img {
  transition: .2s linear;
}

.pimg2 img:hover {
  cursor: pointer;
  transform: scale(1.1);
}

@media (max-width: 800px){
  .prj {
    background-image: url('../img/cyber4v.png');
  }}


div#divide {
  margin-top: 5vh;
  height: 5vh;
}

#desc {
  scroll-margin-top: 3vh;
}