style.css

html {
  scroll-behavior: smooth;
}

html, body {
  overflow-x: hidden;
  overflow-y: scroll;
}

body {

  background-image: linear-gradient(to right,#2193b0,#6dd5ed);
  width: 100vw;
  font-family: 'Open Sans', sans-serif;
}

/* Custom Scroll Bar */
::-webkit-scrollbar {
  margin: 2em 0;
  width: 5px;
}

::-webkit-scrollbar-track {
  background: #006e8a;
  margin-block: .5em; /*margin top bottom*/
}

::-webkit-scrollbar-thumb {
  background: #ffb732;
  border-radius: 1rem;
}


/* Dark Mode Switch CSS */

.switch-container {
  position: absolute;
  top: 10%;
}

.switch-container #switch {
  display: none;
}

.switch-container .switch-label {
  position: relative;
  cursor: pointer;
  margin: 0;
}

.switch-container .switch-label .switch-rail {
  transition: all 0.2s ease-in-out;
  position: absolute;
  width: 70px;
  height: 30px;
  background: #ff9a47;
  border-radius: 50px;
  overflow: hidden;
  bottom: -14px;
  right: -6rem;
}

.switch-container .switch-label .switch-rail .switch-slider {
  transition: all 0.2s ease-in-out;
  position: absolute;
  top: 4px;
  left: 4px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #fff;
}

.switch-container #switch:checked+.switch-label .switch-rail {
  transition: all 0.2s ease-in-out;
  background: #2e4a6b;
}

.switch-container #switch:checked+.switch-label .switch-rail .switch-slider {
  transition: all 0.2s ease-in-out;
  transform: translateX(40px);
}

.search {
  position: relative;
  left: 200px;
  height: 60px;
  width: 60px;
}

.loader {

  filter: hue-rotate(0deg);
  animation: hue 10000ms infinite linear;
  /* position: sticky; */
  /* background: #dc3545 linear-gradient(45deg, #0f8, #08f); */
}


.fixed-top {
  /* background-color: black; */
  position: sticky;
}


.search {
  /* position: fixed; */
  position: absolute;
  height: 48px;
  width: 48px;
  background: #fff;
  border-radius: 60px;
  transition: 0.5s;
  /* box-shadow: 0 0 0 5px black; */
  overflow: hidden;
}

.activated {
  width: 360px;
}

.search .icon {
  position: absolute;
  top: 0;
  left: 0;
  width: 48px;
  height: 48px;
  border-radius: 48px;
  background: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
  cursor: pointer;
}

.search .icon::before {
  content: " ";
  position: absolute;
  width: 15px;
  height: 15px;
  border: 3px solid #287dfc;
  border-radius: 50%;
  transform: translate(-4px, -4px);
}

.search .icon::after {
  content: " ";
  position: absolute;
  width: 3px;
  height: 12px;
  background: #287dfc;
  transform: translate(6px, 6px) rotate(315deg);
}

