html
{
scroll-behavior: smooth;
}

h1, h2, h3
{
text-shadow: -7px 5px 10px #00000052;
}

body
{
margin:0;
font-family: Roboto, sans-serif;
/*background:white;*/
}

@media screen and (min-width: 1024px) 
{/*komputer*/
#hello-left{width:60%;}
#hello-right{display:block;}
.p-kafelek{width:25%; height:380px;}
#kafelki-normal{display:block;}
#kafelki-lista{display:none;}
}

@media screen and (max-width: 1024px) 
{/*telefon*/
#hello-left{width:100%;}
#hello-right{display:none;}
.p-kafelek{width:50%; height:250px;}
#kafelki-normal{display:none;}
#kafelki-lista{display:block;}
}

@media screen and (min-width: 632px) 
{/*komputer*/
.gl-kw{float:left;}
}

@media screen and (max-width: 632px) 
{/*telefon*/
.gl-kw{float:unset}
}

.zoom
{
    opacity: 1;
    transform: scale(0.95,0.95);
    transition-duration: 250ms;
}
.zoom:hover
{
    transform: scale(1.05,1.05);
}

#main-screen
{
width: 100%;
height:1000px;
/*background-image:url('/img/AdobeStock_340908164.jpeg');*/
background-size:cover;
float:left;
}

#kafelki
{
float:left;
width:100%;
height:300px;
margin-top:10px;
background-color:#eeeeee55;
}

.shield
{
height:70%;
}

.p-kafelek
{
margin-top:40px;
font-size:40px;
font-weight:600;
float:left;
color:white;
text-align:center;
}

#hello
{
float:left;
width:100%;
height:auto;
}

#puste1
{
float:left;
width:100%;
height:auto;
overflow:hidden;
}

#projects
{
float:left;
width:100%;
height:auto;
}

#content
{
width:100%;
height:1000px;
padding-top:10px;
}

.ogranicznik
{
height:auto;
width:90%;
max-width: 1280px;
margin-left:auto;
margin-right:auto;
}

header
{
font-family: Roboto, sans-serif;
padding: 10px 60px;
}

#linki
{
float: right;
padding:5px;
}

#centered-name
{
/* nic */
}

#logo
{
font-family: Roboto, sans-serif;
font-weight: 300;
color: white;
margin: 0;
font-size: 24px;
margin-left: 0px;
}

#title
{
font-family: Roboto, sans-serif;
font-weight: 300;
color: white;
font-size: 44px;
  position:relative;
  top:200px;
}

.element
{
opacity: 1;
font-family: Roboto, sans-serif;
font-weight: 300;
color: white;
margin: 0;
font-size: 24px;
margin-left: 10px;
text-decoration:none;
}
.element:hover
{
opacity: 0.5;
cursor: pointer;
}

/* SCROLL-BAR
width */
::-webkit-scrollbar {
  width: 8px;
}

/* Track */
::-webkit-scrollbar-track {
  /*background: rgb(51,51,51); */
background: rgb(60,60,60);
}
 
/* Handle */
::-webkit-scrollbar-thumb {
  background: #bbb; 
border-radius:10px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #888; 
}