@import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,opsz,wght@0,6..12,200..1000;1,6..12,200..1000&display=swap');

*{

box-sizing: border-box;

margin: 0 ;
padding: 0;
text-decoration: none;
scroll-behavior: smooth;
scrollbar-width: 2rem;
font-family: "Nunito Sans", sans-serif;

}
body{

    background-image:url("bg.png") ;
    background-repeat: repeat;
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
   

}
.s3{
height: 100%;
width: 100%;
padding: 10px 20%;
text-align: center;



   

}

.tag{


width: 100%;
justify-content: center;
display: flex;

}

.s3 h1{

font-size: 42px;
font-weight: 900;
margin: 20px 0 20px;


}


.img{

    height: 250px;


}



.s1{
    

padding:50px 12%;
width: 100%;
height: 100%;
justify-content: center;
display: flex;
text-align: center;
position: relative;



}
.s1 h1{

    font-weight: 900;
    font-size: 42px;

}




.s1 h2{
color: #E65C19;
text-transform: uppercase;
font-size: 20px;
font-weight: 800;
text-shadow: 2px 2px 4px rgba(226, 205, 16, 0.5);
}

.link{
width: 100%;
justify-content: center;
display: flex;




}


.link a{
border: solid 1px;
margin: 20px;
display: flex;
justify-content: center;
align-items: center;
width: 60px;
height: 50px;
border-radius: 15px;
color: white;
background-color: #ffd400;
transition: all .5s ease;
font-size: 25px;

}

.link a:hover {

    transform: translateY(-10px);
}


.ws1{
    
    width: 500px;
}

.grid{
display: grid;
text-align: center;
gap: 1rem;
grid-template-columns: repeat(3, 300px);
grid-template-rows: auto;
transition: 1s ;
grid-template-areas:
"one two three"



;


}
.s3 h2{

margin: 0 0 20px;
text-transform: uppercase;

color: #E65C19;
text-shadow: 2px 2px 4px rgba(226, 205, 16, 0.5);
font-weight: 800;



}
.joke{
   
    margin: 0 0 20px;
    text-transform: uppercase;
    
    color: #E65C19;
    text-shadow: 2px 2px 4px rgba(226, 205, 16, 0.5);
   font-size: 23px;
   font-weight: 800;
    
    
    }

.grid3{

    display: grid;
    text-align: center;
    gap: 1rem;
    grid-template-columns: repeat(2, 350px);
    grid-template-rows:auto;
    transition: 1s ;
    grid-template-areas:
    "one two "
    "three three"

    
    
    }
.grid3 p{


margin: 20px 0 20px;
color: white;
text-transform: uppercase;
font-weight: 700;

}
.grid2{

    display: grid;
    text-align: center;
    gap: 1rem;
    grid-template-columns: repeat(3, 250px);
    grid-template-rows:auto;
    transition: 1s ;
    grid-template-areas:
    "one two three"
    "four five six";
    
    
    }

    .grid2 img{

height: 140px;


    }
    .grid3 img{

        height: 140px;
        
        
            }


