*, ::after, ::before {
    box-sizing: border-box
}

* {
    margin: 0
}

@media (prefers-reduced-motion:no-preference) {
    html {
        interpolate-size: allow-keywords
    }
}

body {
    line-height: 1.5;
    -webkit-font-smoothing: antialiased
}

canvas, img, picture, svg, video {
    display: block;
    max-width: 100%
}

button, input, select, textarea {
    font: inherit
}

h1, h2, h3, h4, h5, h6, p {
    overflow-wrap: break-word
}

p {
    text-wrap: pretty
}

h1, h2, h3, h4, h5, h6 {
    text-wrap: balance
}

#__next, #root {
    isolation: isolate
}

svg{
    width: 1.2em;
    height: 1.2em;
    fill: currentColor;
}

:root{
    --background: #000;
    --foreground: rgba(29, 34, 31, 0.55);
    --color-primary: #cef3cb;
    --color-secondary: #85ac82;
    
    --gap: 2rem;
    --padding: 1.5rem 2rem;
    
    font-size: 62.5%;
    font-family: 'Space Mono', sans-serif;
    font-weight: 500;
    font-display: block;
    
}

html{
}

body{
    color: var(--color-primary);
    background: var(--background);
    font-size: 1.6rem;
}

.wrap{
    max-width: 1400px;
    padding: 0 var(--gap);
    margin: 0 auto;
}

.btn{
    border:1px solid var(--color-primary);
    padding: var(--padding);
    text-decoration: none;
    color: var(--color-primary);
    font-size: 1.6rem;
    font-weight: bold;
    display: flex;
    flex-direction: row;
    gap: var(--gap);
    align-items: center;
    width: max-content;
    text-transform: uppercase;
    transition: all .2s ease-in-out;
    
    & svg{
        transition: all .2s ease-in-out;
    }
    
    &:hover{
        background: var(--color-primary);
        color: var(--background);
        
        & svg{
            transform: scale(1.3);
        }
    }
}

header{
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    position: relative;
    gap:var(--gap);
    margin-top: var(--gap);
    align-items: center;
    background: var(--foreground);
    padding: var(--padding);
}

header .logo{
    max-height: 4rem;
    display: flex;
    flex-direction: row;
    width: min-content;
    gap: 1.5rem;
    font-weight: bold;
    font-size: 2.4rem;
    margin-left: 2rem;
    color: var(--color-primary);
    text-decoration: none;
    transition: all .1s ease-in-out;
    &:hover{
        color: var(--color-secondary);
    }
    & img{
        max-height: 4rem;
        max-width: 4rem;
    }
}

header nav{
    display: flex;
    flex-direction: row;
    gap:var(--gap);
}

header nav .item{
    display: flex;
    flex-direction: column;
    gap:.5rem;
    font-size: 1.3rem;
    color: var(--color-secondary);
    position: relative;
    padding: var(--padding);
    & span{
        font-size: 1.4rem;
        font-weight: bold;
    }
    
    &.button{
        border:1px solid var(--color-primary);
        text-decoration: none;
        padding-right: calc(var(--gap) * 2 + 4rem);
        position: relative;
        transition: all .1s ease-in-out;
        
        & svg{
            width: 4rem;
            height: 4rem;
            top: 50%;
            transform: translateY(-50%);
            position: absolute;
            right: var(--gap);
        }
        
        &:hover{
            background: var(--color-primary);
            color: var(--background);
        }
    }
    
    &:not(.button)::before,
    &:not(.button)::after{
        content:"";
        position: absolute;
        width: 2rem;
        height: 2rem;
        border:1px solid var(--color-primary);
    }
    
    &:not(.button)::before{
        top:0;
        left:0;
        border-bottom: none;
        border-right: none;
    }
    
    &:not(.button)::after{
        bottom:0;
        right:0;
        border-top: none;
        border-left: none;
    }
}

main{
    position: relative;
    display: block;
    margin-top: var(--gap);
    margin-bottom: var(--gap);
}

#intro{
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 600px;
    max-width: 70%;
    width: 100%;
    
    & h1{
        font-size: 5rem;
        font-weight: bold;
        color: var(--color-primary);
    }
    
    & p{
        font-size: 2.2rem;
        color: var(--color-secondary);
    }
    
    & .buttons{
        display: flex;
        flex-direction: row;
        gap: var(--gap);
        margin-top: 5rem;
    }
}

