/* Fonts */
@font-face {
    font-family: 'Inter';
    src: url('../fonts/Inter_18pt-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Inter';
    src: url('../fonts/Inter_18pt-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: 'Inter';
    src: url('../fonts/Inter_18pt-Bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}


body {
    font-family: 'Inter', sans-serif;
}
.navbar-brand:hover{
    color:rgb(230,230,230);
    cursor: default;
}

/* Backgrounds */
.bg-gradian{
    background: linear-gradient(to right, rgb(181,38,106), rgb(35,53,140));
}
.bg-notwhite{
    background-color: rgb(230,230,230);
}
.bg-transparet{
    background-color:transparent;
}
.bg-lightblue{
    background-color:rgb(0,125,184);
}
.bg-not-black{
    background-color:rgb(33,37,41);
}
.bg-purple{
    background-color:rgb(141,38,119);
}
.bg-darkgreen{
    background-color: rgb(126,194,181);
}
.bg-lightgreen{
    background-color: rgb(146,206,194);
}
.bg-red{
    background-color:rgb(184,38,105);
}

/* Background-fill-vh */
.bg-40vh-gradian{
    width: 100%;
    height: 40vh;
    background: linear-gradient(to right, rgb(181,38,106), rgb(35,53,140));
}
.bg-45vh-gradian{
    width: 100%;
    height: 45vh;
    background: linear-gradient(to right, rgb(181,38,106), rgb(35,53,140));
}
.bg-50vh-gradian{
    width: 100%;
    height: 50vh;
    background: linear-gradient(to right, rgb(181,38,106), rgb(35,53,140));
}
.bg-55vh-gradian{
    width: 100%;
    height: 55vh;
    background: linear-gradient(to right, rgb(181,38,106), rgb(35,53,140));
}
.bg-60vh-gradian{
    width: 100%;
    height: 60vh;
    background: linear-gradient(to right, rgb(181,38,106), rgb(35,53,140));
}
.bg-65vh-gradian{
    width: 100%;
    height: 65vh;
    background: linear-gradient(to right, rgb(181,38,106), rgb(35,53,140));
}
.bg-70vh-gradian{
    width: 100%;
    height: 70vh;
    background: linear-gradient(to right, rgb(181,38,106), rgb(35,53,140));
}
.bg-80vh-gradian{
    width: 100%;
    height: 80vh;
    background: linear-gradient(to right, rgb(181,38,106), rgb(35,53,140));
}
.bg-88vh-gradian{
    width: 100%;
    height: 88vh;
    background: linear-gradient(to right, rgb(181,38,106), rgb(35,53,140));
}
.bg-100vh-gradian{
    width: 100%;
    height: 100vh;
    background: linear-gradient(to right, rgb(181,38,106), rgb(35,53,140));
}


/* Borders */
.border-none{
    border:none;
}
.border-only-bottom-1{
    border:none;
    border-bottom-width:1px;
    border-bottom-style: solid;
}
.border-only-bottom-2{
    border:none;
    border-bottom-width:2px;
    border-bottom-style: solid;
}
.border-only-bottom-3{
    border:none;
    border-bottom-width:3px;
    border-bottom-style: solid;
}
.border-only-bottom-4{
    border:none;
    border-bottom-width:4px;
    border-bottom-style: solid;
}

/* Border-Colors */
.border-not-white{
    border-color: rgb(230,230,230)
}
.border-gray{
    border-color:rgb(86,83,110);
}
.border-purple{
    border-color:rgb(141,38,119);
}
.border-pink{
    border-color:rgb(181,38,106);
}
.border-darkblue{
    border-color:rgb(35,53,140);
}
.border-lightblue{
    border-color:rgb(0,125,184);
}


/* Text-Colors */
.text-not-white{
    color: rgb(230,230,230);
}
.text-white{
    color:rgb(255,255,255);
}
.text-gray{
    color:rgb(86,83,110);
}
.text-purple{
    color:rgb(141,38,119);
}
.text-pink{
    color:rgb(181,38,106);
}
.text-darkblue{
    color:rgb(35,53,140);
}
.text-lightblue{
    color:rgb(0,125,184);
}


/* Buttons */
.btn-gradian {
    background: linear-gradient(to right, rgb(181,38,106), rgb(35,53,140));
    color: white;
    border: none;
    padding: 0.5rem 1rem;
    font-size: 1rem;
    border-radius: 0.375rem; /* Matches Bootstrap's .btn rounded corners */
    transition: all 0.3s ease-in-out;
    position: relative;
    overflow: hidden;
    border: 2px solid transparent;
}

.btn-gradian:hover {
    background: white;
    color: rgb(181,38,106); /* Text color becomes purple */
    border: 2px solid;
    border-image: linear-gradient(to right, rgb(181,38,106), rgb(35,53,140)) 1;
    border-radius: 0.375rem;
}


.btn-lightblue {
    background-color: rgb(0, 125, 184);
    border-color: rgb(0, 110, 160);
    color: white;
    transition: background-color 0.3s, color 0.3s, border-color 0.3s;
}

.btn-lightblue:hover {
    background-color: rgb(0, 110, 160);
    border-color: rgb(0, 95, 140);
}

.btn-lightblue:focus, 
.btn-lightblue:active {
    background-color: white !important; /* Turns white on click */
    border-color: rgb(0, 125, 184) !important; /* Keeps border blue */
    color: rgb(0, 125, 184) !important; /* Text also turns blue */
    box-shadow: 0 0 5px rgba(0, 125, 184, 0.5);
}

.btn-lightblue.disabled, 
.btn-lightblue:disabled {
    background-color: rgb(170, 210, 230);
    border-color: rgb(140, 180, 200);
    color: rgb(220, 230, 240);
}




/* Flip-Card */
.flip-card {
    background-color: linear-gradient(to right, rgb(181,38,106), rgb(35,53,140));
    width: 100px;
    height: 100px;
    border: none;
    perspective: 1000px; /* Remove this if you don't want the 3D effect */
  }
  
  /* This container is needed to position the front and back side */
  .flip-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 0.8s;
    transform-style: preserve-3d;
  }
  
  /* Do an horizontal flip when you move the mouse over the flip box container */
  .flip-card:hover .flip-card-inner {
    transform: rotateY(180deg);
  }
  
  /* Position the front and back side */
  .flip-card-front, .flip-card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden; /* Safari */
    backface-visibility: hidden;
  }
  
  /* Style the front side (fallback if image is missing) */
  .flip-card-front {
    background-color: linear-gradient(to right, rgb(181,38,106), rgb(35,53,140));
    box-shadow: 0px 0px 5px 3px rgba(0,0,0,0.4);
    color: white;
  }
  
  /* Style the back side */
  .flip-card-back {
    background-color: rgb(35,53,140);
    color: white;
    transform: rotateY(180deg);
  }