/** @file       <style.css>
 *  @details    Tá tudo aq.
 */


/*
 *
 *  Loading assets
 *
 */

@font-face {
    font-family: "JetBrains Mono";
    src: url("assets/fonts/JetBrainsMono-Regular.woff2") format("woff2");
    font-weight:    400; /* normal */
    font-style:     normal;
    font-display:   swap;
}


@font-face {
    font-family: "JetBrains Mono";
    src: url("assets/fonts/JetBrainsMono-Bold.woff2") format("woff2");
    font-weight:    700; /* bold */
    font-style:     normal;
    font-display:   swap;
}



/*
 *  Variables
 */

:root {
    /*  General style */
    --gap:              24px;
    --sidebar-width:    200px;
    --roundness:        20px;


    /*  Colors */
    --color-bg:         #ffffff;
    --color-primary:    #4affa4;
    --color-secondary:  #FA8334;
    --color-black:      #0C120C;
    
    --color-1:          #FCC29C;
    --color-2:          #EE6C4D;
    --color-3:          #4affa4;
    
    --color-icon-1:     #B9FAF8;
    --color-icon-2:     #D561B3;
    --color-icon-3:     #8E57DA;

    --color-text:       #B9FAF8;
    --color-text2:      #0F1020;
}





/*
 *
 *  Layout
 *
 */

body {
    /*  
     *  Background IMG configuration... 
     */

    background-image: url("assets/img/HU BG.png");
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;

    /* font-family: Arial; */
    font-family: 'JetBrains Mono', monospace;

    
    margin: 0;
}


h1 {
    color:      var(--color-1);
}


p {
    font-size:  16px;
    color:      var(--color-text);

}


button {
    background-color: #3366cc;
    color: white;
    padding: 10px;
    border: none;
}



/*
 *  Elements
 */
 
.layout {
    display:    flex;   /* flex layout lays children horizontally... */
    min-height: 100vh;  /* ensures all of it can be viewed on vertical. */
}

.container {
    width:          300px;
    margin:         50px auto;
    padding:        20px;
    border-radius:  10px;
}

.content {
    flex:               1;
    display:            flex;
    justify-content:    center;
    align-items:        center;
}



/*
 *
 *  Left
 *
 */

.left-panel {
    position:       fixed;
    top:            var(--gap);
    bottom:         var(--gap);
    right:          var(--gap);
    left:           var(--gap);
    width:          150px;
    

    /*  Border */
    padding:        16px;
    border-radius:  var(--roundness) var(--roundness);


    /*  Background */
    background:     linear-gradient(to bottom, rgba(107, 50, 251, 0.336) 0%, rgba(0, 0, 0, 0) 95%),
                    linear-gradient(to right, transparent, rgba(255, 47, 0, 0.346));
    background-blend-mode: multiply;
}


.social-icon {
    position:   relative;
    display:    inline-block;

    width:      32px;
    height:     32px;
}


.social-icon img {
    display:        inline-block;

    width:          100%;
    height:         100%;
    object-fit:     contain;
}


.social-icon:hover .tooltip {
    opacity:        1.0;
}


/*  só por ter... */
.tooltip {
    position:       absolute;
    top:            100%;
    left:           50%;
    transform:      translateX(-50%) translateY(+10%);

    background:   rgb(47, 47, 47);
    color:        rgb(255, 255, 255);
    padding:        4px 8px;
    border-radius:  4px;

    opacity:        0;
    pointer-events: none;
    transition:     0.2s;
}   





/*
 *
 *  Main
 *
 */

.main-panel {
    /*  Layout */ 
    position:   fixed;
    top:        var(--gap);    
    bottom:     var(--gap);
    left:       calc(var(--gap) * 2 + var(--sidebar-width));
    right:      var(--gap);


    /*  Border */ 
    padding:        16px;
    border:         2px solid transparent;
    border-radius:  var(--roundness);
    box-shadow: 0 0 12px var(--color-primary);


    /*  Animations */  
    animation:  animation-comet-blur 32s linear infinite,
                animation-main-panel-intro 1s linear 1;
    overflow: hidden;
}


.main-panel::before {
    /* just to create the element... */
    content: "";                 

    /* covering all of it?! */
    position:   absolute;
    left:       0;
    right:      0;
    height:     0px;

    padding:    1px;

    background: linear-gradient(
        to right,
        rgba(0, 0, 0, 0) 0%,
        rgba(0, 0, 0, 0) 69%,
        var(--color-primary) 70%, 
        rgba(0, 0, 0, 0) 85%,
        rgba(0, 0, 0, 0) 100%);


    background-size:    200% 100%;
    border-radius:      0px;

    /* faz virar só borda */
    -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;

    animation:  animation-comet 8s linear infinite;
    animation-delay: 2s;

}


@keyframes animation-main-panel-intro {
    0% {
        filter: blur(5px);
    }

    100% {
        filter: blur(0px);
    }
}


@keyframes animation-comet {
    0% {
        background-position:    0% 0%;
        /* box-shadow: 0 0 8px red; */
    }

    50% {
        background-position:    200% 0%;
    }
    
    100% {
        background-position:    200% 0%;
    }
}


@keyframes animation-comet-blur {
    0% {
        filter: blur(0px);
    }

    90% {
        filter: blur(0px)
    }

    95% {
        filter: blur(1px)
    }

    100% {
        filter: blur(0px)
    }
}


.title {
    font-weight:    bold;
    font-size:      36px;

    margin-bottom:  8px;
    color:          var(--color-primary);
}


.subtitle {
    font-size:      16px;
    text-align:     right;
    font-weight:    bold;
    margin-bottom:  8px;

    color:          var(--color-primary);
}