.one:nth-child(1){

    box-shadow: 0 8px 11px rgb(14 55 54/76%);
    grid-area: one;
    border-radius: 12px;
    background-color: #ffd400;
    border: white 2px solid;



}
.two:nth-child(2){

    box-shadow: 0 8px 11px rgb(14 55 54/76%);
    grid-area: two;

    border-radius: 12px;
    background-color: #ffd400;
    border: white 2px solid;

}
.three:nth-child(3){

    box-shadow: 0 8px 11px rgb(14 55 54/76%);
    grid-area: three;
    border-radius: 12px;
    background-color: #ffd400;
    border: white 2px solid;



}
.four:nth-child(4){

    box-shadow: 0 8px 11px rgb(14 55 54/76%);
    grid-area: four;
    border-radius: 12px;
    background-color: #ffd400;
    border: white 2px solid;



}
.five:nth-child(5){

    box-shadow: 0 8px 11px rgb(14 55 54/76%);
    grid-area: five;

    border-radius: 12px;
    background-color: #ffd400;
    border: white 2px solid;

}
.six:nth-child(6){

    box-shadow: 0 8px 11px rgb(14 55 54/76%);
    grid-area: six;
    border-radius: 12px;
    background-color: #ffd400;
    border: white 2px solid;



}
.seven:nth-child(7){

    box-shadow: 0 8px 11px rgb(14 55 54/76%);
    grid-area: seven;
    border-radius: 12px;
    background-color: #ffd400;
    border: white 2px solid;



}
.eight:nth-child(8){

    box-shadow: 0 8px 11px rgb(14 55 54/76%);
    grid-area: eight;

    border-radius: 12px;
    background-color: #ffd400;
    border: white 2px solid;

}
.nine:nth-child(9){

    box-shadow: 0 8px 11px rgb(14 55 54/76%);
    grid-area: nine;
    border-radius: 12px;
    background-color: #ffd400;
    border: white 2px solid;



}
.ten:nth-child(10){

    box-shadow: 0 8px 11px rgb(14 55 54/76%);
    grid-area: ten;
    border-radius: 12px;
    background-color: #ffd400;
    border: white 2px solid;



}
.eleven:nth-child(11){

    box-shadow: 0 8px 11px rgb(14 55 54/76%);
    grid-area: eleven;

    border-radius: 12px;
    background-color: #ffd400;
    border: white 2px solid;

}
.twelve:nth-child(12){

    box-shadow: 0 8px 11px rgb(14 55 54/76%);
    grid-area: twelve;
    border-radius: 12px;
    background-color: #ffd400;
    border: white 2px solid;



}

.s2{
    padding: 10px 10%;
    display: inline-flex;
    width: 100%;
    height: 100%;
    justify-content: center;
    
    position: relative;

}

.cc{

    width: 100%;

    display: flex;
    justify-content: center;
    align-items: center;




}
.inwrap{
    display: flex;
    justify-content: center;
    width: 100%;
    align-items: center;
    text-align: center;
    
    
    }

.imgs{
       
   height: 130px;
}


header{
   
    width: 100%;
    display: flex;
    position: fixed;
    padding: 10 10%;
}

.grid h1{

font-weight: 800;
box-shadow: 0 8px 11px rgba(230, 87, 21, 0.76);
color: white;
margin: 20px 0 20px;


}

.grid p{

    margin: 20px 0 0;
    font-weight: 700;





}
@media (max-width:700px){

    .joke{

font-size: 18px;


    }

    .grid3{

        
        grid-template-columns: repeat(1, auto);
        grid-template-rows:auto;
        transition: 1s ;
        grid-template-areas:
        "one"
        "two"
        "three";

    
        
        
        }

    .s3 h2{
        font-size: 19px;


    }


    .grid2{

    grid-template-columns: repeat(2, auto);
    grid-template-areas: 
    "one two"
    "three four"
    "five six"
    "seven eight"
    ;


}
.grid{

grid-template-areas: 
"one"
"two"
"three"
;
grid-template-columns: repeat(1, 300px);
grid-template-rows: auto;


}
#chyk-stands-out{


font-size: 17px;

}


}
.footer {

height: 100%;
width: 100%;
text-align: center;
padding: 10px 10%;



}

.grid3 h3{

    margin: 0 0 20px;
    font-weight: 800;


}
.footer p{

margin: 20px 0 20px;


}

#playPauseButton {
    position: fixed;
    bottom: 20px; /* Adjust the bottom distance */
    right: 20px; /* Adjust the right distance */
    z-index: 9999; /* Ensure it's above other content */
    background-color: transparent; /* Remove button background */
    border: none; /* Remove button border */
    cursor: pointer; /* Show pointer cursor on hover */
}

#playPauseIcon {
    width: 50px; /* Adjust icon size */
    height: 50px;
}

.language-selector {
    
    position: fixed;
    bottom: 20px;
    left: 20px;
    z-index: 1000;
    display: flex;
}

.language-selector select {
    padding: 8px;
    border-radius: 8px;
    border: 1px solid #ccc;
    background-color: #fff;
    font-size: 16px;
    appearance: none;
    cursor: pointer;
}

.language-selector label {
    margin-right: 8px;
    color: #fff;
    font-weight: bold;
    font-size: 16px;
}