.search .input {
  position: relative;
  width: 300px;
  height: 48px;
  left: 48px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.search .input input {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  border: none;
  outline: none;
  font-size: 18px;
}

.clear {
  position: absolute;
  top: 38%;
  transform: translate(-50%);
  /* border: 2px solid red; */
  width: 15px;
  height: 15px;
  right: 15px;
  cursor: pointer;
  display: flex;
  align-items: center;
}

.clear::before {
  position: absolute;
  content: " ";
  width: 1px;
  height: 15px;
  background: #999;
  transform: rotate(45deg);
}

.clear::after {
  position: absolute;
  content: " ";
  width: 1px;
  height: 15px;
  background: #999;
  transform: rotate(315deg);
}

.brand1 {
  font-size: 40px;
  font-weight: bolder;
  text-shadow: 1px 1px blue;
}


/* .nav1 {
  background-color: black;
} */

/* Character text animation  */
.chars{
  background: linear-gradient(90deg,cyan,red,pink,green,yellow,purple);
  background-size: 400%;
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  text-decoration: none;
  animation: linrclr 10s linear infinite;
}
h1.chars{font-weight: 1000; padding: 20px; font-size: 3.5rem; font-family: poppins; margin: 50px;}

@keyframes linrclr {
  0%{
      background-position: 0%;
  }
  100%{
      background-position: 400%;
  }
}
body.lightmode #cont{
  display: flex;
  /* flex-direction: column; */
  flex-wrap: wrap;
  margin: 0; padding: 0;
  width: 100%;
  max-width: 2000px;
  justify-content: center;
  align-items: center;
}
body.dark-mode #cont{
  display: flex;
  /* flex-direction: column; */
  flex-wrap: wrap;
  margin: 0; padding: 0;
  width: 100%;
  max-width: 2000px;
  justify-content: center;
  align-items: center;
}
.flip-card{

  cursor: url("./Images/kunai_cursor.png"),pointer;
  border: 1px solid lightgrey;
  box-shadow: 5px 20px 60px 15px;

}


.topic {
  text-align: center;
  font-weight: 900;
  font-size: 60px;
  color: red;
  text-shadow: 2px 4px 4px yellow;
  text-decoration: underline;
}

img {
  padding: 30px; 
  object-fit: contain;
  width: 100%;
  
}

.col-md-4 {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.card-bg {
  background-color: rgb(174, 184, 86);
}

h2 {
  color: black;
}

/* body {
  background-color: white;
  font-weight: bold;
  text-align: justify;
} */
h1 {
  color: black;
  text-align: center;
  margin-top: 90px;
  margin-bottom: 40px;
  line-height: 14pt;
}

#one {
  background-color: #2867b2;
}

#two {
  background-color: rgb(33, 31, 31);
}

#three {
  background-color: rgb(225, 48, 108);
}

#buttons {
  margin-bottom: 10px;
}

.navTitle {
  color: #ffffff;
  padding-left: 50px;
  size: 50px;
}

.row{
  margin:  0 auto;
  text-align: center;
}

.row1 {
  margin-top: 6%;
}

.itemNav {
  padding: 15px;
}

.mr-auto {
  display: flex;
  justify-content: center;
  align-items: center;
}

.nav-link{
  font-size: 1.4rem;
  font-weight: 700;
  color: beige;
}

.toggle-mode{
  font-size: 1.3rem;
  background-color: beige;
  border: none;
  outline: none;
  display: flex;
  padding: 0.3rem 0.75rem;
  border-radius: 4rem;
  align-items: center;
  justify-content: center;
  color: rgb(0, 0, 0);
}

.about-title {
  padding-top: 2%;
  color: white;
  font-weight: bold;
  font-style: italic;
  line-height: 2.5rem;
}

.card {
  overflow: clip;
}
.flip-card img{
  max-height: 300px;
}
.card img:hover {
  transform: scale(1.1);
  transition: all 0.3s ease-out;
}

@media only screen and (max-width: 600px) {
  .display-3 {
    font-size: 4rem;
  }

  .lead {
    font-size: 1.6rem;
  }

  .gallery-head {
    font-size: 2rem;
  }

  .navTitle {
    padding-left: 3px;
  }
}

.card h2 {
  color: #dc3545;
}
/* body {
  background-image: radial-gradient(blue, violet);
  font-family: "Ninja Naruto", arial, sans-serif;
} */

