/* FONT RALEWAY */
@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@100;200;300;400&display=swap');


html {
    font-size: 16px;
    font-family: 'Raleway', sans-serif;
    
}

main {
    width: 50.0rem;
    background-color: rgb(0, 0, 0);
    margin: 2.0rem auto;
    padding: 1.5rem;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}



.middle-stuff {
    background-color:rgb(0, 0, 0);
    height: 30.0rem;
    display:flex;
    justify-content: space-evenly;
    width: 85vw;
    max-width: 85vw;
    height: auto;
    color: aliceblue;
}
.right-middle-stuff{
    background-image: url("/images/backimage.svg");
    background-repeat:no-repeat ;
    background-position: cover;
    
}
.right-middle-stuff h1{
    font-size: 6em;
    font-weight: 100;
    text-align: right;
    align-self:flex-end;
    text-shadow: 1px 1px 3px #FF0000, 2px 2px 8px #0000FF;

}
.middle-stuff div{
    margin: 1.0em;
   
    
}
.the-form input{
    margin-bottom: 1.5em;
    width: 100%;
    background-color: black;
    border-top : none;
    border-left: none;
    border-right: none;
    border-bottom: 1px white solid;
    font-size: 1.0em;
    font-family: 'Raleway', sans-serif;
    
}
input[type=text] {
    border: none;
    font-size: 1.2em;
    padding: 0.3em;
    color: white;
    border-bottom: 1px solid rgb(255, 255, 255);
  }

 #message {
    margin-bottom: 1.5em;
    width: 100%;
    background-color: black;
    border-top : none;
    border-left: none;
    border-right: none;
    border-bottom: 1px white solid;
    font-size: 1.0em;
    font-family: 'Raleway', sans-serif;
    color: white;
  }
#send{
    width: 100%;
    height: 2em;
    font-size: 2.0em;
    background-color: white;
    font-weight: 100;
    border-radius: 10px;
    box-shadow: -2px -2px 8px blue, 2px 2px 8px red, 0px 5px 5px green;
}

.notification-sucess {
    text-align: center;
    align-items: center; 
    color: aliceblue;
    font-family: 'Raleway', sans-serif;
    display: none;
    background-color: rgb(0, 0, 0);
    height: 30.0rem;
    display: flex;
    justify-content: center; 
    align-content: center; 
    flex-direction: column; 
    width: 85vw;
    max-width: 85vw;
}

.notification-sucess h1 {
    font-size: 3em;
    font-weight: 100;
    text-align: center;
    color: aliceblue;
    font-family: 'Raleway', sans-serif;
    text-shadow: 1px 1px 3px #FF0000, 2px 2px 8px #0000FF;
    background-color: rgb(0, 0, 0);
    margin: 0; 
}

.tooltip {
    background-color:rgb(255, 255, 255);
    border:1px solid rgb(252, 47, 47);
    padding:10px 15px;
    width:200px;
    color:rgb(0, 0, 0);
    text-align:left;
    font-size:12px;
   
}
.ui-helper-hidden-accessible >div{
    display: none;
}

.tooltip[aria-describedby]::after {
    content: attr(data-tooltip-title);
    background-color: rgb(255, 255, 255);
    padding: 10px 15px;
    width: 200px;
    color: rgb(0, 0, 0);
    text-align: left;
    font-size: 12px;
    position: absolute;
    z-index: 9999;
    top: 0; 
   
    display: none;
}

.tooltip[aria-describedby]:hover::after {
    display: block;
}