* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
:root {
  font-family: 'Poppins', sans-serif;
}
html,
body {
  margin: 0;
  min-height: 100vh;
  width: 100%;
}
.grid-container {
  padding: 16px;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: 660px 500px 300px 500px 500px 500px;
  grid-template-areas:
    "tasle tasle tasle lavelada lavelada lavelada"
    "ovdr ovdr spain spain color color"
    "ovdr ovdr cellular cellular cellular cellular"
    "logos logos cellular cellular cellular cellular"
    "abbreviations abbreviations purple purple canvas canvas"
    "python python python python python python";
  gap: 12px;
  width: 100%;
  background-color: #0f0f13;
}
.grid-item {
  border-radius: 10px;
  border-radius: 6px;
  position: relative;
}
.grid-item.ovdr {
  grid-area: ovdr;
}
.grid-item.ovdr iframe {
}
.grid-item.spain {
  grid-area: spain;
}
.grid-item.spain iframe {
  background-color: white;
}
.grid-item.color {
  grid-area: color;
}
.grid-item.color iframe {
}
.grid-item.cellular {
  grid-area: cellular;
}

.grid-item.logos {
  grid-area: logos;
}
.grid-item.logos iframe {
  background-color: unset;
}
.grid-item.abbreviations {
  grid-area: abbreviations;
}
.grid-item.abbreviations iframe {
}
.grid-item.purple {
  grid-area: purple;
}
.grid-item.purple iframe {
}
.grid-item.canvas {
  grid-area: canvas;
}
.grid-item.canvas iframe {
  background-color: unset;
}
.grid-item.tasle {
  grid-area: tasle;
}
.grid-item.tasle iframe {
  width: 100%;
  height: 640px;
  border: none;
}
.grid-item.lavelada {
  grid-area: lavelada;
}
.grid-item.lavelada iframe {
  width: 100%;
  height: 640px;
  border: none;
}
.grid-item.python {
  grid-area: python;
}
.python-project {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}
.python-project img {
  width: 48px;
  height: 48px;
  border-radius: 6px;
  object-fit: cover;
}
.python-info h3 {
  margin-bottom: 4px;
}
.python-info p {
  margin: 0;
}
.grid-item h3 {
  margin-bottom: 8px;
  color: #c0c0d0;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.grid-item iframe {
  width: 100%;
  height: 95%;
  border: none;
  border-radius: 6px;
  background-color: white;
  display: block;
}
.grid-item p {
  color: #888;
  margin: 6px 0;
  font-size: 0.85rem;
}
.grid-item a {
  color: #6c9fff;
  text-decoration: none;
}
.grid-item a:hover {
  text-decoration: underline;
}
.container {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  margin: 20px;
}
.button {
  color: #36395A;
  background-color: #e3e3e4;
  border-radius: 4px;
  border-width: 0;
  box-shadow: rgb(45 35 66 / 40%) 0 2px 4px, rgb(45 35 66 / 30%) 0 7px 13px -3px, #bcbccc 0 -3px 0 inset;
  padding: 11px 15px;
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 100px;
  transition: 0.2s;
}
.button:active {
  background-color: #666677;
  color: #ffffff;
  box-shadow: 0 15px 45px rgba(24, 249, 140, 0.034);
  transform: translateY(1px);
  transition: 0.2s;
}
.back {
  position: fixed;
  top: 40px;
  left: 30px;
  display: block;
  padding: 5px 5px !important;
  min-width: 0;
  font-size: 3rem;
  line-height: 1;
}

.main-title {
  color: #ececec;
  background-color: #0f0f13;
  padding: 50px;
  padding-bottom: 20px;
  margin: 0;
}

@media (max-width: 1100px) {
  .main-title {
    font-size: 3rem;
    padding: 20px;
    padding-bottom: 10px;
  }
  .grid-container {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    grid-template-areas:
      "tasle"
      "lavelada"
      "ovdr"
      "spain"
      "color"
      "cellular"
      "logos"
      "abbreviations"
      "purple"
      "canvas"
      "python";
  }
  .grid-item iframe {
    height: 500px;
  }
  .grid-item.tasle iframe,
  .grid-item.lavelada iframe {
    height: 600px;
  }
  .grid-item.ovdr iframe {
    height: 1500px;
  }
  .grid-item.cellular iframe {
    height: 1000px;
  }
  .grid-item h3 {
    font-size: 2rem;
  }
  .grid-item.spain iframe {
  }
  .grid-item a,
  .python-info p,
  .python-info h3 {
    font-size: 2rem;
  }
  .python-project img {
    width: 70px;
    height: 56px;
  }
}

.skip-btn {
  position: fixed;
  bottom: 30px;
  right: 30px;
  z-index: 9999;
  background: #2a2a3a;
  color: #6c9fff;
  border: 1px solid #3a3a5a;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  font-size: 1.5rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(0,0,0,0.4);
  transition: background 0.2s, transform 0.2s, opacity 0.3s;
  opacity: 1;
}
.skip-btn:hover {
  background: #3a3a4a;
  transform: scale(1.1);
}