cardsstyle.css

:root {
  --tempBorder: solid red;
}

.card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 600px;

  height: 600px;
  background-color: azure;
  border-radius: 5%;
  margin-bottom: 30px;
}

.namer {
  margin-top: 20px;
  margin-bottom: 15%;
  font-size: large;
}

.banner {
  text-align: center;
  font-size: 60px;
  color: white;
  width: 100%;
  padding: 40px;
  padding-bottom: 90px;
}

body {
  display: flex;
  align-items: center;

  flex-direction: column;
  z-index: 1;
}

::-webkit-scrollbar {
  width: 0px;
}

html {
  overflow: auto;
  overflow-x: hidden;
}

/* Hide scrollbar for chrome */
body::-webkit-scrollbar {
  display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
body {
  -ms-overflow-style: none;
  /* IE and Edge */
  scrollbar-width: none;
  /* Firefox */
}

/* adds sticky bg */
.background {
  z-index: -1;
  height: 100vh;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  background: linear-gradient(rgba(153, 1, 172, 1), rgba(0, 212, 255, 1));
}

#darkmodetoggle {
  width: 0px;
  height: 0px;
  visibility: hidden;
}

.darkmodetogglelabel {
  margin: 10px;
  width: 500px;
  height: 200px;
  position: relative;
  display: block;
  background: #ebebeb;
  border-radius: 200px;
  box-shadow: inset 0px 5px 15px rgba(0, 0, 0, 0.4),
    inset 0px -5px 15px rgba(255, 255, 255, 0.4);
  cursor: pointer;
  transition: all 0.3s;
}

/* :after is psuedo child for devcorative no need to show in html */
.darkmodetogglelabel:after {
  content: "";
  width: 180px;
  height: 180px;
  position: absolute;
  top: 10px;
  left: 10px;
  background: linear-gradient(180deg, #ffcc89, #d8860b);
  border-radius: 180px;
  box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.2);
  transition: all 0.3s;
}

#darkmodetoggle:checked + .darkmodetogglelabel {
  background: #242424;
}

#darkmodetoggle:checked + .darkmodetogglelabel:after {
  background-color: #242424;
  left: 490px;
  transform: translate(-100%);
  background: linear-gradient(180deg, #777, #3a3a3a);
}

