body{
margin:0;
font-family: Courier New;
background:#f4f4f4;
padding:0;
}

.navBar{
display:flex;
justify-content:space-between;
align-items:center;
background:#e3097a;
padding:15px 22px;
color:white;
box-sizing:border-box;
}

.logo{
font-size:21px; font-weight:bold;
letter-spacing:1px;
}

.menuList{
list-style:none;
display:flex;
gap:20px;
margin:0;
padding:0;
}

.menuList li a{
color:white;
text-decoration:none;
font-size:17px;
padding:4px;
}

.menuList li a:hover{
color:#120409;
}

.burgerMenu{
display:none;
flex-direction:column;
cursor:pointer;
gap:4px;
}

.burgerMenu div{
width:27px;
height:3px;
background:white;
transition:.3s;
}

.hero{
position:relative;
width:100%;
}

.hero img{
width:100%;
height:340px;
object-fit:cover;
}

.siteTitle{
position:absolute;
left:30px;
bottom:25px;
color:white;
font-size:45px;
font-weight:bold;
text-shadow:0 0 8px black;
}

.columns{
display:flex;
gap:18px;
padding:20px;
}

.col{
background:white;
padding:12px;
border-radius:10px;
width:33%;
box-shadow:0 0 8px rgba(0,0,0,0.15);
overflow:hidden;
}

.col img{
width:100%;
height:170px;
object-fit:cover;
border-radius:6px;
margin-bottom:10px;
}

.col h2{
margin:0 0 8px 0;
font-size:20px;
color:#333;
}

.col p{
color:#444;
line-height:1.4;
font-size:15px;
}


/* АДАПТИВ */

@media(max-width:850px){
.columns{
flex-direction:column;
}
.col{
width:100%;
}
}

@media(max-width:760px){

.menuList{
display:none;
flex-direction:column;
background:#222;
position:absolute;
top:60px;
right:0;
padding:15px;
width:180px;
box-sizing:border-box;
}

.menuList.openMenu{
display:flex;
}

.burgerMenu{
display:flex;
}
}

.turn div:nth-child(1){
transform:rotate(45deg) translate(4px,5px);
}

.turn div:nth-child(2){
opacity:0;
}

.turn div:nth-child(3){
transform:rotate(-45deg) translate(5px,-5px);
}

.square{
width:50px;
height:50px;
background:white;
position:absolute;
top:40px;
right:40px;

animation-name: spin;
animation-duration:4s;
animation-timing-function:linear;
animation-iteration-count:infinite;
animation-direction:alternate;
}

@keyframes spin{
0%{transform:rotate(0deg);}
100%{transform:rotate(360deg);}
}

.inline-img{
display:flex;
gap:20px;
flex-wrap:wrap;
justify-content:center;
margin:30px;
}

.inline-img img{
width:220px;
height:160px;
object-fit:cover;
border-radius:10px;
transition:0.4s;
}

.inline-img img:hover{
transform:scale(1.15);
}

/* ВІДЕО */

.multimedia{
display:flex;
gap:20px;
justify-content:center;
flex-wrap:wrap;
margin:30px;
}

.multimedia-video video{
width:250px;
border-radius:10px;
}

.square{
width:50px;
height:50px;
background:white;
position:absolute;
top:40px;
right:40px;

animation-name:spin;
animation-duration:4s;
animation-timing-function:linear;
animation-iteration-count:infinite;
animation-direction:alternate;
}

@keyframes spin{
0%{transform:rotate(0deg);}
100%{transform:rotate(360deg);}
}

.interactive {
  padding: 40px;
  text-align: center;
}

.task {
  margin: 30px auto;
  padding: 20px;
  width: 300px;
  background: #fff0f5;
  border-radius: 15px;
}

.task input {
  margin: 5px;
  padding: 5px;
}

.task button {
  margin-top: 10px;
  padding: 7px 15px;
  background: pink;
  border: none;
  border-radius: 10px;
  cursor: pointer;
}

#slider {
  width: 100%;
  max-width: 250px;
  margin: 10px 0;
}