#features{
    position: relative;
    display: flex;
    flex-flow: row wrap;
    gap: var(--gap);
    margin-top: var(--gap);
    margin-bottom: var(--gap);
    
    & .feature{
        display: flex;
        flex-direction: row;
        gap: var(--gap);
        flex: 1 1 350px;
        padding: var(--padding);
        border:1px solid var(--color-primary);
        justify-content: center;
        
        & .icon{
            position: relative;
            
            padding-top: .3rem;
            & svg{
                width:5rem;
                height: auto;
                max-width: unset;
            }
        }
        
        & .content{
            display: flex;
            flex-direction: column;
            & h2{
                font-size: 1.6rem;
                font-weight: bold;
                color: var(--color-primary);
            }
            & p{    
                font-size: 1.3rem;
                color: var(--color-secondary);
            }
        }
    }
}

#waf{
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--gap);
    margin-top: var(--gap);
    margin-bottom: var(--gap);
    padding: 10rem 12rem;
    border:1px solid var(--color-primary);
    
    &::before{
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-image: url('../assets/code.webp');
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        z-index: -1;
        filter: blur(10px);
        opacity: 0.3;
    }
    
    & h2{
        font-size: 4rem;
        font-weight: bold;
    }
    & p{
        font-size: 1.8rem;
        color: var(--color-primary);
        opacity: 0.9;
    }
}

#dotmap{
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--gap);
    margin-top:10rem;
    margin-bottom: 10rem;
    
    & .cont{
        position: absolute;
        top:50%;
        left:50%;
        transform: translate(-50%, -50%);
        background: rgba(0, 0, 0, 0.7);
    }
    
    & h2{
        font-size: 4rem;
        font-weight: bold;
        text-align: center;
        color: #FFF;
    }
    
    & p{
        color: #FFF;
    }
    
    & img{
        width: 100%;
        max-width: unset;
        height: auto;
    }
}

#faq{
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--gap);
    margin-top: 5rem;
    margin-bottom: 5rem;
    
    .faqitem{
        display: flex;
        flex-direction: column;
        gap: var(--gap);
        border: 1px solid var(--color-primary);
        padding: var(--padding);
        
        & .question{
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            align-items: center;
            transition: all .1s ease-in-out;
            gap: var(--gap);
            cursor: pointer;
            & h3{
                font-size: 2rem;
                font-weight: bold;
                color: var(--color-primary);
            }
            & .arrow{
                display: flex;
                & svg{
                    width: 2rem;
                    height: 2rem;
                    transition: all .1s ease-in-out;
                }
            }
        }
        
        & .answer{
            display: none;
            flex-direction: column;
            gap: .5rem;
            transition: all .1s ease-in-out;
            & p{
                font-size: 1.6rem;
                color: var(--color-secondary);
            }
        }
        
        &.open{
            & .answer{
                display: flex;
            }
            & .question{
                & .arrow{
                    transform: rotate(180deg);
                }
            }
        }
    }
}

footer{
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--gap);
    margin-top: 5rem;
    justify-content: space-between;
    align-items: center;
    background: var(--foreground);
    padding: 3rem 4rem;
    
    & .cont{
        display: flex;
        flex-direction: row;
        gap: var(--gap);
        width: 100%;
        justify-content: space-between;
        align-items: flex-start;
        flex-flow: row wrap;
        
        & > div{
            flex: 0 1 300px;
        }
        
        & .logo{
            display: flex;
            flex-direction: column;
            gap: var(--gap);
            max-width: 10rem;
        }
        
        & .links{
            display: flex;
            flex-direction: column;
            gap: var(--gap);
        }
        
        & .contact{
            display: flex;
            flex-direction: column;
            gap: var(--gap);
        }
        
        & a:not(.btn){
            font-size: 1.6rem;
            color: var(--color-primary);
            transition: all .1s ease-in-out;
            &:hover{
                color: var(--color-secondary);
            }
        }
    }
}

.bgmap{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 70vh;
    z-index: -1;
    
    &::before{
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(0deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.6) 37%, rgba(0, 0, 0, 0) 100%);
        z-index: -1;
    }
    & img{
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
        z-index: -2;
    }
}

.textpage{
    background: rgba(0, 0, 0, 0.55);
    padding: var(--padding);
    & h1{
        font-size: 4rem;
        font-weight: bold;
        color: var(--color-primary);
    }

    & h2{
        font-size: 3rem;
        font-weight: bold;
        color: var(--color-primary);
    }
    
    & p{
        font-size: 1.6rem;
        color: var(--color-secondary);
    }
}