/* Light mode */
/* body {
  background: #fff;
  color: #000;
} */
.dark-mode {
  background-image: linear-gradient(to right,#414141,#000000);
}

p.aboutcolor {
  color: white;
}

body.aboutdarkmode {
  background: black;
  color: #ffffff;
}
.lightmode {
  background-image: linear-gradient(to right,#2193b0,#6dd5ed);
}

.brand1 {
  font-size: 40px;
  font-weight: bolder;
  text-shadow: 1px 1px blue;
}

/* .nav1 {
  background-color: black;
} */
.topic {
  text-align: center;
  font-weight: 900;
  font-size: 60px;
  color: red;
  text-shadow: 2px 4px 4px yellow;
  text-decoration: underline;
  
}

img {
  object-fit: contain;
}

.card-bg {
  background-color: rgb(174, 184, 86);
}

h2 {
  color: black;
}

/*about*/
.about-content {
  text-align: justify;
  font-size: 20px;
  color: black;
  border-radius: 2rem;
  background: beige;
  overflow:hidden;
  transition :all .5s ease-in;
  z-index: 1;
  padding: 30px;
  box-shadow: -10px 25px 50px rgba(0,0,0,0.3);
  min-height: 50vh;
  -webkit-font-smoothing:antialised;
  -moz-osx-font-smoothing:grayscale;
}
.about-content:hover {
  opacity:1;
  background :#e2a9e5;
  background: -moz-linear-gradient(-45deg,#e2a9e5 15%,#2b94e5 100%);
  background: -webkit-linear-gradient(-45deg,#e2a9e5 15%,#2b94e5 100%);
  background: linear-gradient(135deg,#e2a9e5 15%,#2b94e5 100%);
}

/* body {
  background-color: white;
  font-family: "Righteous", cursive;
  font-weight: bold;
} */

h1 {
  color: black;
  text-align: center;
  margin-top: 90px;
  margin-bottom: 40px;
  line-height: 14pt;
}

#one {
  background-color: #0a66c2;
}

#two {
  background-color: #333;
}

#three {
  background-color: #c32aa3;
}
#four {
  background-color: #1877f2;
}

.about-card{
  border-radius: 8px;
}





#buttons {
  margin-bottom: 10px;
}

.navTitle {
  color: #ffffff;
  padding-left: 50px;
  size: 50px;
}

.row1 {
  margin-top: 6%;
}

.itemNav {
  padding: 15px;
}

.card {
  overflow: clip;
}

.card img:hover {
  transform: scale(1.1);
  transition: all 0.3s ease-out;
}

@media only screen and (max-width: 600px) {
  .display-3 {
    font-size: 4rem;
  }

  .lead {
    font-size: 1.6rem;
  }

  .gallery-head {
    font-size: 2rem;
  }

  .navTitle {
    padding-left: 3px;
  }
}

.darkmode-btn {
  border: none;
  border-radius: 12px;
  background-color: #f65c00;
  color: #200e14;
}

