/* CSS HEX */
/* english-violet: #403856ff;
flirt: #901c63ff;
red-purple: #e00070ff;
medium-blue: #0000ccff;
screamin-green: #7df468ff;
yellow-orange-color-wheel: #ff9900ff; */




* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }
  


body {
    background-color: #000000;
    display: flex;
    flex-direction: column;
    align-items: center;
}

body {
    overflow-x:hidden;
}
/* 

body {
    -ms-overflow-style: none;
    scrollbar-width: none;
    overflow-y: scroll; 
}

body::-webkit-scrollbar {
    display: none;
} */



header {
    width: 100vw;
    height: 100px;
    background-color: #FFEA00;
    border-bottom: #780096 solid 5px;

    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;

    font-size: 30pt;
    font-family: 'Teko';
    font-weight: 500;
}

#header-container {
    width: 850px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

#logo img {
    width: 150px;
}

.header-link {
    color:#FF00B7;
    text-decoration: none;
    padding: 0px 5px;
}

.header-link:hover {
    color:black;
    text-decoration: none;
}



main {
    width: 850px;
    height: 100%;
    padding: 25px;
}


h1 {
    font-family: 'Teko';
    color: #00D4FF;
    font-size: 55pt;
}

h2, h3 {
    font-family: 'PT Sans Narrow';
    color: #FF00B7;
}


h2, h3 a {
    color: #FFEA00;
}

h2, h3:hover a {
    text-decoration: none;
    color: #FFFFFF;
}



td {
    font-family: 'PT Sans Narrow';
    font-weight: 400;
    color: #FFFFFF;
}

td a {
    font-family: 'PT Sans Narrow';
    font-weight: 700;
    color: #FFEA00;
}


.main-button, .main-button a {
    height: 40px;
    font-family: 'Teko';
    font-weight: 400;
    border-radius: 7px;
    color: #000000;
    background-color: #FFEA00;
    text-decoration: none;
    padding: 4px 8px;
}


.main-button:hover, .main-button:hover a {
    background-color: #780096;
    text-decoration: none;
    color: #FFEA00;
}


.window {
    margin-top: 25px;
    padding: 5px;

    background-color: #210029;
    border: #FFEA00 solid 5px;
    border-radius: 10px;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

table {
    margin: 15px 0px;
}

th {
    color: #00D4FF;
    font-family: 'PT Sans Narrow';
    font-weight: 700;
    font-size: 20pt;
    padding-right: 20px;
}

td {
    padding: 5px 10px;
    font-family: 'PT Sans Narrow';
    font-weight: 400;
    font-size: 11pt;
}

.edit-image {
    width: 25px;
}

.alert {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

#alert-btn:hover {
    cursor: pointer;
}

#alert-btn {
    color: black;
}

.giant-btns {
    width: 225px;
    height: 75px;
    font-size: 35pt;

}


input[type=text], input[type=password], input[type=datetime-local], textarea {
    color: black;
}

select {
    background-color: black;
    font-family: 'PT Sans Narrow';
}


.horizontal-section {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    margin-bottom: 25px;
}

.list-all-but-tables {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
}

.delete-btn {
    margin-left: 25px;
}

.margin-left {
    margin-left: 25px;
}


footer {
    margin-top: 75px;
    margin-bottom: 75px;
}

footer h5 {
    display: flex;
    flex-direction: row;
    justify-content: center;
    color: #780096;
    font-size: 12pt;
}

footer a {
    margin-left: 6px;
    color: #FFEA00;
}

#linkedin:hover {
    color: #00D4FF;
    text-decoration: none;
}


footer hr {
    width: 100vw;
    background-color: #FFEA00;
}

 /* This is just for the test account information at the bottom of the login page. Will be removed when the app is fully moved to full-production ready state. */

#test-information-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-top: 75px;
}

.test-information {
    color: #00D4FF;
    font-family: 'PT Sans Narrow';
    font-weight: 400;
    font-size: 12pt;
}
