/****************************/
/*           GENERAL        */
/****************************/

/* GLOBAL */
:root {
    width: 100%;
    scroll-behavior: smooth;
    
    --black:#102a2d;
    --black-dark:#102a2d;
    --white:#FFFDEA;
    --yellow:#FFF468;
    --yellow-dark:#FCBC3F;
    --green:#D5E052;
    --green-dark:#82AD29;
    --blue-1: hsl(183, 90%, 85%);
    --blue-1-dark:#06e5fe;
    --blue-2:#3FC2D1;
    --blue-2-dark:#0097BC;

    --paper-color:var(--black);
    --text-color:var(--white);
    --marked-color:var(--yellow);
    --marked-color-dark:var(--yellow-dark);
    --second-marked-color:var(--blue-2);

    color:var(--text-color);
    background-color:var(--paper-color);
    fill: var(--text-color);

    height: inherit;
    width: inherit;

    font-size: 100%;
    font-family: 'Source Code Pro';
}

p:not(:has(img)), ul, li, mark{
    font-size: clamp(.875rem, 3.966vw, 1.1875rem);
    max-width: 36em;
    font-weight: normal;
}


body{
    margin:0;
}

/* TYPO */
@font-face {
    font-family: 'Source Code Pro';
    src: url("../fonts/SourceCodePro-Regular.ttf") format('truetype');
    font-weight: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Source Code Pro';
    src: url("../fonts/SourceCodePro-Italic.ttf") format('truetype');
    font-weight: normal;
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: 'Source Code Pro';
    src: url("../fonts/SourceCodePro-SemiBold.ttf") format('truetype');
    font-weight: 500;
    font-display: swap;
}
@font-face {
    font-family: 'Source Code Pro';
    src: url("../fonts/SourceCodePro-Black.ttf") format('truetype');
    font-weight: 1000;
    font-display: swap;
}

/* TEXT */
h1{
    font-size: 2.5em;
    font-weight: 1000;
    max-width: 16em;
    padding: 0;
    margin: 0;
    width: fit-content;
    text-align: center;
    margin-bottom:1.2em;
}

h2{
    font-size: 1.8em;
    text-transform: uppercase;
    font-weight: 1000;
    padding: 0;
    margin: 0;
    margin-bottom: .5em;
    border-bottom: 3px solid var(--marked-color-dark);
}

h3{
    font-size: 1.8em;
    font-weight: 1000;
    margin-top: 4rem;
}

h3:first-of-type{
    margin-top: 0rem;
}

h3 .first-word{
    color: var(--marked-color);
    font-style: normal;
}

h4{
    padding: .3em .3em;
    border-radius: 2px;
    background-color: var(--marked-color);
    color: var(--paper-color);
    margin-bottom: 0;
    font-size: 1.2em;
    font-weight: 500;
    margin-top: 3em;
    width: fit-content;
}

strong{
    font-weight: 1000;
}

mark{
    font-weight: 1000;
    font-size: 1.2em;
    line-height: 1.25em;
    background-color: inherit;
    color: inherit;
}

.marked-color{
    color: var(--marked-color);
}

mark strong{
    font-weight: 1000;
    color: var(--marked-color);
    text-shadow: none;
}

span.mark{
    font-weight: normal;
    background-color: var(--marked-color);
    color: var(--paper-color);
    line-height: 1.35em;
    padding: 0 .25em;
    font-size: .8em;
}

ul{
    padding-left: 1em;
    margin-bottom: 1em;
}

li{
    padding-left: .25em;
    margin-top: 0.5em;
    max-width: 32em;
}

figcaption{
    font-family: 'Courier New', Courier, monospace;
    font-size: 1em;
    line-height: 1.5em;
}


/* LINK */
a{color: inherit;cursor:default;}

a:not(.btn):not(.active):hover{
    color: var(--marked-color);
    cursor: pointer;
    text-decoration: underline!important;
}

/* SVG */
svg{
    height: auto;
}

.fill-second-color{
    fill: var(--second-marked-color);
}

.fill-marked-color{
    fill: var(--marked-color);
}
/* Arrow */
.arrow svg{
    width: 1.2em;
    height: auto;
}
.arrow-left svg{
    transform: rotate(180deg);
}
.arrow-up svg{
    transform: rotate(-90deg);
}
.arrow-down svg{
    transform: rotate(90deg);
}