body {
  /* background-color: #ee5522; */
  /* background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 2000 1500'%3E%3Cdefs%3E%3CradialGradient id='a' gradientUnits='objectBoundingBox'%3E%3Cstop offset='0' stop-color='%23FB3'/%3E%3Cstop offset='1' stop-color='%23ee5522'/%3E%3C/radialGradient%3E%3ClinearGradient id='b' gradientUnits='userSpaceOnUse' x1='0' y1='750' x2='1550' y2='750'%3E%3Cstop offset='0' stop-color='%23f7882b'/%3E%3Cstop offset='1' stop-color='%23ee5522'/%3E%3C/linearGradient%3E%3Cpath id='s' fill='url(%23b)' d='M1549.2 51.6c-5.4 99.1-20.2 197.6-44.2 293.6c-24.1 96-57.4 189.4-99.3 278.6c-41.9 89.2-92.4 174.1-150.3 253.3c-58 79.2-123.4 152.6-195.1 219c-71.7 66.4-149.6 125.8-232.2 177.2c-82.7 51.4-170.1 94.7-260.7 129.1c-90.6 34.4-184.4 60-279.5 76.3C192.6 1495 96.1 1502 0 1500c96.1-2.1 191.8-13.3 285.4-33.6c93.6-20.2 185-49.5 272.5-87.2c87.6-37.7 171.3-83.8 249.6-137.3c78.4-53.5 151.5-114.5 217.9-181.7c66.5-67.2 126.4-140.7 178.6-218.9c52.3-78.3 96.9-161.4 133-247.9c36.1-86.5 63.8-176.2 82.6-267.6c18.8-91.4 28.6-184.4 29.6-277.4c0.3-27.6 23.2-48.7 50.8-48.4s49.5 21.8 49.2 49.5c0 0.7 0 1.3-0.1 2L1549.2 51.6z'/%3E%3Cg id='g'%3E%3Cuse href='%23s' transform='scale(0.12) rotate(60)'/%3E%3Cuse href='%23s' transform='scale(0.2) rotate(10)'/%3E%3Cuse href='%23s' transform='scale(0.25) rotate(40)'/%3E%3Cuse href='%23s' transform='scale(0.3) rotate(-20)'/%3E%3Cuse href='%23s' transform='scale(0.4) rotate(-30)'/%3E%3Cuse href='%23s' transform='scale(0.5) rotate(20)'/%3E%3Cuse href='%23s' transform='scale(0.6) rotate(60)'/%3E%3Cuse href='%23s' transform='scale(0.7) rotate(10)'/%3E%3Cuse href='%23s' transform='scale(0.835) rotate(-40)'/%3E%3Cuse href='%23s' transform='scale(0.9) rotate(40)'/%3E%3Cuse href='%23s' transform='scale(1.05) rotate(25)'/%3E%3Cuse href='%23s' transform='scale(1.2) rotate(8)'/%3E%3Cuse href='%23s' transform='scale(1.333) rotate(-60)'/%3E%3Cuse href='%23s' transform='scale(1.45) rotate(-30)'/%3E%3Cuse href='%23s' transform='scale(1.6) rotate(10)'/%3E%3C/g%3E%3C/defs%3E%3Cg %3E%3Cg transform='translate(0 240)'%3E%3Ccircle fill='url(%23a)' r='3000'/%3E%3Cg opacity='0.5'%3E%3Ccircle fill='url(%23a)' r='2000'/%3E%3Ccircle fill='url(%23a)' r='1800'/%3E%3Ccircle fill='url(%23a)' r='1700'/%3E%3Ccircle fill='url(%23a)' r='1651'/%3E%3Ccircle fill='url(%23a)' r='1450'/%3E%3Ccircle fill='url(%23a)' r='1250'/%3E%3Ccircle fill='url(%23a)' r='1175'/%3E%3Ccircle fill='url(%23a)' r='900'/%3E%3Ccircle fill='url(%23a)' r='750'/%3E%3Ccircle fill='url(%23a)' r='500'/%3E%3Ccircle fill='url(%23a)' r='380'/%3E%3Ccircle fill='url(%23a)' r='250'/%3E%3C/g%3E%3Cg transform='rotate(-36 0 0)'%3E%3Cuse href='%23g' transform='rotate(10)'/%3E%3Cuse href='%23g' transform='rotate(120)'/%3E%3Cuse href='%23g' transform='rotate(240)'/%3E%3C/g%3E%3Ccircle fill-opacity='0' fill='url(%23a)' r='3000'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-attachment: fixed;
  background-size: cover; */
}

.radius{
  border-radius: 50px;
  width: 90%!important;
  margin: auto;
}
.card-bg {
  transition: all 0.5s;
  background: rgba(255, 255, 255, 0.25);
  box-shadow: 0 8px 32px 0 #1f26875e;
  backdrop-filter: blur(2.5px);
  -webkit-backdrop-filter: blur(2.5px);
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.18);
}

.card-bg:hover {
  background: rgba(255, 255, 255, 0.4);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-radius: 40px 0 40px 0;
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: #200e14 4px 3px;
}

h2.card-title {
  font-size: 2.8rem;
  font-weight: 900;
  color: #141a46;
  text-align: center;
  padding-top: 20px;  
}

.topic {
  color: white;
  text-shadow: 2px 4px 4px black;
}

