:root{
    --bg-color: linear-gradient(to bottom, #FED6B3 0%, #B7718D 72%);
}

/* Loading */
body {
    opacity: 0;
}

body.loaded {
    opacity: 1;
}

li {
    padding-top: 2px;
}

main
{
    word-wrap: break-word;    
    list-style-position: inside;
}

footer {
    display: flex;
    justify-content: center;
    /* justify-content: space-around; */
    text-align: center;
    /* gap: 10; */
    width: 100%;
    flex-wrap: wrap;
    
    a {
        width: 40%;
        img{
            width: 100%;
            border-radius: 30px;
        }
    }

    div {
       display: flex;
       flex-direction: column;
       align-items: center;
       gap: 0;
       padding: 0;
       justify-content: center;
       box-sizing: border-box;
       padding-bottom: 25px;

       * {
         margin: 0;
         padding: 5px 0;
       }
    }
    /* gap: 10px; */
    
}

body{background: var(--bg-color);}

header{
    color: var(--status-text-color);
    text-align: center;
    
    div {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 3px;
        width: 100%;
    }
}

section
{
    padding: 0 8%;

    #about, #guide {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin: 0 auto;

        #text {width: 50%}


        #laptops 
        {
            display: flex;
            flex-wrap: wrap;
            
            gap: 10px;
            justify-content: center;
            padding-right: 10px;

            .laptop
            {
                max-width: 100%;
                min-width: 100px; 
                width: calc(300px * 100vw);
            }
        }

        /* Detect to broke the flex */
        @media (max-width: 700px) 
        {
            flex-direction: column-reverse;
            #text {width: 100%}
        }
    } 

    #guide {justify-content: center};


    #about img 
    {
        width: 500px;
        max-width: 50%;
    }


    #engines 
    {
        padding-top: 50px;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 1vw;
        max-width: 100%;
        img {width: clamp(5% * .5rem, 20px, 80px)}
    }
}