@import url('https://fonts.googleapis.com/css2?family=Blinker:wght@100;200;300;400;600;700;800;900&family=Gajraj+One&display=swap');
:root{
    --kolor-glowny: #9E1316;
    --kolor-akcent: #54554D;
    --kolor-ciemny: #1E1E1E;
    --kolor-ciemny-transparent: #1E1E1Edd;
    --kolor-jasny: #E7DCC6;
    --kolor-bialy: #F0EDE6;
}
*{
   box-sizing: border-box;
}
html{
    scroll-behavior: smooth;
}
body{
    font-family: "Blinker", sans-serif;
}
h1, h2{
    text-align: center;
    font-family: "Gajraj One";
    font-size: 120.071px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    text-transform: uppercase;
}
h3{
    color: var(--kolor-glowny);
    text-align: center;
    font-family: Blinker;
    font-size: 48px;
    font-style: normal;
    font-weight: 800;
    line-height: normal;
}
h4{
    text-align: right;
    font-family: Blinker;
    font-size: 40px;
    font-style: normal;
    font-weight: 800;
    line-height: normal;
    color: #9E1316;
}
h5{
    color: #9E1316;
    text-align: center;
    font-family: "Gajraj One";
    font-size: 64px;
    font-style: normal;
    font-weight: 400;
    line-height: 120%; 
    text-transform: uppercase;
}
h6{
    color: var(--kolor-bialy);
    font-family: "Gajraj One";
    font-size: 32px;
    font-style: normal;
    font-weight: 400;
    line-height: 120%;
    text-transform: uppercase;
}



p{
    color: var(--kolor-ciemny);
    font-family: Blinker;
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 120%;
}

a{
    text-decoration: none;
    
}

section{
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.zawartosc{
    max-width: 1400px;
    width: 100%;
    /* background-color: green; */
    padding: 20px;
}

#Strona-Glowna{
    min-height: 80vh;
    background: url(../img/spodek.png) no-repeat right 10vw center;
    background-size: cover;
    background-color: var(--kolor-glowny);
}
#Strona-Glowna a{
    color: var(--kolor-bialy);
}
#Strona-Glowna .zawartosc{
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 40px;
}
#Strona-Glowna nav ol{
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 35px;
    /* background-color: green; */
}
#Strona-Glowna nav ol li{
    text-align: right;
    -webkit-text-stroke-width: 2px;
    -webkit-text-stroke-color: #54554D;
    font-size: 30px;
    font-weight: 700;
    line-height: normal;
    text-transform: capitalize;
}
#Strona-Glowna a:hover{
    color: var(--kolor-ciemny);
   
}
.image-box{
   /* overflow: hidden;*/

}
.image-box img{
    transition: transform 0.3 ease;
    
}
.image-box:hover img{
    transform: scale(1.2);
}
h1{
    color: var(--kolor-jasny);
    background-color: var(--kolor-ciemny);
    font-size: clamp(40px, 8vw, 120px);
}
#bloki{
    background-color: var(--kolor-jasny);
    color: var(--kolor-glowny);
}

h1 span{
    color: var(--kolor-glowny);
}
.color-change{
    animation: color-change 3s infinite;
}

@keyframes color-change{
    0% {color: var(--kolor-akcent);}
    32% {color: var(--kolor-akcent);}
    33% {color: var(--kolor-glowny);}
    65% {color: var(--kolor-glowny);}
    66% {color: var(--kolor-jasny);}
    100% {color: var(--kolor-jasny);}
}

#Historia{
    min-height: 90vh;
    background: url(../img/osiedlezazelaznabrama.png);
    background-size: cover;
    flex-direction: row;
    align-items: stretch;
}

#Historia .zawartosc{
    /* background-color: green; */
    position: relative;/*ważne by elementy na absolute zawarte w nim ustawialy sie do niego*/
    min-height: 100%;
    padding-left: 140px;
    display: flex;
    align-items: center;
    justify-content: center;

}

#Historia h1{
    /* transform: rotate(0deg) translateY(-125%); */
    background-color: var(--kolor-glowny);
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 14vh;
    line-height: 70%;
    font-size: 11vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

#Historia article{
    max-width: 80%;
}
#Historia article h3{
    margin: 5vh 0;
}

