@font-face {
    font-family: Archivo;
    src: url('fonts/Archivo/font.ttf');
}

body{
    background-color: rgb(31, 31, 31);
    color: white;
    text-align: center;
    font-family: Archivo;
    display: flex;
    flex-direction: column;
    height: 100vh;
}

h1{
    font-size: clamp(40px, 3vw, 75px);
}

h2{
    font-size: clamp(25px, 3vw, 50px);
}

h3{
    font-size: clamp(35px, 3vw, 60px);
}

p{
    font-size: clamp(25px, 2vw, 35px);
    padding-left: 100px;
    padding-right: 100px;
}

.center{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100vh;
}

.container-widget-div{
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 20px;
    width: 80%;
}
  
.widget-div{
    flex-basis: calc(40% - 15px);
    background: #287fcc;
    margin-bottom: 20px;
    padding-top: 30px;
    padding-bottom: 30px;
    padding-left: 25px;
    padding-right: 25px;
    border-radius: 60px;
    box-shadow: 7px 7px 44px #00367d, -7px -7px 44px #004df3;
    transition: transform 0.7s ease;
    cursor: pointer;
}

.widget-div:hover {
    transform: scale(1.2);
    transition: transform 0.7s ease;
}

.mini-widget-div {
    height: min-content;
    flex-basis: calc(30% - 30px);
    margin-bottom: 20px;
    border-radius: 60px;
    padding-top: 3px;
    padding-bottom: 3px;
    background: #ff5f5f;
    box-shadow: 7px 7px 44px #ff6161, -7px -7px 44px #ff2c2c;
    transition: transform 0.7s ease;
    margin-right: 50px;
    cursor: pointer;
}

.mini-widget-div:hover {
    transform: scale(1.1);
    transition: transform 0.7s ease;
}

.tableau{
    width: 95%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 20px;
    margin-bottom: 20px;
}

a{
    color: white;
    text-decoration: none;
}

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

table { border-collapse: collapse; width: 100%; margin: 0 0; }
th, td { border: 1px solid #ccc; padding: 5px 10px; text-align: center; }