body {
    background-color: #212121;
    font-family: 'Rubik Mono One', monospace;
    cursor: url('kursor.png'), auto;
}
.fake-body {
    background-color: #212121;
        display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 250px;
}

h1 {
        margin: 0;     
    padding: 0;     
    font-family: 'Rubik Mono One', monospace;
    font-size: 67px;
    color: #ffffff;  
    text-align: center;
    margin: 0;
      grid-column: 2 / 3;
    grid-row: 2 / 3;
     transform: translateX(-170px);
}
h2 {
    font-family: 'Rubik Mono One', monospace;
    font-size: 28px;
  color: #c43613;
    text-align: center;
    margin: 5px 0;
}
.container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 0.3fr 0.8fr 0.15fr;
    gap: 5px;
    text-align: center;
}
h2.o-nas {
    grid-column: 1 / 2;
    grid-row: 1 / 2;
    margin: 0;       
    padding: 0; 
}

h2.jezyki {
    grid-column: 3 / 4;
    grid-row: 1 / 2;
    margin: 0;        
    padding: 0; 
}

h2.muzyka {
    grid-column: 1 / 2;
    grid-row: 3 / 4;
}

h2.robotyka {
    grid-column: 3 / 4;
    grid-row: 3 / 4;
}

.o-nas-wrapper {
    position: relative;
    display: flex;
    flex-direction: center;
    align-items: center; 
}
.o-nas {
    position: relative;
    z-index: 2;
}
.onas-btn {
    display: absolute;
    top: 0;
    transform: translateY(20px);
    z-index: 1;   
    width: 500px;            
    cursor: pointer;         
    transition: transform 0.2s; 
    cursor: url('kursor.png'), auto;
}
.onas-btn:hover {
    transform: translateY(20px) scale(1.1); 
}
.jezyki-wrapper {
    position: relative; 
    display: flex;
    justify-content: center;
    align-items: center;
}

.jezyki {
    position: relative;
    z-index: 2; 
}

.jezyki-btn {
    position: absolute;
    top: 50%;                     
    left: 100%;                 
    transform: translate(-300px, -50%); 
    width: 500px;                 
    z-index: 1;
    cursor: pointer;
    transition: transform 0.2s;
    cursor: url('kursor.png'), auto;
}

.jezyki-btn:hover {
    transform: translate(-300px, -50%) scale(1.1);
}
.muzyka-wrapper {
    position: relative;
    text-align: center;
    grid-column: 1 / 2; 
    grid-row: 3 / 4;    
}

.muzyka {
    position: relative;
    z-index: 2;
}

.muzyka-btn {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -250px); 
    width: 500px; 
    z-index: 1;
    cursor: pointer;
    transition: transform 0.2s;
    cursor: url('kursor.png'), auto;
}

.muzyka-btn:hover {
    transform: translate(-50%, -250px) scale(1.1);
}

.robotyka-wrapper {
    position: relative;
    text-align: center;
    grid-column: 3 / 4; 
    grid-row: 3 / 4;    
}

.robotyka {
    position: relative;
    z-index: 2;
}

.robotyka-btn {
    position: absolute;
    top: 0;
    left: 50%;                     
    transform: translate(-70%, -250px); 
    width: 500px; 
    z-index: 1;
    cursor: pointer;
    transition: transform 0.2s;
    cursor: url('kursor.png'), auto;
}

.robotyka-btn:hover {
    transform: translate(-70%, -250px) scale(1.1);
}
.jeyki-section {
    max-width: 800px;         
    margin: 50px auto 0 auto; 
    text-align: left;         
    color: #ffffff;          
    line-height: 1.6;         
    padding-bottom: 100px;
}



.jezyki-section h3 {
       font-family: 'TT Chocolate', sans-serif;
    font-size: 46px;
    color: #ffffff;
    margin-bottom: 20px;
    text-align: center;
}

.jezyki-section h4 {
      font-family: 'TT Chocolate', sans-serif;
    font-size: 20px;
    line-height: 1.6;
    color: #ffffff;
    text-align: right;
}
.jezyki-section h5 {
      font-family: 'TT Chocolate', sans-serif;
    font-size: 20px;
    line-height: 1.6;
    color: #ffffff;
    text-align: left;
}
.jezyki-section h6 {
      font-family: 'TT Chocolate', sans-serif;
    font-size: 20px;
    line-height: 1.6;
    color: #ffffff;
    text-align: left;
}
.h6-with-img {
    display: flex;
    justify-content: space-between; 
    align-items: center;           
    margin-top: 20px;
}

.h6-with-img h6 {
    margin: 0;  
    font-family: 'TT Chocolate', sans-serif;
    font-size: 20px;
    line-height: 1.6;
    color: #ffffff;
}

.h6-with-img .korea-img {
    max-width: 150px; 
    height: auto;
}
.numer-img-wrapper {
    text-align: center; 
    margin-top: 5px;    
}

.numer-img {
    max-width: 900px;  
    height: auto;
}
.logo a {
    color: #ffffff;
    text-decoration: none;
    cursor: url('kursor.png'), auto;
    transition: transform 0.2s;
}

.logo a:hover {
    transform: scale(1.1); 
}





.bubble {
  position: absolute;
  border-radius: 50%;
  animation: animate_4010 8s ease-in-out infinite;
}

@keyframes animate_4010 {
  0%,100% {
    transform: translateY(-20px);
  }
  50% {
    transform: translateY(20px);
  }
}

.bubble::before {
  content: '';
  position: absolute;
  top: 25%;
  left: 25%;
  width: 30%;
  height: 30%;
  border-radius: 50%;
  background: #fff;
  filter: blur(2px);
}

.bubble::after {
  content: '';
  position: absolute;
  top: 40%;
  left: 40%;
  width: 20%;
  height: 20%;
  border-radius: 50%;
  background: #fff;
  filter: blur(2px);
}

.bubble span {
  position: absolute;
  border-radius: 50%;
}

.bubble span:nth-child(1) {
  inset: 10px;
  border-left: 15px solid #0fb4ff;
  filter: blur(8px);
}

.bubble span:nth-child(2) {
  inset: 10px;
  border-right: 15px solid #ff4484;
  filter: blur(8px);
}

.bubble span:nth-child(3) {
  inset: 10px;
  border-top: 15px solid #ffeb3b;
  filter: blur(8px);
}

.bubble span:nth-child(4) {
  inset: 30px;
  border-left: 15px solid #ff4484;
  filter: blur(12px);
}

.bubble span:nth-child(5) {
  inset: 10px;
  border-bottom: 10px solid #fff;
  filter: blur(8px);
  transform: rotate(330deg);
}