#lewo-gora{max-width: 60%;}
#prawa-dol{
    justify-self: flex-end;
    max-width: 40%;
}

#Charakterystyka{
    background-color: var(--kolor-glowny);
    position: relative;
    min-height: calc(90vh - 100px);
    scroll-margin-top: 100px;
}
#Charakterystyka .zawartosc{
    
    max-width: 100%;
}
#Charakterystyka img{
    width: 100%;
    position: absolute;
    bottom: 0;
}

#Bloki-Mieszkalne{
    background-color: var(--kolor-ciemny);
    z-index: 99999;
    position: relative;
    min-height: 90vh;
    flex-direction: row;
    align-items: stretch;
}

#Bloki-Mieszkalne .zawartosc{
    min-height: 100%;  
    display: flex;
    align-items: center;
    justify-content: center;
}
#Bloki-Mieszkalne p{
    color: #fff;
}
#lewogora{
    max-width: 60%;
    
}
#prawodol{
    justify-self: flex-end;
    max-width: 50%;
}
#Bloki-Mieszkalne article h3{
    margin: 5vh 0;
}
/*.typewriter h3{
    overflow: hidden;
    border-right: .15em solid #9E1316;
    white-space: nowrap;
    margin: 0 auto;
    letter-spacing: 0;
    width: 0;
    animation: typing 6s steps(106, end) forwards, blink-caret .75s step-end infinite;

}
@keyframes typing{
    from{width: 0}
    to {width: 106ch;}
}
@keyframes blink-caret{
    from, to{ border-color: transparent}
    50% {border-color: orange}
} */

#Bloki-Mieszkalne article h4{
    margin: 5vh 0;
}
#Bloki-Mieszkalne img{
    margin-left: 10vh;
    border: 3px solid var(--kolor-jasny);
}

#Wiecej{
    background: url(../img/merkury.png) no-repeat left;
    background-color: var(--kolor-glowny);
    background-size: cover;
    min-height: 80vh;
    display: flex;
    flex-direction: row;
    
    
}
#Wiecej .zawartosc{
    display: flex;
    flex-direction: row;
    
    justify-content: flex-end;
}

#Wiecej article{
    background-color: var(--kolor-ciemny-transparent) ;
    max-width: 700px;
    
    
}
#Wiecej form{
    align-items: center;
    margin-top: 80px;
}
#Wiecej .zawartosc form > p{
    color: var(--kolor-bialy);
    margin: 5vh 5vw;
    text-align: center;
}
#Wiecej form main input{        
    display: block;
    width: 70%;
    color: var(--kolor-akcent);
    background-color: var(--kolor-bialy);
    font-family: Blinker;
    font-size: 18px;
    margin: auto;
    margin-top: 3rem;
    margin-bottom: 1rem;
    border: 0;
    border-color: var(--kolor-bialy);
    padding: 14px;
}
input:focus{
    outline: 0;
}
#Wiecej form footer input[type=submit]{
    font-family: Blinker;
    font-size: 20px;
    font-weight: 600;
    padding: 5px 17px;
    justify-content: center;
    align-items: center;
    background-color: var(--kolor-glowny);
    color: var(--kolor-bialy);
    border: 0;
    margin: auto;
    display: block;
}

#Wiecej form footer input[type=submit]:hover{
    background-color: var(--kolor-bialy);
    color: var(--kolor-glowny);

}
#Wiecej img{
    height: auto;
    max-width: 100%;
}
#Wiecej .ok{
    display: flex;
    flex-direction: row;
    gap: 1vw;
    margin-top: 3rem;
    margin-bottom: 80px;
    justify-content: center;

}
#Wiecej .ok p{
    color: var(--kolor-bialy);
}
#stopka{
    background-color: var(--kolor-ciemny);
    min-height: 40vh;
}

#stopka .zawartosc{
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    color: var(--kolor-bialy);
    
}

#stopka ol{
    text-align: center;
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 34px;
    
}
#stopka a{
    color: var(--kolor-bialy);
}
#stopka a:hover{
    color: var(--kolor-glowny);
}
#stopka p{
    margin-top: 10vh;
    color: var(--kolor-akcent);
    font-size: 12px;
}