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

* {
    margin: 0;
    padding: 0;
    font-family: 'Comfortaa';
}

html, body {
    width: 100%;
    height: 100%;
}

.body-page {
    overflow: hidden;
}

/* 
        HEADER
*/
header {
    width: 100%;
    height: 8%;
    background: pink;
    background: linear-gradient(0deg, rgb(33, 147, 175) 0%, rgb(33, 147, 175) 100%);
    color: white;
    position: absolute;
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: space-around;
}

header a {
    color: white;
    text-decoration: none;
    font-size: 110%;
    transition-duration: 200ms;
}

header a:hover {
    font-size: 130%;
    transition-duration: 200ms;

}


/* 
        MAIN
*/
main {
    width: 100%;
    height: 100%;
    background-color: #333333;
    overflow: hidden;
}

main div.contener {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    width: 100%;
    height: 100%;

    color: white;
}

main div.contener h1 {
    font-size: 200%;
    margin-bottom: 0.4%;
}


main div.top {
    height: 100%;

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

main div.bottom {
    height: 30%;
}

/*
        PLANNING
*/

main div.top-planning {
    height: 6%;
    width: 20%;
    margin-bottom: 1.7%;
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-direction: row;
}

main div.top-planning a {
    font-size: 110%;
    color: white;
    text-decoration: none;
}

main div.tableau {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

main div.tableau th {
    text-align: center;
    padding-top: 0.8%;
    padding-bottom: 0.8%;
    
}

main div.tableau h1 {
    color: white;
}

main div.tableau table {
    width: 70%;
    height: 70%;
    background: white;
}

main div.tableau table td {
    background: linear-gradient(0deg, rgb(55, 68, 248) 0%, rgb(58, 40, 122) 100%);
    color: white;
    text-align: center;
    height: 8%;
    width: 2%;
    transition-duration: 200ms;
}

main div.tableau table td.box {
    background: #333 !important;
    border: black 2px solid;
}

main div.tableau table td.box:hover {
    transform: scale(1.2);
}

main div.tableau table td a {
    color: white;
    text-decoration: none;
}

/*
        RESERVATION
*/

main img.box {
    width: 100%;
    height: 96%;
    margin-top: 1%;
    z-index: 0;
    position: absolute;
    filter: drop-shadow(0px 10px 6px rgb(0 0 0 / 0.4));
}

main div.res-box {
    margin-top: 3%;
    height: 40%;
    width: 20%;
    color: white;

    z-index: 20;

    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

main form.reservation-form {
    height: 45%;
    width: 20%;

    z-index: 20;

    /* background-color: #fff; */
    /* box-shadow: 0 0 50px 1px rgba(0, 0, 0, 0.7); */

    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

main form.reservation-form h2 {
    margin-bottom: 6%;
    color: white;
    font-size: 200%;
}

main form.reservation-form input.entry {
    height: 8%;
    width: 70%;
    padding: 2%;
    border-radius: 10px;
    text-align: center;
    margin-bottom: 2%;

    background-color: #fff;
    border: none;
    color: #000;

    font-family: 'Comfortaa';

    z-index: 1;
    position: relative;
}

main form.reservation-form select.select-entry {
    height: 8%;
    width: 70%;
    padding: 2%;
    border-radius: 10px;
    text-align: center;
    margin-bottom: 2%;

    background-color: #fff;
    border: none;
    color: #000;

    font-family: 'Comfortaa';

    z-index: 1;
    position: relative;
}

main form.reservation-form textarea.box-entry {
    height: 30%;
    width: 70%;
    padding: 2%;
    border-radius: 10px;
    text-align: center;
    margin-bottom: 2%;

    background-color: #fff;
    border: none;
    color: #000;

    font-family: 'Comfortaa';

    z-index: 1;
    position: relative;
}

.link-form {
    transition-duration: 200ms;
}

.link-form:hover {
    font-size: 280%;
}



/* 
        LOGIN
*/
/*CLASSES*/
main form.login-form {
    height: 45%;
    width: 20%;

    z-index: 20;

    /* background-color: #fff; */
    /* box-shadow: 0 0 50px 1px rgba(0, 0, 0, 0.7); */

    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

main form.login-form h2 {
    margin-top: -10%;
    margin-bottom: 10%;
    color: white;
    font-size: 200%;
}

main form.login-form input.entry {
    height: 90%;
    width: 100%;
    padding: 2%;
    padding-left: 25%;
    border-radius: 10px;

    background-color: #fff;
    border: none;
    color: #000;

    font-family: 'Comfortaa';

    z-index: 1;
    position: relative;
}

main form.login-form img {
    z-index: 2;
    position: absolute;
    color: white;
    left: 44%;
}

main form.login-form input.entry:focus{
    outline: none;
}

/*ID*/


/* 
        REGISTER
*/
/*CLASSES*/
main form.register-form {
    height: 45%;
    width: 20%;

    z-index: 20;

    /* background-color: #fff; */
    /* box-shadow: 0 0 50px 1px rgba(0, 0, 0, 0.7); */

    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

main form.register-form h2 {
    margin-top: 6%;
    margin-bottom: 10%;
    color: white;
    font-size: 200%;
}

main form.register-form input.entry {
    height: 90%;
    width: 100%;
    padding: 2%;
    padding-left: 25%;
    border-radius: 10px;

    background-color: #fff;
    border: none;
    color: #000;

    font-family: 'Comfortaa';

    z-index: 1;
    position: relative;
}

main form.register-form img {
    z-index: 2;
    position: absolute;
    color: white;
    left: 44%;
}

main form.register-form input.entry:focus{
    outline: none;
}

/*ID*/
/* 
        PROFIL
*/
/*CLASSES*/
main form.profil-form {
    height: 45%;
    width: 20%;

    z-index: 20;

    /* background-color: #fff; */
    /* box-shadow: 0 0 50px 1px rgba(0, 0, 0, 0.7); */

    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

main form.profil-form h2 {
    margin-top: 6%;
    margin-bottom: 10%;
    color: white;
    font-size: 200%;
}

main form.profil-form input.entry {
    height: 90%;
    width: 100%;
    padding: 2%;
    padding-left: 25%;
    border-radius: 10px;

    background-color: #fff;
    border: none;
    color: #000;

    font-family: 'Comfortaa';

    z-index: 1;
    position: relative;
}

main form.profil-form img {
    z-index: 2;
    position: absolute;
    color: white;
    left: 44%;
}

main form.profil-form input.entry:focus{
    outline: none;
}

/*ID*/

/*
        OTHER
*/
.box-login {
    width: 70%;
    height: 10%;

    display: flex;
    align-items: center;
}
.box-password {
    margin-top: 7%;
    width: 70%;
    height: 10%;

    display: flex;
    align-items: center;
}

input.submit-button {
    margin-top: 6%;
    padding-left: 20%;
    padding-right: 20%;
    color: #333;
    font-weight: 1000;
}

.img-shape {
    width: 100%;
    height: 100%;
    margin-top: -1%;
    z-index: 0;
    position: absolute;
    filter: drop-shadow(0px 10px 6px rgb(0 0 0 / 0.4));
}

#logout-button {
    margin-top: 3%;
    color: white;
    text-decoration: none;
    transition-duration: 100ms;
}

#logout-button:hover {
    color: black;
    transition-duration: 100ms;
}


/*
        ALERTS CLASSES
*/

.succes {
    background-color: green;
    color: white;
    font-weight: bold;
    font-family: "Comfortaa";
    width: 100%;
    height: 3%;
    text-align: center;
    padding: 10px;
    
    position: absolute;
    z-index: 999;
    top: 8%;

    display: flex;
    align-items: center;
    justify-content: center;

    animation: topToBottom ease 2s;
    -webkit-animation: topToBottom ease 2s;
    -moz-animation: topToBottom ease 2s;
    -o-animation: topToBottom ease 2s;
    -ms-animation: topToBottom ease 2s;
}

.error {
    background-color: red;
    color: white;
    font-weight: bold;
    font-family: "Comfortaa";
    width: 100%;
    height: 3%;
    text-align: center;
    padding: 10px;
    
    position: absolute;
    z-index: 999;
    top: 8%;

    display: flex;
    align-items: center;
    justify-content: center;

    animation: topToBottom ease 2s;
    -webkit-animation: topToBottom ease 2s;
    -moz-animation: topToBottom ease 2s;
    -o-animation: topToBottom ease 2s;
    -ms-animation: topToBottom ease 2s;
}

@keyframes topToBottom {
0% {
    margin-top: -23%;
}
100% {
    margin-top: 0%;
}
}

@-moz-keyframes topToBottom {
0% {
    margin-top: -23%;
}
100% {
    margin-top: 0%;
}
}

@-webkit-keyframes topToBottom {
0% {
    margin-top: -23%;
}
100% {
    margin-top: 0%;
}
}

@-o-keyframes topToBottom {
0% {
    margin-top: -23%;
}
100% {
    margin-top: 0%;
}
}

@-ms-keyframes topToBottom {
0% {
    margin-top: -23%;
}
100% {
    margin-top: 0%;
}
}

/* 
        BTN CLASSES
*/
.btn {
    border-radius: 5px;
    padding: 3%;
    font-size: 15px;
    text-decoration: none;
    margin: 1%;
    color: #fff;
    position: relative;
    display: inline-block;
    border: none;
    font-family: 'Comfortaa';
    transition-duration: 200ms;
}

.btn:active, .btn::selection {
    transform: translate(0px, 5px);
    -webkit-transform: translate(0px, 5px);
    box-shadow: 0px 1px 0px 0px;
    border: none;
}

.blue {
    background-color: #55acee;
    box-shadow: 0px 5px 0px 0px #3C93D5;
}

.blue:hover {
    background-color: #6FC6FF;
}

.green {
    background-color: #2ecc71;
    box-shadow: 0px 5px 0px 0px #15B358;
}

.green:hover {
    background-color: #48E68B;
}

.red {
    background-color: #e74c3c;
    box-shadow: 0px 5px 0px 0px #CE3323;
}

.red:hover {
    background-color: #FF6656;
}

.purple {
    background-color: #9b59b6;
    box-shadow: 0px 5px 0px 0px #82409D;
}

.purple:hover {
    background-color: #B573D0;
}

.orange {
    background-color: #e67e22;
    box-shadow: 0px 5px 0px 0px #CD6509;
}

.orange:hover {
    background-color: #FF983C;
}

.yellow {
    background-color: #f1c40f;
    box-shadow: 0px 5px 0px 0px #D8AB00;
}

.yellow:hover {
    background-color: #FFDE29;
}

/*
        FOOTER
*/

footer {
    width: 100%;
    height: 8%;
    background: linear-gradient(0deg, rgb(33, 147, 175) 0%, rgb(33, 147, 175) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 100%;
    font-family: Comfortaa;
}

footer h2, a {
    font-size: 100%;
    font-family: Comfortaa;
    color: white;
    text-decoration: none;
}

footer a:hover {
    color: black;
}