/* BUTTON */
.btn, button{
    text-decoration: inherit;
    font-weight: bolder;
    font-size: 1.15rem;
    padding: .5em 1.2em;
    border-radius: 2px;
    border: 2px solid var(--paper-color);
}
.btn:not(.active):hover{
    transform:translateY(-2px) scale(1.01);
    transition: 0.35s;
    cursor: pointer;
}

.btn.lv1{
    fill: var(--paper-color);
    color: var(--paper-color);
    background-color: var(--text-color);
    box-shadow: 3px 3px 0px var(--marked-color);
}
.btn.lv1:not(.active):hover{
    background: var(--marked-color);
    box-shadow: 3px 3px 0px var(--text-color);
}

.btn.lv2{
    border: 2px solid var(--text-color);
    background-color: var(--paper-color);
    color: var(--text-color);
}
.btn.lv2:not(.active):hover{
    border: 2px solid var(--marked-color);
    color: var(--marked-color);
    box-shadow: 3px 3px 0px var(--marked-color);
}

.btn.active{
    background-color: var(--marked-color);
    color: var(--paper-color);
    border: 2px solid var(--marked-color);
    box-shadow: none;
}

/* TO USE CLASSES */
.flex{
    display: flex;
    flex-direction: column;
    align-items: start;
}

.flex-row{
    display: flex;
    flex-direction: row;
    align-items: start;
    flex-wrap: wrap;
}

.align-center{
    align-items: center;
}

.space-between{
    justify-content: space-between;
}

.baseline{
    align-items: baseline;
}

img, .w-100{
    width: 100%;
}

.float-right{
    float: right;
    margin-left: 2em;
    width: 40%;
}
.float-left{
    float: left;
    margin-right: 2em;
    width: 40%;
}

.underline{
    text-decoration: underline;
}

.blue-1{
    --marked-color:var(--blue-1);
    --marked-color-dark:var(--blue-1-dark);
}

.blue-2{
    --marked-color:var(--blue-2);
    --marked-color-dark:var(--blue-2-dark);
}

.white{
    --marked-color:var(--white);
    --marked-color-dark:var(--yellow-dark);
}

.green{
    --marked-color:var(--green);
    --marked-color-dark:var(--green-dark);
}

.yellow{
    --marked-color:var(--yellow);
    --marked-color-dark:var(--yellow-dark);

}

.bck-marked{
    background-color: var(--marked-color);
    color: var(--black);
}


/****************************/
/*          HEADER          */
/****************************/
header{
    width: 100%;
    top: 0;
    padding: .5em 0em;
    position: fixed;
    z-index: 100;
    --paper-color: var(--black-dark);
    background-color: var(--paper-color);
    margin-bottom: 4rem;
    border-bottom: solid .1px var(--marked-color);
}

header>div{
    width: 80%;
    margin: auto;

}

#logo{
    height: 1.2em;
    padding: .3rem .75rem;
    background-color: var(--black);
    border: 1px solid var(--text-color);
    border-radius: 2px;
    margin-right: 2em;
    width: fit-content;
}

#logo svg{
    height: 100%;
    width: auto;
}

/* MENU */

#menu ul {
    width: 100%;
    list-style-type: none;
    display: flex;
    justify-content: space-between;
    margin: 0;
    flex-wrap: wrap;
    padding: 0;
}

#menu ul li {
    margin: 0;
    margin-right: 2rem;
  }

#menu a{
    font-weight : normal;
    text-decoration: none;
} 

header .btn.lv2{
    font-weight : normal;
    padding: .2em .4em;
    border: none;
    background-color: var(--black);
}

#menu a.active{
    font-weight: bold;
    color: var(--marked-color);
}


/****************************/
/*          FOOTER          */
/****************************/
footer{
    border-top: 0.2px dashed var(--text-color);
    width: 80%;
    margin-right:auto;
    margin-left:auto;
    padding-top: 2em;
    font-size: 0.8em;
    padding-bottom: 2em;
}

footer img{
    height: 1.5rem;
    width: auto;
    margin-right: 1rem;
    margin-bottom: .5rem;
}

footer ul{
    margin: 0;
    padding: 0;
    max-width: 100%;
}

footer h4{
    margin-top: 0;
    margin-bottom: 1rem;
}

.up-page{
    position: fixed;
    bottom: 2em;
    right: 2em;
    padding: 0.5em;
    width: 2rem;
    height: 2rem;
}

/****************************/
/*           BODY           */
/****************************/
main{
    margin: auto;
    margin-top: 3.4em;
    margin-bottom: 4em;
    position: relative;
}

.main-first{
    width: fit-content;
    margin: 2em auto;
    max-width: 80%;
    margin-bottom: 8em;
}

