body{
    background: var(--black);
    background: linear-gradient(180deg, var(--black) 0%, var(--black) 170%);
}

h1,h2,h3,h4,p,a,li{
    color:var(--white);
}

#intro{
    display:flex;
    align-items:center;
    justify-content: space-evenly;
    height: 90vh;
    flex-wrap:wrap;
}

    #intro h2{
        font-size:2vw;
    }

    #intro div{
        display:flex;
        flex-direction: column;
        justify-content:space-around;
        height:fit-content;
    }

        #intro div h1{
            font-size: max(9vh,9vw);
            background: linear-gradient(135deg, var(--main) 0%, rgba(177,201,239,0) 150%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }

        #intro div:first-of-type img{
            height:max(9vh,9vw);
            width: auto;
        }

        #intro div h2{
            font-size:min(7vw,7vh);
            font-weight:650;
            background: linear-gradient(135deg, var(--white) 0%, rgba(177,201,239,0) 120%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }

        #intro div p{
            font-size:min(3vw,3vh);
            color:rgba(177,201,239,1);
            background: linear-gradient(90deg, var(--white) 0%, rgba(177,201,239,0) 120%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }
    #intro img:nth-child(2){
        height:60vh;
        animation:logoRotate 0.8s linear infinite;
    }

    @keyframes logoRotate{
        25%{
            transform: rotate(5deg) skewX(4deg);
            margin-top:3rem;
        }
        50%{
            transform: rotate(0) skewX(0);
            margin:0;
        }
        75%{
            transform: rotate(-5deg) skewX(-4deg);
            margin-bottom:10rem;
        }
    }

    #demoButton{
        margin:3% auto;
        text-decoration: none;
        background: var(--highlight);
        background: linear-gradient(90deg, rgba(192, 116, 41, 0.73) 0%, rgba(161,89,18,0.7318181818181818) 100%) !important; 
        border:2px solid rgba(192, 116, 41, 0.73) !important;
        width:30%;
        height:max(3vw,5vh);
        border-radius:1rem;
    }

        #demoButton button{
            background:none;
            border:none;
            cursor:pointer;
            color:var(--white);
            font-weight: 700;
            width: 100%;
            height: 100%;
            font-size: medium;
        }

        

#intro2{
    display:flex;
    align-items:center;
    justify-content: space-around;
    flex-wrap:wrap;
}

    #intro2 img{
        max-width: 40%;
    }

    #intro2 div{
        display:flex;
        flex-direction: column;
        justify-content:space-around;
        align-items: center;
        height:fit-content;
    }

        #intro2 div h2{
            font-size:min(6vw,6vh);
            font-weight:650;
        }

            #intro2 div h2 span:first-of-type,#intro2 div h2 span:last-of-type{
                background: linear-gradient(180deg, var(--white) 0%, rgba(177,201,239,0) 120%);
                -webkit-background-clip: text;
                -webkit-text-fill-color: transparent;
            }

            #intro2 div h2 span{
                color:var(--main)
            }

        #intro2 div h3{
            font-size:min(5vw,5vh);
            font-weight:650;
            letter-spacing: 1rem;
            text-align: center;
        }

            #intro2 div h3 span:first-of-type{
                background: linear-gradient(180deg, var(--white) 0%, rgba(177,201,239,0) 120%);
                -webkit-background-clip: text;
                -webkit-text-fill-color: transparent;
            }

            #intro2 div h3 span{
                color:var(--main)
            }

        #intro2 div p{
            font-size:min(2vw,2vh);
            color:var(--white);
        }

#about{
    display:grid;
    grid-template-columns: repeat(2,1fr);
    width:100%;
}

    #about div:first-of-type{
        width:100%;
        display:flex;
        justify-content: center;
        align-items: center;
    }

        #about div:first-of-type h2{
            font-size:min(7vw,7vh);
            margin:20vh 0 20vh 4vh;
            background: linear-gradient(90deg, var(--main) 0%, rgba(177,201,239,0) 250%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }

    #about div:last-of-type{
        width:calc(100%-6rem);
        height:100%;
        display:flex;
        align-items: center;
        justify-content: center;
        padding:0 3rem;
    }

        #about div:last-of-type p{
            font-size:min(2vw,2vh);
            /* background: linear-gradient(160deg, var(--white) 0%, rgba(177,201,239,0) 250%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent; */
            color:var(--white)
        }

#social_networks-container h2{
    font-size:min(5vw,5vh);
    margin:10vh 10vw 5vh 10vw;
    background: linear-gradient(90deg, var(--main) 0%, rgba(177,201,239,0) 250%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 700;
}

#social_networks-container h3{
    font-size:min(4vw,4vh);
    letter-spacing: 1rem;
    text-align:center;
    margin:5vh 0 3vh 0;
    color:var(--white);
    font-weight: 100;
}

#social_networks-container h4{
    color:var(--white);
    text-align: center;
    font-size:min(2vh,2vw)
}

    #social_networks-container h4 a{
        color:var(--white);
    }

.social_networks-container{
    display:flex;
    align-items:center;
    justify-content: space-evenly;
    width:100%;
    flex-wrap:wrap;
    margin-bottom:5vh;
}

    .social_network-container{
        display:flex;
        flex-direction:column;
        align-items:center;
        height:150px;
        justify-content: space-around;
        margin:0 1rem;
    }

        .social_network-container img{
            max-width: 100px;
            max-height:100px;
            opacity: 65%;
        }

        .social_network-container p{
            color:white !important;
        }


@media (max-width:1289px){
    #intro img:nth-child(2){
        display:none;
    }
}

@media(max-width:768px){

    #demoButton{
        width:70%;
    }
    #demoButton button{font-size:small}

    #intro div p{
        font-size:min(4vw,4vh);
    }
}

@media(max-width:628px){
    #intro {height:80vh;}
    #intro2 img{
        display:none;
        width:100% !important;
        max-width: none;
    }

    #intro2 div{
        padding:0 10%;
    }
        #intro2 div h3{
            letter-spacing: 0.3rem;
        }

        #intro2 div p{
            font-size:medium;
        }

    #about{
        display:flex;
        flex-direction: column;
    }

        #about h2{
            margin:20vh 0 4vh 0 !important;
        }

        #about div:last-of-type p{
            font-size:medium;
        }
    
    .arrow-animation{
        display:none;
    }
}