body {
    background-image: url(pattern5.png);
    /* background-repeat: no-repeat;
    background-attachment: fixed;*/
    /* background-size: 60px 60px;  */
}

.kolumny{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    padding: 30px;
    justify-content: center;
    
}
.boxes{
    font-family: 'Courier New', Courier, monospace;
    color: White;
      /* text-shadow: 
        -2px -2px 0 white,
        2px -2px 0 white,
        -2px 2px 0 white,
        2px 2px 0 white,
        0px -2px 0 white,
        0px 2px 0 white,
        -2px 0px 0 white,
        2px 0px 0 white; */

    background-color: #4BA3D7;
    /* background-color: rgb(247, 181, 219); */
    width: 75%;
    /* font-size: 1.5rem; */
    padding: 15px;
    border-radius: 10px;
    border-color: #f45ca8;
    border-width: 5px;
    border-style: solid;
    height: 460px;  
}
.aboutMe{
    justify-content: center;
    align-items: center;
    overflow: scroll; 
    overflow-x: hidden;   
       
    /* width: 400px;    */ 

}

.text{
    justify-content: center;
}

.sakura{
  width: 60%;
  /* height: auto; */
}

.main{

    

    /* display: flex; */
    justify-content: center;
    align-items: center;
    
}

.mainbar {
     background-color: #4BA3D7;
    /* background-color: rgb(247, 181, 219); */
    width: auto;
    /* font-size: 1.5rem; */
    padding: 10px;
    border-radius: 3px;
        border-color: #f45ca8;
        border-width: 5px;
        border-style: solid;
        display: flex;
        justify-content: left;
}

.link, .profile-link{
    background-color: #c06182;
    color: white;
    padding: 10px 20px;
    border-radius: 3px;
    border-color: #f45ca8;
    border-width: 5px;
    
}

.link:hover, .profile-link:hover{
    background-color: white;
    color: #c06182;
    padding: 10px 20px;
   
    border-radius: 3px;
    border-color: #f45ca8;
    border-width: 5px;

}

.linkbuttons{
    display: flex;
    /* justify-content: center; */
    align-items: center;
    gap: 20px;
    margin: 20px 20px;
}

footer{
    color:white;
}

a{
    color:white;
    text-decoration: none;
}
a:hover{
    color:grey;
    text-decoration: none;
}

.logo {
    width: auto;
    height: 25px;
}

.wpis{
    height: auto !important;

}

.screenshots{
    width:300px;
    height: auto;
}

.gallery{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
    justify-items: center;
}

/* firefox custom scrollbar*/
* {
    scrollbar-width: auto;                 
    scrollbar-color: #ffffff #c06182;      
}
/* chrome custom scrollbar */
:-webkit-scrollbar {
    width: 16px;                    
    height: 16px;
}

::-webkit-scrollbar-track {
    background: #c06182;            
}

::-webkit-scrollbar-thumb {
    background: #ffffff;           
    border-radius: 8px;
}

::-webkit-scrollbar-thumb:hover {
    background: #f0f0f0;            
}

@media (max-width: 768px) {
    body {
        background-image: url(pattern5.png);
        /* background-repeat: no-repeat;
        background-attachment: fixed;
        background-size: cover; */

         display: grid;
   
    }
    

    .kolumny {
    grid-template-columns: 1fr;
    gap: 20px;
    padding: 30px;
    }

    .linkbuttons {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 8px;
        margin: 20px 20px;
    }

    .boxes {
        width: 300px;
        height: auto;
    }
    .avatar{
        padding: 10px;
    }

    .aboutMe{
        overflow: hidden;
    }
}