/*General Styling*/
header {
    margin: 0;
    padding: 0;
    padding-top: 60px;
    position: relative;
}

header::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url('/Images/Header.jpg');
    filter: brightness(110%);
    background-size: cover;
    background-position-y: 70%;
    background-position-x: center;
    align-items: center;
    color: white;
    z-index: -1;
}

header h1 {
    color: whitesmoke;
    font-size: clamp(40px, 12vw, 100px);
}

.Info::before {
    content: '';
    position: absolute;
    left: 0;
    width: 100%;
    height: 60%;
    background-color: blue;
    background: linear-gradient(225deg, #89c0fb, dodgerblue);
    transform: skewY(10deg);
    transform-origin: top right;
    z-index: -2;
}

.Info h4 {
    color: whitesmoke;
    font-size: clamp(30px, 6vw, 50px);
}

.Info h5 {
    font-size: clamp(15px, 3vw, 30px);
}

.DropDown h5 {
    font-size: clamp(15px, 3vw, 20px);
}

.PageEnd h4 {
    font-size: clamp(12px, 8vw, 40px);
}

.PageEnd::before {
    content: '';
    position: absolute;
    left: 0;
    width: 100%;
    height: 40%;
    background-color: blue;
    background: linear-gradient(225deg, #fe8d38, #fbb37c);
    transform: skewY(10deg);
    transform-origin: top right;
    z-index: -2;
}

/*Site Styling*/
html, body {
    height: 100%;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    padding-bottom: 1.5rem;
}

body {
    background-size: cover;
    background-attachment: fixed;
    background-position-y: 50%;
}

h1 {
    font-family: caveatbrush-regular, cursive;
    font-size: clamp(40px, 10vw, 80px);
    color: whitesmoke;
}

h2 {
    font-family: caveatbrush-regular, cursive;
}

h3 {
    font-family: bungee-regular, cursive;
}

h4 {
    font-family: squadaone-regular, cursive;
    color: whitesmoke;
    font-size: clamp(30px, 6vw, 50px);
}

h5 {
    font-family: mina-regular, sans-serif;
}

p {
    font-family: mina-regular, sans-serif;
}

thead {
    background-color: lightslategray;
    font-size: 17px;
    color: white;
}

.content {
    padding-top: 1.1rem;
}

/*CONTAC US*/
.icon {
    border: 1px solid gray;
    border-radius: 7px;
    background-color: white;
    padding: 4px 12px;
    font-size: 20px;
}

.Iconsize {
    width: 30px;
    height: 30px;
}

/*Freeze first column in table*/
th:first-child, td:first-child {
    position: sticky;
    left: 0px;
}

#modalError {
    height: 50px;
    background-color: darkred;
    color: white;
}

#modalWarning {
    height: 50px;
    background-color: green;
    color: white;
}

.modal-header {
    height: 50px;
    background-color: rgb(52, 160, 188);
    color: white;
}

.modal-body {
    padding-bottom: 1px;
}

.name {
    color: lightgray;
}

.modal-title {
    font-size: 1.3rem;
}

/*Table Styling*/
thead {
    background-color: lightslategray;
    font-size: 17px;
    color: white;
}

.btn-primary, .btn-primary:active, .btn-primary:visited {
    background-color: #1b1a3c;
    color: #00bfbf;
    background-color: #1b1a3c;
    border-color: #00bfbf;
    border-radius: 4px;
    cursor: pointer;
    padding: 8px 22px;
}

.btn-primary:hover {
    color: midnightblue;
    border-color: midnightblue;
    background-color: skyblue;
    box-shadow: 3px 3px 6px rgba(0,0,0,0.6);
}

.btn-secondary, .btn-secondary:active, .btn-secondary:visited {
    background-color: white;
    color: darkslategrey;
}

.btn-secondary:hover {
    background-color: lightgray;
}

.card-header {
    background-color: #1b1a3c;
    font-weight: bold;
    color: white;
    font-size: clamp(15px, 5vw, 18px);
}

.PageItems select {
    padding: 5px;
}

.searchOn {
    display: flex;
    align-items: center;
    justify-content: center;
}

.SearchButton {
    background-color: lightslategray;
    border-color: dimgrey;
}

.SearchButton:hover {
    background-color: lightgray;
    box-shadow: none;
}

.Icons {
    display: flex;
    align-items: center;
    justify-content: center;
}

.icon {
    border: 1px solid gray;
    border-radius: 7px;
    background-color: white;
    padding: 4px 12px;
    font-size: 20px;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 5px;
}

.Iconsize {
    width: 20px;
    height: 20px;
}

.pagetitle {
    font-family: 'Open Sans', Helvetica, sans-serif;
    background: -moz-linear-gradient(top, #FFFFFF 20%, #D3D3D3 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(20%, #FFFFFF), color-stop(100%, #D3D3D3));
    background: -webkit-linear-gradient(top, #FFFFFF 20%, #D3D3D3 50%);
    background: -o-linear-gradient(top, #FFFFFF 20%, #F8F8FF 100%);
    background: linear-gradient(to bottom, #FFFFFF 20%, #D3D3D3 100%);
    padding: 12px 12px;
    position: fixed;
    width: 100%;
    z-index: 1;
    font-size: 20px;
    font-weight: 700;
    color: rgb(52, 160, 188);
    letter-spacing: 1px;
}

.ContactUs {
    font-family: comfortaa-variablefont_wght, cursive;
}



/*Frontend Styling*/

.AdvertiseWithUs h4 {
    font-size: clamp(12px, 8vw, 35px);
    color: black;
}

.AdvertiseWithUsPageEnd::before {
    content: '';
    position: absolute;
    left: 0;
    width: 100%;
    height: 40%;
    background-color: blue;
    background: linear-gradient(225deg, #fe8d38, #fbb37c);
    transform: skewY(10deg);
    transform-origin: top right;
    z-index: -2;
}

.InfoHeader::before {
    content: '';
    position: absolute;
    left: 0;
    width: 100%;
    height: 60%;
    background-color: blue;
    background: linear-gradient(225deg, #89c0fb, dodgerblue);
    transform: skewY(10deg);
    transform-origin: top right;
    z-index: -2;
}

.InfoHeader h4 {
    color: whitesmoke;
    font-size: clamp(30px, 6vw, 45px);
}

.InfoHeader h5 {
    font-size: clamp(15px, 3vw, 25px);
}


/*Font Links*/
@font-face {
    font-family: 'alumnisansinlineone-regular';
    src: url('fonts/alumnisansinlineone-regular.ttf') format('truetype');
}

@font-face {
    font-family: 'bungee-regular';
    src: url('../fonts/bungee-regular.ttf') format('truetype');
}

@font-face {
    font-family: 'caveatbrush-regular';
    src: url('../fonts/caveatbrush-regular.ttf') format('truetype');
}

@font-face {
    font-family: 'comfortaa-variablefont_wght';
    src: url('fonts/comfortaa-variablefont_wght.ttf') format('truetype');
}

@font-face {
    font-family: 'licorice-regular';
    src: url('../fonts/licorice-regular.ttf') format('truetype');
}

@font-face {
    font-family: 'mina-regular';
    src: url('../fonts/mina-regular.ttf') format('truetype');
}

@font-face {
    font-family: 'squadaone-regular';
    src: url('../fonts/squadaone-regular.ttf') format('truetype');
}

@font-face {
    font-family: 'whisper-regular';
    src: url('../fonts/whisper-regular.ttf') format('truetype');
}