/* Variables */
:root{
    --main-bg-color: rgb(255, 255, 255);
    --main-fg-color: #223691;
    --red-button-color: rgb(131, 46, 46);
    --green-button-color: rgb(42, 98, 42);
    --yellow-button-color: rgb(177, 140, 4);
    font-family: 'Poppins', sans-serif;
}

.container
{
    padding: 16px;
    /* max-width: 50%; */
    margin: auto;
    min-width: 300px;
    font-family: "Poppins";
    text-align: center;
}

.container hr{
    box-shadow: 2px 1px 1px rgb(61, 61, 61); 
    margin-top: 0%;
    margin-bottom: 2rem;
    color: var(--main-fg-color);
    background-color: var(--main-fg-color);
    height: 2px;
}

.horizontal{
    display: flex;
    flex-direction: row;
    justify-content: left;
}


/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}




/* Firefox */
input[type=number] {
  -moz-appearance: textfield;
}

/*CARD*/

.card{
    border: var(--main-fg-color) solid 3px;
    border-radius: 20px;
    width: fit-content;
    margin: auto;
    padding: 15px;
}
.card input{
    text-align: center;
}

.card form{
    width:fit-content;
}

.card tr{
    padding: 15px;
    text-align: left;
}

.card td{
    padding: 0px 15px;
}

/*ENDCARD*/

.label-and-box
{
    display: grid;
    width: 100%;
}

input
{
    border-radius: 10px;
    border: 1px solid var(--main-fg-color);
    padding: 12px 20px;

}

.label-and-box input[type=text], input[type=password]
{
    width: 50%;
    margin: auto;
    margin-bottom: 5%;
    display: inline-block;
    box-sizing: border-box;
}
.number-and-label
{
    margin: 2.5% auto;
    max-width: 75%;
    width: fit-content;
}

.number-and-label label{
    margin: 0% 2.5%;
}

.names{
    width: 100%;
    margin: auto;
    display: flex;
    justify-content: space-evenly;
}
.names input
{
    text-align: center;
    width: 40%;
    margin-bottom: 5%;
}
button {
    background-color: var(--main-fg-color);
    color: var(--main-bg-color);
    padding: 14px 20px;
    border: none;
    border-radius: 10px;
    cursor: pointer;
}
.signup button {
    width: 34%;
}
.intro button{
    width: 25%;
    margin: auto;
}

.intro.container{
    max-width: 75%;
}

/*
MODAL

Modal Background*/
.modal-background{
    display: none;
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

.modal-content{
    background-color: var(--main-bg-color);;
    margin: 15% auto; /* 15% from the top and centered */
    padding: 20px;
    border: 1px solid var(--main-fg-color);;
    width: 80%; /* Could be more or less, depending on screen size */
}

/* The Close Button */
.close {
    color: var(--red-button-color);;
    float: right;
    font-size: 28px;
    font-weight: bold;
  }
  
  .close:hover,
  .close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
  }


/*END MODAL*/