@import url('https://fonts.googleapis.com/css2?family=Playwrite+BE+VLG:wght@100..400&display=swap');

body {
    font-family: "Afacad Flux", Arial;
    font-weight: 300;
    margin:0;
    padding: 0;
    background-color: #222;
}

.menucontainer {
    overflow: hidden;
    position: fixed;
    top: 20px;
    width: 100%;
    margin: 0;
    z-index: 1;
}

/*
.menucontainer.scroll {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(5px);
}
*/
    .menu {
        display: grid;
        grid-template-columns: 1fr 1fr 6fr 1fr 1fr;
        max-width: 1200px;
        margin: 0 auto;
        padding: 0;
    }

    .logo {
        width: 100px;
        grid-column: 2;
    }

    .links {
        grid-column:3;
        margin: 0;
        padding: 0%;
        text-align: center;
        align-content: center;
    }

    .links a {
        padding: 0 4%;
        text-decoration: none;
        color: #fff;
    }

    .links a:hover {
        color: #9cff00;
    }


.grid-container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr ;
    margin: auto;
    gap: 0;
}

    .grid-splash {
        position: relative;
        grid-column: 1 / -1;
        grid-row:  2;
        align-items: center;
        text-align: center;
        margin:0 0 5%;
        padding: 0;
        background: url(/assets/img/cpn0.jpg);
        background-position: top;
        height: 750px;
    }

        #tagline {
            position:absolute;
            width: 100%;
            top: 35%;
            left: 0;
            transform: translate(0%, 0%);
            margin:0;
            padding: 0;
        }
        
        #tag1 {
            margin: 0;
            padding: 2% 0;
            font-family: "Playwrite BE VLG", "Afacad Flux";
            font-size: 50px;
            font-weight: 400;
            text-shadow: 1px 1px #333;
            color:#fff;
        }

        #tag2 {
            margin: 0;
            padding: 0;
            font-size: 24px;
            text-shadow: 1px 1px #333;
            color:#fff;
        }

        .bookbutton {
            background-color: #cdff00;
            font-size: 15px;
            font-weight: 500;
            border: 5px #000;
            border-radius: 15px;
            margin:1% 0 0;
            padding: 0.6em 1.7em;
        }

            .grid-splash button:hover {
                background: #657e00;
                box-shadow: 0 0 3px 3px #ffffff80;
                color: #000;
            }

    .grid-downarrow {
        grid-column: 1 / -1;
        grid-row: 3;
        height: 80px;
        margin: 0 auto 5%;
        padding: 0;
        color: aqua;
        fill: #cdff00;
    }

    .grid-welcome {
        grid-column: 2 / 6;
        grid-row: 4;
        align-content: center;
        text-align: center;
        margin: 0;
        padding: 0;
    }

        .grid-welcome h2 {
            font-family: "Playwrite BE VLG";
            font-weight: 400;
            font-size: 40px;
            margin: 0;
            padding: 0;
            background: -webkit-linear-gradient(right, #cdff00, #e3ff71ff, #cdff00);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }

        .grid-welcome p {
            font-weight: 300;
            font-size: 25px;
            color: #eee;
            margin: 3% 0 5% 0;
            padding: 0 10%;
        }

.grid-fabrics, .grid-experience, .grid-consultation, .grid-installation {
    position: relative;
    grid-column: 2/4;
    grid-row: 5;
    align-content: top;
    text-align: center;
    /*border-top: 1px solid #eee;*/
    padding: 0;
    margin: 5% 0 0;
    color: #eee;
}

.grid-experience {
    grid-column: 4/6;
    grid-row: 5;
}

.grid-installation {
    grid-column: 2/4;
    grid-row: 6;
}

.grid-consultation {
    grid-column: 4/6;
    grid-row: 6;
}

.icons {
    position:absolute;
    top: 15%;
    left: 1%;
    width: 25%;
    margin: 0;
    padding: 0;
    height: 60px;
    fill: #cdff00;
}

h3 {
    display: inline-block;
    width: 70%;
    font-size: 35px;
    font-weight: 400;
    text-align: left;
    background: -webkit-linear-gradient(right, #cdff00, #e3ff71ff, #cdff00);
                -webkit-background-clip: text;
                -webkit-text-fill-color: transparent;
    margin: 0 0 0 27%;
    padding: 5% 3% 0 0;
}

p.cards {
    display:flex;
    width: 70%;
    font-weight: 300;
    text-align: left;
    margin: 0 0 0 27%;
    padding: 0 3% 5% 0;
}

@media only screen and (max-width: 1050px) {
    #tag1 { font-size: 45px; }
    #tag2 { font-size:20px; }
    .grid-welcome { grid-column: 1 / -1; }
    .grid-welcome h2 { font-size: 30px; padding: 0 5%; }
    .grid-welcome p { font-size: 20px; padding: 0 10%; }
    .grid-fabrics { grid-column: 2/6; }
    .grid-experience { grid-column: 2/6; grid-row: 6; }
    .grid-installation { grid-column: 2/6; grid-row: 7; }
    .grid-consultation { grid-column: 2/6; grid-row: 8; }
    .icons { top: 25%; }
}

@media only screen and (max-width: 800px) {
    #tag1 {font-size: 35px; }
    #tag2 {font-size:16px; }
}


@media only screen and (max-width: 660px) {
    #tag1 { font-size: 30px; }
    #tag2 { font-size: 15px; }
}

@media only screen and (max-width: 550px) {
    #tag1 { font-size: 20px; }
    #tag2 { font-size: 13px; }
}