/**
 * #******************************************************************************#
 * # Copyright(c) 2019-2023, Elemento srl, All rights reserved                    #
 * # Author: Elemento srl                                                         #
 * # Contributors are mentioned in the code where appropriate.                    #
 * # Permission to use and modify this software and its documentation strictly    #
 * # for personal purposes is hereby granted without fee,                         #
 * # provided that the above copyright notice appears in all copies               #
 * # and that both the copyright notice and this permission notice appear in the  #
 * # supporting documentation.                                                    #
 * # Modifications to this work are allowed for personal use.                     #
 * # Such modifications have to be licensed under a                               #
 * # Creative Commons BY-NC-ND 4.0 International License available at             #
 * # http://creativecommons.org/licenses/by-nc-nd/4.0/ and have to be made        #
 * # available to the Elemento user community                                     #
 * # through the original distribution channels.                                  #
 * # The authors make no claims about the suitability                             #
 * # of this software for any purpose.                                            #
 * # It is provided "as is" without express or implied warranty.                  #
 * #******************************************************************************#
 *
 * #------------------------------------------------------------------------------#
 * #elemento-monorepo-server                                                      #
 * #Authors:                                                                      #
 * #- Gabriele Gaetano Fronze' (gfronze at elemento.cloud)                        #
 * #- Filippo Valle (fvalle at elemento.cloud)                                    #
 * #------------------------------------------------------------------------------#
 *
 */

@import url('https://fonts.googleapis.com/css?family=Open+Sans');
@import url('https://fonts.googleapis.com/css?family=Red+Hat+Display');

* {
    font-family: "Red Hat Display";
    color: black;
}

body {
    background-color: #FFA600;
}

body::after {
    content: '';
    position: absolute;
    top: 10px;
    left: 10px;
    width: 100%;
    height: 40px;
    background-image: url("https://raw.githubusercontent.com/Elemento-Modular-Cloud/graphic-assets/main/marks/Marchio%20black.svg");
    background-repeat: no-repeat;
    animation: typeform 2s cubic-bezier(0.25,0.1,0.25,1) forwards;
}

.container {
    position: absolute;
    top: 50%;
    left: 50%;
    width:fit-content;
    text-align:center;
    transform: translateX(-50%) translateY(-50%);
}

.container * {
    opacity: 0;
    animation: typeform 2s cubic-bezier(0.25,0.1,0.25,1) forwards;
    animation-delay: .3s;
}

h1 {
    font-size: 3em;
}

h2 {
    font-size: 2em;
}

input, button {
    border: none;
    font-family: "Open Sans";
    outline: none;
}

input {
    background-color: transparent;
    min-width: 50vw;
    margin-bottom: 1px;
    border-bottom: solid 1px black;
    transition: all .1s ease-in-out;
    line-height: 2em;
    font-size: 1.5em;
}

input:hover {
    margin-bottom: 0px;
    border-bottom: solid 2px black;
}

input::placeholder {
    color: #AD7C31;
}

button {
    position: absolute;
    left: 0;
    font-size: large;
    border-radius: 4px;
    padding: 10px;
    background-color: black;
    color: white;
    font-weight: bold;
    margin-top: 1em;
}

button::before {
    content: attr(button-message);
}

button:hover {
    background-color: #33353B;
}

@keyframes typeform {
    0% {
        opacity: 0;
        transform: translateY(80%);
    }

    50% {
        opacity: 1;
        transform: translateY(5%);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}