/* when label is clicked it is active and thus after changes shape yet it reverts back*/
.darkmodetogglelabel:active:after {
  width: 260px;
  background: linear-gradient(90deg, #777, #ffcc89);
}

/* =================================Radio Magic====================================== */
/* causes a bounce and after it needs time to settle in */

.radioMagic {
  transition: all 3s;
  width: 0px;
}

.radioMagic:checked + .langSpan {
  animation: activate 2s ease-in-out 0s forwards,
    breathing 2s ease-in-out 1s infinite alternate;
}

.langSpan {
  display: inline-block; /* required to make it act like div*/
  width: 100px;
  text-align: center;
  line-height: 20px;
  height: 20px;
  border: 2px solid blue;
  border-radius: 5px;
}

@keyframes activate {
  from {
    background-color: rgb(2, 215, 2);
  }
  to {
    background-color: rgb(5, 107, 5);
  }
}

@keyframes breathing {
  from {
    color: #ddcfba;
  }
  to {
    color: #768a9c;
  }
}

.langView {
  margin-top: 40px;
  width: 200px;
  height: 200px;
  border: solid 4px black;
  border-radius: 5px;
  content: url("https://avatars.githubusercontent.com/u/58907470?v=4");
  transition: all 2s;
}

.radioGroup:has(input[id="radio_html"]:checked) ~ .langView {
  animation: rotateChange 2s ease-in-out alternate 2;
  content: url("data:image/png;base64,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");
}
.radioGroup:has(input[id="radio_css"]:checked) ~ .langView {
  animation: rotateChange2 2s ease-in-out alternate 2;
  content: url("data:image/png;base64,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");
}
.radioGroup:has(input[id="radio_js"]:checked) ~ .langView {
  animation: rotateChange3 2s ease-in-out alternate 2;
  content: url("data:image/png;base64,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");
}

@keyframes rotateChange {
  from {
    transform: rotateY(0deg);
  }
  to {
    transform: rotateY(90deg);
  }
}

@keyframes rotateChange2 {
  from {
    transform: rotateX(0deg);
  }
  to {
    transform: rotateX(90deg);
  }
}
@keyframes rotateChange3 {
  from {
    transform: rotateY(0deg);
  }
  to {
    transform: rotateY(90deg);
  }
}

/* =================================Gridy Gird====================================== */

.flex-container {
  margin: 10px;
  border: solid salmon 5px;
  border-radius: 15px;
  width: 500px;
  height: 500px;
  display: grid;
  /* repeats colum size 60px 3 times  */
  /*  / separtes column and row definitrion */
  /*  auto *flow creates required amount of rows with given 80px size  */
  grid: repeat(3, 1fr) / auto-flow 1fr;

  overflow: hidden;
}

.flex-item {
  border: 1px solid green;
  transition: all 2s;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 2s;
}

.flex-item:hover {
  width: 200px;
  height: 200px;
  background-color: green;
}

.flex-item:hover::after {
  /*  make it new line \n doesnt work  */

  content: "hello   you are hovering me ";
  display: block;
}

/* =================================Poorman Parallax====================================== */

.parallaxFrame {
  border: solid rgb(200, 44, 26) 5px;
  border-radius: 15px;
  width: 450px;
  height: 450px;
  display: flex;
  flex-direction: column;
}

/*  css + adjacent sibling combinator */
/*  css ~ adjacent sibling combinator but looser */

.positionTop:hover ~ .frontParal {
  transform: translateY(170px);
}
.positionMid:hover ~ .frontParal {
  transform: translate(20px, 150px);
}
.positionBot:hover ~ .frontParal {
  transform: translateY(130px);
}

.positionTop:hover ~ .midParal {
  transform: translateY(200px);
}
.positionMid:hover ~ .midParal {
  transform: translate(40px, 150px);
}
.positionBot:hover ~ .midParal {
  transform: translateY(100px);
}

.positionTop:hover ~ .backParal {
  transform: translateY(240px);
}
.positionMid:hover ~ .backParal {
  transform: translate(60px, 150px);
}
.positionBot:hover ~ .backParal {
  transform: translateY(60px);
}

.frontParal:hover {
  background-color: red;
}

.frontParal {
  z-index: 5;
  width: 350px;
  height: 150px;
  position: absolute;

  background-color: green;
  transition: all 1.5s ease;
  transform: translateY(150px);
}

.midParal {
  z-index: 4;
  width: 350px;
  height: 150px;
  position: absolute;

  transition: all 1s ease;
  background-color: greenyellow;
  transform: translateY(140px);
}

.backParal {
  z-index: 3;
  width: 350px;
  height: 150px;
  position: absolute;

  transition: all 0.5s ease;
  background-color: yellow;
  transform: translateY(130px);
}

.positionTop {
  z-index: 2;
  z-index: 12;
  width: 450px;
  height: 150px;
}

.positionMid {
  z-index: 12;
  width: 450px;
  height: 150px;
}

.positionBot {
  z-index: 12;
  width: 450px;
  height: 150px;
}

#wayarrow {
  width: 0px;
  height: 0px;
  visibility: hidden;
}

.wayarrowlabel {
  width: 450px;
  display: block;
  /*  display block makes block visible element like */
  height: 150px;
  background-color: #d8860b;
  clip-path: polygon(0 33%, 0 66%, 75% 66%, 75% 100%, 100% 55%, 75% 0, 75% 33%);
  transition: all 0.3s;
}

.arrowcontainer:hover .wayarrowlabel {
  clip-path: polygon(
    0 50%,
    25% 0,
    25% 33%,
    100% 33%,
    100% 66%,
    25% 66%,
    25% 100%
  );
}

#wayarrow:checked + .wayarrowlabel {
  background-color: red;
}

.wayarrowlabel:active {
  background-color: green;
}