@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700;800&display=swap");


body,html {
  background-image: linear-gradient(#11257d, 
  black);
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  font-family: "Montserrat", sans-serif;
 
}

.main {
  display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   text-align: center;
  min-height: 40vh;
}

.main span {
  color: white;
  font-size: 15px;
  font-weight: bold;
}


.glass-box {
  background: transparent;
  -webkit-box-shadow: rgba(255, 255, 255, 10.00) 0px 0px 0px 0.20px inset;
  box-shadow: rgba(255, 255, 255, 0.00) 0px 0px 0px 0.5px inset;
}

.nav-link2,
.navbar-brand2 {
  transition: 0.2s !important;
  text-align: left;
}

.nav-link2:hover,
.navbar-brand2:hover {
  color: #0d6efd !important;
  transition: 0.2s !important;
}


.vs-div {
  margin: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 5px;
}

.animate__animated.animate__shakeY {
  --animate-duration: 14s;
}

.vertical-center {
  min-height: 90%;
  min-height: 90vh;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: middle;
  -webkit-align-items: middle;
  -moz-box-align: center;
  -ms-flex-align: center;
  align-items: middle;
  width: 90%;
  -webkit-box-pack: center;
  -moz-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
}



/* Float four columns side by side */

.header a {
    font-family: var(--Snigle-font);
}

header {
    background: linear-gradient(#11257d, black);
    background-size: 200% 200%;
    height: 100vh;
    overflow: hidden;
}

@media all and (min-width:375px) and (max-width: 667px) {
    header {
        background: linear-gradient(38deg, rgba(86, 12, 81, 1) 0%, rgba(16, 5, 31, 1) 50%, rgba(17, 25, 106, 1) 100%);
        background-size: 200% 200%;
        height: 125vh;
        overflow: hidden;
    }
}

footer {
    background: linear-gradient(38deg, rgba(86, 12, 81, 1) 0%, rgba(16, 5, 31, 1) 50%, rgba(17, 25, 106, 1) 100%);
    background-size: 150% 150%;
}

@keyframes gradient {
    0% {
        background-position: 0 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0 50%;
    }
}

header .nav-item {
    padding: .9em;
}

header .nav-link {
    color: #fff;
}

header .row .col-md-7 {
    padding: 32vmin 1vmax;
    padding-bottom: 35vmin;
    font-family: var(--Rubik-font);
    color: #fff;
}

header .row .col-md-5 img {
    padding: 19vmin 1vmax;
    max-width: 100%;
}

.card {
  transition: .2s ease;
  color: white;
  background: linear-gradient(#11257d, black);
  border-radius: 10px;
  border-color: rgb(49, 13, 99);
}

.card:hover {
    background-color: rgb(31, 9, 61);
    border-radius: 10px;
    border-color: rgb(49, 13, 99);
    transform: scale(1.02);
    transition: .2s ease;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}

.main button {
  width: 130px;
  border-radius: 5px;
  border: 1px solid royalblue;
  height: 40px;
  background: royalblue;
  color: white;
  font-family: "Montserrat", sans-serif;
}
 
.main btn {
  width: 125px;
  border-radius: 5px;
  border: 1px solid royalblue;
  height: 35px;
  margin: 5px;
  padding: 5px;
  font-size: 13px;
  background: royalblue;
  color: white;
  font-family: "Montserrat", sans-serif;
}