@import url('https://fonts.googleapis.com/css2?family=Urbanist:ital,wght@0,100..900;1,100..900&display=swap');

:root{
    --body-font: 'Urbanist', sans-serif;

    --most-bigger-font-size: 3rem;
    --biggest-font-size: 2.25rem;
    --bigger-font-size: 1.55rem;
    --big-font-size: 1.35rem;
    --medium-font-size: 2rem;
    --h1-font-size: 1.5rem;
    --h2-font-size: 1.25rem;
    --h3-font-size: 1rem;
    --normal-font-size: .938rem;
    --title-font-size: .8rem;
    --small-font-size: .813rem;
    --smaller-font-size: .75rem;
    --smallest-font-size: .65rem;

    --border-size: 2px;

    --font-medium: 500;
    --font-semi-bold: 600;

    --z-tooltip: 10;
    --z-fixed: 100;

    --scroll-padd: 8rem;
    --scroll-border-radius-t: 80px;
    --scroll-border-radius-r: 80px;
    --scroll-border-radius-b: 80px;
    --scroll-border-radius-l: 80px;
    --padding-b-d: 8rem;

    --body-color: #EDEDED;
    --table-selected: #2b55ff;  
    /*--body-color: #FAFBFF;*/
    --input-color: #FFFFFF;
    --notif: #FFFFFF;
    --title-color: #ededed;
    --title-color-2: #e1e1e1;
    --label-color: #e1e1e1;
    --label-color-2: #1e1e1e;
    --text-color: #444446;
    /*--text-gradient: linear-gradient(45deg, #fa811e, #ff00e1);*/
    /*--text-gradient: linear-gradient(45deg, #FDC135, #ff0044);*/
    /*--text-gradient: linear-gradient(45deg, #32d1c4, #bbdb69);*/
    --text-gradient: linear-gradient(45deg, #c0818a, var(--title-color));
    --checkbox: #cacaca;
    --text-color-2: #707070;
    --base: hsl(0, 0%, 95%);
    --border-color: #04101b;
    --border-color-2: #e0dcdc;
    --border-color-3: #cad2d3;
    --border-color-4: #cacaca;
    --border-table: #EDEDED;
    --variant: #c0818a;  
    --link: #c0818a;
    --checked: #c0818a;
    --shadow: #646464;
    --shadow-2: #ffffff;
    --pdf: #f26262;
    --rejected: #ff2f2f;
    --error: #f6dada;
    --error-label: #e98d8d;
    /*--menu: hsl(227, 20%, 9%);*/
    --menu: #FAFAFA;
    --success: #239cff;
    --selected: rgb(225, 247, 118);
    --selected-li: hsla(228, 3%, 64%, 0.163);
    --selected-menu: #F1F1F1;
    --hovered-li: hsla(231, 3%, 59%, 0.12);
    --hovered-row: hsla(231, 3%, 59%, 0.12);
    --scroll: #191723;
    --bg: #b6b6b64f;
    --tooltip: #1e1e1e;
}

.dark-theme{
    --body-color: #1E1E20;
    --table-selected: #030308;
    --input-color: #0F0F0F;
    --notif: hsl(0, 0%, 0%);
    --text-color: hsl(0, 0%, 100%);
    --text-color-2: #9a9a9a;
    --checkbox: #373737;
    --label-color: #162D3D;
    --label-color-2: #f8f8f8;
    --base: hsl(240, 36%, 4%);
    --menu: #1F1F21;
    --base-2: hsl(0, 0%, 16%);
    --border-table: #252525;
    --border-color-4: #373737;
    --base-3:#03031c;
    --base-4: #010215;
    --shadow: #343434;
    --shadow-2: #101010;
    --selected-li: hsla(240, 1%, 32%, 0.194);
    --selected-menu: #1c1c1c;
    --hovered-li: hsla(222, 9%, 27%, 0.194);
    --hovered-row: hsla(240, 33%, 1%, 0.218);
    --sent: #d9ef6dba;
    --aproved: #34cb41;
    --error: #e45555;
    --error-label: #de6262;
    --rejected: #ff3030;
    --resent: #8be7f3ba;
    --success: #239cff;
    --variant: #c0818a;  
    --link: #c0818a;
    --checked: #c0818a;
    --scroll: #2b2c3b;
    --border-color-2: #0d121e;
    --border-color-3: #1b1c26;
    --shadow: #263138;
    --shadow-2: #000000;
    --tooltip: #181818;
    --bg: #1111114f;
    --selected: rgb(225, 247, 118);
    /*--text-gradient: linear-gradient(45deg, #c0818a, #f1e535, #ce2f2f);*/
    --text-gradient: linear-gradient(45deg, #c0818a, var(--text-color));
}


@media screen and (min-width: 1024px) {
    :root {
        --biggest-font-size: 2.3rem;
        --h1-font-size: 2.25rem;
        --h2-font-size: 1.5rem;
        --h3-font-size: 1.25rem;
        --normal-font-size: 1rem;
        --title-font-size: .8rem;
        --small-font-size: .875rem;
        --smaller-font-size: .76rem;
        --smallest-font-size: .71rem;
    }
}
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    transition: background 0.3s ease, color 0.3s ease, border 0.3s ease, box-shadow 0.3s ease;
}
h1{
    font-weight: 600;
}
p{
    width: 100%;
    text-align: left;
    font-size: var(--normal-font-size);
    line-height: 1.2lh;
}
body {
    font-family: var(--body-font);
    font-size: var(--normal-font-size);
    color: var(--text-color);
    background: var(--body-color);
}
main{
    position: relative;
    padding: 1rem 1rem 2rem 1rem;
    width: 100%;
    min-height: 100dvh;
    height: fit-content;
    display: flex;
    align-items: center;
    justify-content: center;
}
section{
    position: relative;
    width: 100%;
    min-height: 100%;
    height: fit-content;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    line-height: 1.2lh;
    gap: 2rem;
}
.logo{
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: min(250px, 70%);
    height: auto;
    aspect-ratio: 1/1;
    object-fit: cover;
}
.logo img{
    width: 100%;
    height: auto;
    aspect-ratio: 1/1;
    object-fit: cover;
}
.s-bar{
    position: relative;
    width: min(100%, 900px);
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.s-bar input{
    outline: none;
    padding: 0.5rem 1rem;
    width: 100%;
    height: 100%;
    border-radius: 8px;
    border: 1px solid var(--border-color-4);
    background: var(--input-color);
    color: var(--text-color-2);
    font-size: var(--normal-font-size);
    font-weight: 500;
    width: 100%;
    height: 100%;
    transition: 0.3s all ease;
}
.s-bar input:focus{
    border: 1px solid var(--variant);
    background: var(--input-color);
    color: var(--text-color);
}
.s-bar-icon{
    padding: 0.5rem 1rem;
    height: 100%;
    width: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--variant);
    color: var(--input-color);
    border: 1px solid var(--border-color-4);
    border-radius: 8px;
    transition: 0.3s all ease;
}
.s-bar-icon:hover{
    cursor: pointer;
    opacity: 0.7;
}
.bento{
    position: relative;
    width: min(100%, 900px);
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(3, auto);
    grid-template-areas: 
    'e e e e'
    'a a b b'
    'a a c c'
    'd d d d';
    gap: 0.5rem;
}
.mark{
    position: relative;
    display: flex;
    align-items: center;
    justify-content: start;
    gap: 1rem;
    line-height: 1.2;
    grid-area: e;
}
.mark.cntr{
    justify-content: center;
    flex-direction: column;
    text-align: center;
}
.mark.cntr .txt{
    text-align: center;
}
.mark img{
    width: 60px;
    height: 60px;
    object-fit: cover;
    aspect-ratio: 1/1;
}
.mark p i{
    color: var(--variant);
}
.card{
    padding: 1rem;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    background: var(--input-color);
    border-radius: 8px;
    border: 1px solid var(--border-color-4);
    grid-area: a;
}
.card h1 {
    font-size: var(--h2-font-size);
    font-weight: 600;
}
.banner{
    position: relative;
    padding: 0;
    width: 100%;
    display: flex;
    align-items: stretch;
    justify-content: stretch;
    aspect-ratio: 16/9;
    background: #f1f1f1;
    border-radius: 8px;
    overflow: hidden;
}
.banner .swiper-slide{
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}
.banner img{
    width: 100%;
    height: auto;
    object-fit: cover;
    aspect-ratio: 16/9;
}
#warning-icon{
    position: absolute;
    bottom: 0.5rem;
    left: 0.5rem;
    padding: 0.5rem;
    background: var(--input-color);
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.3rem;
    width: auto;
    height: fit-content;
    border-radius: 25px;
    z-index: 10;
}
#warning-icon svg{
    width: calc(var(--big-font-size) * 1);
    height: auto;
    aspect-ratio: 1/1;
    object-fit: contain;
    color: var(--variant);
}
.mark #warning-icon{
    position: relative;
}
.mark #warning-icon svg{
    width: calc(var(--biggest-font-size));
}
.details{
    padding: 1rem;
    grid-area: b;
    background: var(--input-color);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    line-height: 1.5;
    gap: 0.5rem;
    border: 1px solid var(--border-color-4);
}
.details p{
    font-size: var(--normal-font-size);
}
#site-name {
    font-weight: bold;
    color: var(--rejected);
    word-break: break-all;
}
.button-container {
    padding: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 1rem;
    width: 100%;
    height: 100%;
    grid-area: c;
    background: var(--input-color);
    border-radius: 8px;
    border: 1px solid var(--border-color-4);
}
.btn {
    padding: 0.5rem 1.5rem;
    width: 100%;
    border: none;
    border-radius: 4px;
    font-size: var(--normal-font-size);
    background: var(--variant);
    color: var(--text-color);
    font-weight: 600;
    cursor: pointer;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    transition: all 0.3s ease;
}
.btn:nth-child(1){
    background: transparent;
    border: 2px solid var(--variant);
}
.btn:hover {
    opacity: 0.7;
}
.disclaimer {
    padding: 1rem;
    color: var(--text-color-2);
    grid-area: d;
    background: var(--input-color);
    border-radius: 8px;
    border: 1px solid var(--border-color-4);
}
.disclaimer strong{
    color: var(--text-color);
}
.disclaimer p{
    font-size: var(--small-font-size);
}
a {
    color: #1976d2;
    text-decoration: none;
}
a:hover {
    text-decoration: underline;
}

@media screen and (max-width: 580px){
    .bento{
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(4, auto);
        grid-template-areas: 
        'e e'
        'a a'
        'b b'
        'c c'
        'd d';
    }
    .mark{
        gap: 0.5rem;
    }
    .btn{
        padding: 0.5rem 1rem;
        width: 100%;
    }
}