@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap");

body {
  font-family: "Poppins", sans-serif;
}

* {
  padding: 0;
  margin: 0;
}

.heading1 {
  padding: 10px;
  margin-bottom: 10px;
  font-size: 30px;
  font-weight: 900;
  background-color: yellow;
}

.topic {
  margin: 10px;
  padding: 10px;
  color: gray;
  font-size: large;
  font-weight: bolder;
  width: fit-content;
  border: 1px solid pink;
  background-image: repeating-linear-gradient(
    45deg,
    white 0px,
    pink 2px,
    white 3px
  );
}

.sub {
  padding: 10px;
  font-size: large;
  text-decoration: underline;
}

.aspect-video {
  aspect-ratio: 16/9;
}
.aspect-square {
  aspect-ratio: 1/1;
}

img {
  border-radius: 20px;
  margin: 10px;
  box-shadow: 2px 2px 10px 2px gray;
}

.column-3 {
  columns: 3;
}
.column-2 {
  columns: 2;
}

p {
  margin: 10px;
}

.box-deco-slice {
  box-decoration-break: slice;
}
.box-deco-clone {
  box-decoration-break: clone;
}
.styled-text {
  background: linear-gradient(to right, #ff01b3, #0400ff);
  color: white;
  font-size: larger;
  font-weight: bold;
}

.box-size-content {
  box-sizing: content-box;
}
.box-size-border {
  box-sizing: border-box;
}

.inline {
  display: inline;
}
.inline-block {
  display: inline-block;
}
.block {
  display: block;
}
.flex {
  display: flex;
  gap: 10px;
}
.items-center {
  align-items: center;
}

.inline-flex {
  display: inline-flex;
}

.items-baseline {
  align-items: baseline;
}

.grid {
  display: grid;
  gap: 4px;
}

.grid-cols-2 {
  grid-template-columns: repeat(2, 1fr);
}

.grid-cols-3 {
  grid-template-columns: repeat(3, 1fr);
}

.grid-rows-3 {
  grid-template-rows: repeat(3, 1fr);
}

.inline-grid {
  display: inline-grid;
  margin: 10px;
}

.contents {
  display: contents;
}

.table {
  display: table;
}
.inline-table {
  display: inline-table;
}
.table-caption {
  display: table-caption;
}
.table-cell {
  display: table-cell;
}
.table-column {
  display: table-column;
}
.table-column-group {
  display: table-column-group;
}
.table-footer-group {
  display: table-footer-group;
}
.table-header-group {
  display: table-header-group;
}
.table-row-group {
  display: table-row-group;
}
.table-row {
  display: table-row;
}

.float-right {
  float: right;
}
.float-left {
  float: left;
}

.isolation {
  isolation: isolate;
  background-color: yellow;
}
.isolation::after {
  content: "";
  display: block;
  background-color: red;
  height: 10px;
}

.container {
  margin: 10px;
  width: 300px;
  height: 400px;
  overflow: hidden;
  resize: both;
  border: 2px solid black;
}

.draggable {
  width: 800px; /* Make sure the image container is bigger than the visible area */
  height: 600px;
  cursor: grab;
  position: relative;
}

.draggable img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.object-bottom {
  object-position: bottom;
}

.container2 {
  position: relative;
  width: 90%;
  max-width: 600px;
  height: 500px;
  border: 2px solid black;
  margin: 20px auto;
  padding: 10px;
}

.box {
  padding: 10px;
  color: white;
  font-weight: bold;
  text-align: center;
  width: 150px;
  height: 50px;
}

/* STATIC */
.static {
  position: static;
  background: blue;
}

/* RELATIVE */
.relative {
  position: relative;
  left: 20px;
  top: 20px;
  background: green;
}

/* ABSOLUTE */
.absolute {
  position: absolute;
  bottom: 10px;
  right: 10px;
  background: red;
}

/* FIXED */
.fixed {
  position: fixed;
  top: 10px;
  right: 10px;
  background: purple;
}

/* STICKY */
.sticky {
  position: sticky;
  top: 0;
  background: orange;
}

.container3 {
  position: relative;
  width: 400px;
  height: 400px;
  border: 2px solid black;
  background: #f5f5f5;
  display: flex;
  justify-content: center;
  align-items: center;
}

.box2 {
  position: absolute;
  width: 100px;
  height: 100px;
  color: white;
  text-align: center;
  line-height: 100px;
  font-weight: bold;
}

.inset-full {
  inset: 100%;
  background: red;
}

.inset-auto {
  inset: auto;
  background: blue;
}

.inset-negative {
  inset: -50px;
  background: green;
}

.inset-custom {
  --custom-spacing: 20px;
  inset: var(--custom-spacing);
  background: orange;
}

/* Top, Right, Bottom, Left */
.top-full {
  top: 100%;
  background: purple;
}

.right-50 {
  right: 50px;
  background: cyan;
}

.bottom-0 {
  bottom: 0;
  background: pink;
}

.left-25 {
  left: 25px;
  background: brown;
}

/* X and Y Axes */
.inset-x-full {
  inset-inline: 100%;
  background: violet;
}

.inset-y-50 {
  inset-block: 50px;
  background: lime;
}

table {
  width: 100%;
  border-collapse: collapse;
}
th,
td {
  border: 1px solid black;
  padding: 8px;
  text-align: left;
}
.hidden {
  visibility: hidden; /* Space is still reserved */
}
.collapse {
  visibility: collapse; /* In tables, behaves like display: none; */
}