.main-first svg{
    max-width: 32rem;
    margin-bottom: 4em;
    overflow: visible;
    margin-top: 2em;
}

/* SVG ANIM */
g.app{
    transition: transform 0.3s ease, fill 0.3s ease, stroke 0.3s ease;
    transform-origin: right;
}

g.app.svg-active {
    transform: scale(1.05);
    --paper-color: var(--yellow);
    --marked-color: var(--black);
}

g.app.svg-active rect:first-of-type {
    fill: var(--marked-color-dark);
}

g.server{
    transition: transform 0.3s ease, fill 0.3s ease, stroke 0.3s ease;
    transform-origin: left;
}

g.server.svg-active {
    transform: scale(1.05);
    --paper-color: var(--white);
    --text-color: var(--black);
}

g.server.svg-active rect:first-of-type {
    fill: var(--marked-color);
}

g.word{
    border: solid 1px var(--paper-color);
}


/* CONTENT */
.section-home {
    padding-bottom: 3rem;
}
.content {
    width: 80%;
    margin: auto;
    position: relative;
}

.section-header{
    padding-top: 4em;
    padding-bottom: 3em;
    margin-bottom: 6em;
    margin-top: 3em;
}

.section-header:first-of-type{
    margin-top: -.3rem;
}

.subtitle{
    max-width: 36rem;
    text-align: center;
    font-size: 1.25rem;
}

/* GRID */
.grid{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
    grid-gap: 1.5em;
    justify-content: center;
    margin-top: 4em;
    margin-bottom: 4em;
}

/* cards default */
.card{
    border: .1px var(--text-color) solid;
    border-radius: 2px;
    width: 80%;
    position: relative;
    padding: .5em 1rem;
}

.card svg{margin-top: 1em;}
.card h4{margin-top: 1.5em;}
.card p{margin-bottom: .5em;}

/* cards implementation */
.implementation p{
    margin-top: .3em;
    margin-bottom: .3em;
}

.implementation h4{
    margin-top: 1em;
}

.implementation .lv1{
    padding: .1em .3em;
    margin-top: .5em;
    margin-bottom: 1em;
    top: 1em;
}

.implementation .draft{
    margin-left: -1em;
}

/* ACTIVABLE TRIGGERS */
/* Switch-boxes */
#switch-box-trigger{
    margin-bottom: .5em;
}

#switch-box-trigger .btn{
    margin-right: .5rem;
    position: relative;
    z-index: 1;
}

.switch-box{
    display: none;
    position: relative;
    z-index: 0;
    border: 2px solid var(--marked-color);
    padding: .5em 2em;
    border-radius: 2px;
    background-color: var(--paper-color);
}

/* Implementation type */
.type{
    font-weight: 1000;
    font-size: .75em;
}
.server{
    --marked-color: var(--blue-2);
    --marked-color-dark:var(--blue-2-dark);
}

.client{
    --marked-color: var(--yellow);
    --marked-color-dark:var(--yellow-dark);
}

.server.client{
    --marked-color: var(--blue-1);
    --marked-color-dark:var(--blue-1-dark);
}

/* TABLE */
table{
    table-layout: auto;
    width: 100%;
    border-collapse: collapse;
    margin-top: 4em;
}

td svg{
    display: inline-block;
}

th, td {
    border: 1px solid var(--text-color);
    padding: 1.5em 1em;
    text-align: center;
  }

td:first-of-type{
    font-weight: bold;
}

thead{
    color: var(--marked-color);
}

thead th, thead td {
    border: 2px solid var(--marked-color);
    border-radius: 2px;
    padding: 1em;
}

thead > tr:first-child > th:first-child {
    border: none;
  }

table svg{
    height: 1.5em;
    width: auto;
}
table br{
    margin-bottom: 0.5em;
}

table svg:nth-child(2){
    margin-left: .75em;
}


/*********************/
/*      MOBILE       */      
/*********************/

@media (max-width: 1024px) {
    td em {
        display: none;
    }
}


@media (max-width: 768px) {
    td, th{
        font-size: .8em;
    }
}

@media (max-width: 425px) {
    th, td, th {
        border: 2px solid var(--marked-color);
        border-radius: 2px;
        padding: .5em;
    }
    td, th{
        font-size: .7em;
    }
}

@media (max-width: 375px) {
    th, td th {
        border: 2px solid var(--marked-color);
        border-radius: 2px;
        padding: .2em;
    }
    td, th{
        font-size: .6em;
    }
}