.card:nth-of-type(2n+1) {
  transform: translateX(-10%);
}

.card:nth-of-type(2n) {
  transform: translateX(10%);
}

.card {
  transition: all 550ms ease-in;
  opacity: 100;
}

.appear {
  transform: translateX(0) !important;
  opacity: 1;
}

/* Mobile devices */
@media (min-width: 320px) and (max-width: 480px) {
  #carouselExampleIndicators {
    margin-top: 80px;
  }

  .topic {
    color: white;
    text-shadow: 2px 4px 4px black;
    font-weight: 500;
    font-size: 40px;
    margin-top: 30px !important;
  }

  h2.card-title {
    text-align: center;
  }

  .navbar-nav button {
    margin-left: auto;
    margin-right: auto;
  }

  .nav-link {
    margin-left: 45%;
  }

  .search {
    left: 200px;
  }
}

.nav-link:hover{
  background-color: 	#e32828;
  border-radius: 4rem;
}



button#scrolltopBtn {
  border-radius: 100%;
  height: 40px;
  width: 40px;
  font-size: 25px;
  font-weight: bold;
  /* text-align: center; */
  /* position: sticky; */
  margin-top: 100px;
  position: fixed;
  margin-left: 89rem;
  z-index: 2000;
  border: none;
}
.flip-card {
  float: left;
  border-radius: 29px;
  background-color: transparent;
  width: 400px;
  /* min-height: 400px; */
  /* border: 1px solid #e1dfdf; */
  perspective: 1000px; /* Remove this if you don't want the 3D effect */
  margin: 70px;
  display: flex;
  
  
}

/* This container is needed to position the front and back side */
.flip-card-inner {

  
  position: relative;
  width: 100%;
  min-height: 400px;
  text-align: justify;
  transition: transform 0.8s;
  transform-style: preserve-3d;
  border-radius: 29px;

}

/* Do an horizontal flip when you move the mouse over the flip box container */
.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
}

/* Position the front and back side */
.flip-card-front, .flip-card-back {
  box-shadow: 0 5px 24px 0 rgb(0 0 0 / 80%);
  border-radius: 29px;
  position: absolute;
  min-width: 400px;
  height: 400px;
  -webkit-backface-visibility: hidden; /* Safari */
  backface-visibility: hidden;
}
.flip-card-back{
  overflow-y: scroll;
}

/* Style the front side (fallback if image is missing) */
.flip-card-front {
  padding: 0px 10px;
  background-color:rgb(228 212 212);
  color: black;
}

/* Style the back side */
.flip-card-back {
  background-color: rgb(228 212 212);
  color:#000;
  transform: rotateY(180deg);
  padding: 20px;

  scrollbar-width: none;  
  overflow-y: scroll;

}

.flip-card-back::-webkit-scrollbar{
        display: none;
}

img
{
  position: relative;
  top: -20px;
}


ul.navbar-nav.mr-auto {
  position: absolute;
  right:10rem;

}


@media screen and (max-width:955px) {
  ul.navbar-nav.mr-auto {
    position: absolute;
    right:0;
    left: 0;
    top: 0; 
    margin-top: 80px;
    padding: 1rem;
    background-color: #141a46;
  }
} 


.inner-container{
  justify-content: center;
}
.about_card{
  width: 300px;
  margin: 6px;
  
}
/* social icons */
.footer h5{
  margin-top: 5px;
}
.footer .icon{
  display: flex;
  justify-content: center;
  align-items: center;
}
.footer .icon .fa{
    padding: 8px;
    margin: 5px;
    color: #F14A16;
    background: #fff;
    width: 43px;
    /* height: 30px; */
    font-size: 22px;
    border-radius: 50%;
    text-align: center;
    text-decoration: none;
    transition: all 0.3s ease;
}
.footer .icon .fa:hover{
  color: #fff;
  background: #4649FF;
}
.footer span{
  text-decoration: underline;
}