@import url('https://fonts.googleapis.com/css2?family=Crimson+Text:ital,wght@0,400;0,600;0,700;1,600&family=Handjet:wght@300;400&family=Montserrat:ital,wght@0,100;0,200;1,100&family=Outfit:wght@300;500&display=swap');
*{
    box-sizing: border-box;
    font-family: Outfit;
}
html{
    min-height: 100vh;
}
body{
    min-height: 100vh;
    margin: 0;
}
.wrapper{
    min-height: 100vh;
    width: 100;
    background-color: white;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.kapcsfent{
    float: right;
}

/* Header style */
header{
    height: 250px;
    width: 100%;
    background-image: linear-gradient(to right, white 20%, rgba(209, 196, 76, 1));
    display: flex;
    justify-content: space-between;
    padding: 1% 5% 1% 5%;
}
header .kapcsfent p{
    font-size: 170%;
    font-weight: 500;
    line-height: 120%;
    padding: 0;

}
header .kapcsfent{
    display: flex;
    align-items: center;
}
header .logo{
    display: flex;
    align-items: center;
}
header .logo img{
    height: 100%;
    position: relative;
}

/* Main content container style */
main{
    margin: 2% 30% 2% 30%;
    font-weight: 300;
    height: 100%;
}
.gridcontainer{
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
    grid-template-areas: 
        "header header"
        "text1 image1"
        "image2 text2"
        "text3 image3";
    row-gap: 2%;
    column-gap: 2%;
    /* font-size: 300%; */
    max-height: 100%;
}
main .gridcontainer .gridtext{
    line-height: 200%;
}
main .gridcontainer .gridimage{
    position: relative;
    max-width:100%;
    display: block;
}
.item1{
    grid-area: header;
    border-bottom: 2px solid;
}
.item2{
    grid-area: text1;
}
.item3{
    grid-area: image1;
    max-height: 100%;
}
.item4{
    grid-area: text2;
}
.item4 p{
    text-align: right;
}
.item5{
    grid-area: image2;
    max-height: 70%;
    box-shadow: 2px 2px 10px;
}
.item6{
    grid-area: text3;
}
.item7{
    grid-area: image3;
    max-height: 70%;
    box-shadow: 2px 2px 10px;
}


/*Footer*/
footer{
    background-color: rgba(209, 196, 76, 1);
}
footer .kapcsalul{
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    font-size: 120%;
}

/* Repsonsive rules */

@media screen and (max-width: 1290px) and (min-width: 1001px){
    .gridcontainer{
        font-size: 140%;
    }
    .item1{
        font-size: 100%;
    }
}

@media screen and (max-width: 1000px) and (min-width: 501px){
    main{
        margin: 2% 10% 2% 10%;
        font-weight: 300;
        height: 100%;
    }
    header .logo img{
        height: 70%;
        width: 70%;
    }
    header .kapcsfent p{
        font-size: 120%;
        font-weight: 500;
        line-height: 120%;
    }
    footer .kapcsalul p{
        display: flex;
        flex-direction: row;
        justify-content: space-around; 
        font-size: 100%;
    }
}

@media screen and (max-width: 500px){
    main{
        margin: 2% 10% 2% 10%;
        font-weight: 300;
        height: 100%;
    }
    header .logo img{
        height: 70%;
        width: 70%;
    }
    header .kapcsfent p{
        font-size: 80%;
        font-weight: 500;
        line-height: 120%;
    }
    footer .kapcsalul p{
        display: flex;
        flex-direction: row;
        justify-content: space-around; 
        font-size: 60%;
    }
    header{
        height: 120px;
    }
}