/*********************************
IMPORT FONT & COLOR & FONT_AWESOME
**********************************/
@import "./fonts.css";
@import "./colors.css";
@import "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css";


/*********************************
         IMPORT BUTTONS
**********************************/
@import "./buttons.css";


/*********************************
        DEFAULT SETTING
**********************************/
*, html{
    scroll-behavior: smooth;
}

*, *:after, *:before {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}


/*********************************
      CUSTOM SCROLL BAR
**********************************/
::-webkit-scrollbar {
    height: 12px;
    width: 2px;
    background: var(--dark);
}

::-webkit-scrollbar-thumb {
    background: gray;
    -webkit-box-shadow: 0px 1px 2px var(--dark);
}

::-webkit-scrollbar-corner {
    background: var(--dark);
}


/*********************************
       DEFAULT ELEMENTS
**********************************/
body{
    margin:0;
    overflow-x:hidden !important;
    font-family: var(--default_font);
}

a{
    text-decoration:none !important;
    min-width: fit-content;
    width: fit-content;
    width: -webkit-fit-content;
    width: -moz-fit-content;
}

a, button{
    transition:0.5s;
    color:inherit;
}

em{
    font-style:normal;
}

figure{
    padding:0;
    margin:0;
}

figure img{
    width:100%;
    height:100%;
}

a, p, .btn{
    font-size:14px;
}

p{
    line-height:1.9em;
}

a, button, input, textarea, select{
    outline:none !important;
}

fieldset{
    border:0;
}

h1, h2, h3, h4, h5, h6{
    margin:0;
}

ul{
    list-style:none;
    padding:0;
    margin:0;
}

.title, .sub_title{
    font-family:var(--title_font);
}

.flex, .fixed_flex{
    display:flex;
}

.flex_content{
    width:100%;
}

.align_center{
    align-items:center;
}

.t_center{
    text-align:center;
}

.padding_1{
    padding:1rem;
}

.padding_2{
    padding:2rem;
}

.padding_3{
    padding:3rem;
}

.padding_4{
    padding:4rem;
}

.big{
    font-size:40px;
}

.medium{
    font-size:30px;
}

.small{
    font-size:20px;
}

.relative{
    position:relative;
}

.hidden_x{
    overflow-x:hidden !important;
}

.hidden_y{
    overflow-y:hidden !important;
}

.t_center{
    text-align:center;
}

.bulletins{
    width:100%;
    display:flex;
    flex-wrap:wrap;
    flex-direction:column;
    gap:10px;
}

.bulletin:before{
    content:"\f00c";
    font-family:"FontAwesome";
    margin-right:5px;
    color:inherit;
}

.tag{
    padding:5px 10px;
    border-radius:5px;
    background-color:rgba(0, 149, 188, 0.1);
    border:1px solid var(--primary);
    font-family:var(--default_font);
    color:var(--primary);
}

.linear_text{
     background:linear-gradient(to right, var(--black) 10%, var(--dark) 40%, var(--gray) 100%);
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
}

.ucase{
    text-transform:uppercase;
}

.success{
    color:var(--blue);
}

.warning{
    color:var(--yellow);
}

.failure{
    color:var(--red);
}


/*********************************
         MEDIA QUERY
**********************************/
@media screen and (max-width:1080px){
    .big{
        font-size:30px;
    }

    .medium{
        font-size:20px;
    }

    .small{
        font-size:16px;
    }
}

@media screen and (max-width:720px){
    .flex{
        flex-wrap:wrap;
    }
    
    .padding_1, .padding_2, .padding_3, .padding_4{
        padding:1rem;
    }
    
    .big{
        font-size:24px;
    }
    
    .medium{
        font-size:16px;
    }
    
    .small{
        font-size:14px;
    }
    
    .btn{
        padding:0.5rem 1rem;
    }
    
    a, p, .btn{
        font-size:13px;
    }
}

/*SMALL SCREEN*/
@media (max-width:300px){
    .padding_1, .padding_2, .padding_3, .padding_4{
        padding:20px;
    }
    
    .big{
        font-size:1.3em;
    }
    
    .medium{
        font-size:14px;
    }
    
    .small{
        font-size:12px;
    }
    
    a, p, .btn{
        font-size:10px;
    }
    
}


/*********************************
         ADDITIONAL
**********************************/
/*POPUP*/
.popup{
    position:fixed;
    bottom:1rem;
    right:1rem;
    display:flex;
    flex-wrap:wrap;
    flex-direction:column;
    overflow-y:auto;
    gap:5px;
    z-index:99 !important;
    border-radius:10px;
    box-shadow:0px 6px 16px -6px var(--dark);
}

.popup .alert{
    max-width:350px;
    position:relative;
    background-color:var(--dark);
    padding:0.5rem 1rem;
    border-radius:10px;
    border:1px solid rgba(255,255,255,0.3);
    color:var(--white);
    display:flex;
    align-items:center;
    gap:10px;
    overflow:hidden;
}

.popup .alert article{
    padding-right:1rem;
}

.popup .alert article .title{
    position:relative;
    top:5px;
    display:flex;
    align-items:center;
    gap:5px;
    color:var(--white) !important;
}

.popup .alert article .title .icon{
    position:relative;
    top:1px;
}

.popup .alert article p{
    font-weight:300;
    opacity:0.6;
    font-size:12px;
    color:var(--lite) !important;
}


/*ICON*/
.icon_danger{
    color:var(--red);
}

.icon_warning{
    color:var(--yellow);
}

.icon_success{
    color:var(--green);
}

/*CLOSE*/
.close{
    position:absolute;
    top:0.2rem;
    right:0.2rem;
    padding:0.1rem 0.2rem;
    border-radius:3px;
    border:1px solid rgba(255,255,255,0.2);
    display:flex;
    align-items:center;
    justify-content:center;
    color:inherit;
    opacity:0.6;
}

.close:hover{
    opacity:1;
}

@media (max-width:520px){
    .popup{
        bottom:0.3rem;
        right:50%;
        transform:translate(50%, 0%);
        width:98%;
        align-items:center;
        justify-content:center;
    }
    
    .popup .alert{
        max-width:100%;
        width:100%;
        border-radius:0px;
    }
}

@media (max-width:300px){
    .popup .alert{
        flex-wrap:wrap;
    }
}