/* "artsaz.studio" settings*/
body {
    background-color: #212121;
        display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 250px;
    cursor: url('kursor.png'), auto;
}

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);
     cursor: url('kursor.png'), auto;
}
h2 {
    font-family: 'Rubik Mono One', monospace;
    font-size: 28px;
  color: #c43613;
    text-align: center;
    margin: 5px 0;
    cursor: url('kursor.png'), auto;
}
.container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 0.3fr 0.8fr 0.15fr;
    gap: 5px;
    text-align: center;
    cursor: url('kursor.png'), auto;
}
h2.o-nas {
    grid-column: 1 / 2;
    grid-row: 1 / 2;
    margin: 0;       
    padding: 0; 
    cursor: url('kursor.png'), auto;
}

h2.jezyki {
    grid-column: 3 / 4;
    grid-row: 1 / 2;
    margin: 0;        
    padding: 0; 
     cursor: url('kursor.png'), auto;
}

h2.muzyka {
    grid-column: 1 / 2;
    grid-row: 3 / 4;
     cursor: url('kursor.png'), auto;
}

h2.robotyka {
    grid-column: 3 / 4;
    grid-row: 3 / 4;
     cursor: url('kursor.png'), auto;
}
/* Obrazek- przycisk O NAS */
.o-nas-wrapper {
    position: relative;
    display: flex;
    flex-direction: center;
    align-items: center; 
     cursor: url('kursor.png'), auto;
}
.o-nas {
    position: relative;
    z-index: 2;
     cursor: url('kursor.png'), auto;
}
.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); 
     cursor: url('kursor.png'), auto;
}
.jezyki-wrapper {
    position: relative; 
    display: flex;
    justify-content: center;
    align-items: center;
     cursor: url('kursor.png'), auto;
}

.jezyki {
    position: relative;
    z-index: 2; /* tekst nad obrazkiem */
     cursor: url('kursor.png'), auto;
}

.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;    
     cursor: url('kursor.png'), auto;
}

.muzyka {
    position: relative;
    z-index: 2;
     cursor: url('kursor.png'), auto;
}

.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;    
     cursor: url('kursor.png'), auto;
}

.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);
}



/* From Uiverse.io by Dennyhml */ 
.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);
}