@font-face {
    font-family: 'custom';
    src: url("caviar-cb047bd9ad5b66fcdc5348bfebc4ad38.ttf");
}

@font-face {
    font-family: 'customBold';
    src: url("caviarBold-ce4b9ca56d395facfdc54a009fa25d16.ttf");
}

@font-face {
    font-family: 'customScript';
    src: url("script-86868c2409bb93a8bc007441ede05b8c.otf");
}

* {
    margin : 0;
    padding : 0;
    box-sizing: border-box;

    --color-h-ligth : #ffffff;
    --color-h-dark : #000000;
    --color-t-light: #ffffff38;
    --color-p-ligth :#BEDBBB;
    --color-p-midlight:#8DB596;
    --color-p-middark:#92817A;
    --color-p-dark:#707070;

    font-family: 'customBold', sans-serif;
    color: var(--color-h-dark);
    font-size: 1.5vh;
}

.btn-custom {
    background-color: var(--color-p-middark);
    color : var(--color-p-ligth);
}

.btn-custom:hover {
    background-color: var(--color-p-midlight);
    color : var(--color-p-dark);
}

.icon-container {
    aspect-ratio: 1;
}

.adjust-icon {
    width:80%;
}

.btn-delete {
    aspect-ratio: 1;
    border-radius: 20%;
    background-image: url("../icons/del-base-54e0aab4875e498b090988856fa22217.png");
    background-repeat: no-repeat;
    background-size: cover;
}

.btn-delete:hover {
    
    background-image: url("../icons/del-hover-3be0dd3e05c07e7258516f9ec344a6c2.png");
    
}

.btn-update {
    aspect-ratio: 1;    
    border-radius: 20%;
    background-image: url("../icons/updt-base-2b49550e9f4c230757379d544d38cad1.png");
    background-repeat: no-repeat;
    background-size: cover;
    
}

.btn-update:hover {
    
    background-image: url("../icons/updt-hover-8d3cee8054ed74ac90e0f31ac4ed757a.png");
    
}

body {
    background-color: var(--color-p-ligth);
}

header {
    position : fixed;
    height : 15vh;
    background-image: url("../pictures/header-b6a828c1e5bff84f39f1ae9e16693957.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position-y:40%;
    z-index: 5;
}

.header-title {
    font-family: 'customBold';
    color: var(--color-p-ligth);    
    -webkit-text-stroke: var(--color-p-dark) 1px;
}

header > div {
    height: 100%;
}

.nav-custom {
    position : fixed;
    top : 15vh;
    width : 100%;
    z-index: 5;
}

.navbar-title {
    font-size: 1.5rem;    
}

.nav-text {
    font-size: 1.2rem;
}

.main-connected {
    position : relative;
    top : 25vh;
}

.main-public {
    position : relative;
    top : 20vh;
}

.custom-box {
    box-shadow: var(--color-p-dark) 2px 2px 5px 0;
    background-color: var(--color-t-light);

}

.active-tab {
    background-color: var(--color-t-light);
    z-index: 1;
}

.inactive-tab {
    background-color: var(--color-p-middark);
    color : var(--color-p-ligth);
    transition: background-color 500ms;
}

.inactive-tab:hover {
    background-color: var(--color-p-dark);    
    cursor: pointer;
}

.active-tab, .inactive-tab {
    border-radius : 10px 10px 0 0;
}

.top-row {
    background-color: var(--color-p-dark);
    color: var(--color-p-ligth)
}

.left-cell {
    background-color: var(--color-p-midlight);
}

textarea.form-control {
    min-height: 40vh;
}

.blank-div {
    height: 10vh;
}
footer {
    position : fixed;
    bottom : 0;
    z-index: 5;
    color : var(--color-h-ligth);
}

.choice-box {
    border : solid var(--color-p-dark) 1px;
    border-radius : 5px;
}