/* Colors for Project: 
Tyrian purple #6C1135
Amaranth purple #B50048
Turquoise #00D3C4
Light Sea Green #00B3A8
Saffron #F2C14E

Fonts for Project: 
Roboto Slab: 
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@500&display=swap" rel="stylesheet">
font-family: 'Roboto Slab', serif;

ABeeZee:
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=ABeeZee&display=swap" rel="stylesheet">
font-family: 'ABeeZee', sans-serif;
*/

/* Nav Bar Styling */
.navbar-brand img{
    width: 20vw;
    margin: 10px;
    margin: 0 0 0 30px;
}
.navbar {
    box-shadow: 0 3px 6px 0 #d6d6d6;
    display: flex;
}
.nav-item {
    font-family: 'ABeeZee', sans-serif;
    font-style: bold;
    margin: 10px;
    align-items: center;
    justify-content: center;
}
.nav-item a {
    color: black;
}
.container-fluid {
    display: flex;
    align-items: end;
}
.navbar-collapse {
    justify-content: flex-end;
    margin: 10px;
    margin-right: 100px;
}

/*Get the App Page*/
.head1 {
    margin: 2vw;
    background-color: #F2C14E;
    display: flex;
}
.head-info {
    width: 50%;
    margin: 1vw;
}
.downloadtoday {
    display: flex;
    background-color: #00B3A8;
    border-radius: 25px;
}
.gettingstarted {
    width: 50%;
    margin: 1vw;
    margin-right: 2vw;}
.appstores img{
    width: 10vw;
    padding: .5vw;
    padding-left: 0vw;}
.appstores {
    justify-content: center;}
.downloadtoday {
    padding: 1vw;
}
.logohead {
    padding: 1vw;
}
.gettingstarted img {
    width: 55vw;
}
.readwithlibby {
    padding: 2vw;
}
.jumbotron1 img {
    width: 100%;
}
.jumbotron1 {
    align-items: center;
    text-align: center;}
.downloadtoday img {
        width: 10vw;
}

/* Font styling for full page */
h1 {
    font-family: 'Roboto Slab', serif; 
}
p {
    font-family: 'ABeeZee',sans-serif;
}
h2 {
    font-family: 'Roboto Slab', serif;
    font-size: medium;
}
h3 {font-family: 'Roboto Slab', serif;
    font-size: small;}

/* Footer */
.footer1 img {
    width: 20vw;
}
.footer2 img {
    width: 15vw;
    padding: 1vw;
}
.footer2 {
    padding: 1vw;
    align-items: center;
    justify-content: center;
}
footer {
    display: flex;
    padding: 10px;
    padding: 0 0 0 30px;
    background: #6C1135;
}
.footercute {
    padding: 2vw;
    background-color: #00B3A8;
}
footer p {
    color: white;
}

/*Features Page*/
.displayfeatures {
    text-align: center;
    padding: 2vw;
}
.radial {
    display: flex;
    align-items: center;
    justify-content: center;
}
.radialItem {
    padding: 5vw;
    text-align: center;
}
.radialItem1 {
    padding: 2vw;
    background-color: #00B3A8;
    border-radius: 25px;
}
.divider1 {margin-bottom: 1vw;}
.radialItem img{
    width: 20vw;
}
.section2 {
    display: flex;
    align-items: center;
    justify-content: left;
    padding-top: 10vh;
    padding-bottom: 10vh;
}
.section2Text {
    width: 30vw;
    padding-left: 4vw;
}
.section2IMG {
    padding-left: 20vw;
}
.section2IMG img {
    width: 40vw;
}

/*Getting Started Page*/
.getstartedsection1 {
    padding: 2vw;
    text-align: center;
}
.librarycard {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: left;
}

.librarycard h1 {
    padding-top: 1.5vw;
    padding-bottom: 1.5vw;
    padding-left: 2vw;
    padding-right: 2vw;
    background-color: #00B3A8;
    border-radius: 100px;
}
.librarycard h3 {
    padding: 1vw;
}
.librarycard img {
    height: 20vw;
    padding: 2vw;
}

.librarycard2 {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: left;
    background-color: #F2C14E;
    padding: 1vw;
}
.librarycard2 h1 {
    padding-top: 1.5vw;
    padding-bottom: 1.5vw;
    padding-left: 2vw;
    padding-right: 2vw;
    background-color: #00B3A8;
    border-radius: 100px;
}
.librarycard2 h3 {
    padding: 1vw;
}
.yay img {
    width: 40vw;
    padding: 2vw;
}

.preloader {
    position: fixed;
    width: 100%;
    height: 100vh;
    z-index: 100000;
    background-color: white;
    top: 0;
    display: flex;
    align-items: center;
  }
  .preloader img {
    animation: spin 3s ease;
    transition: all;
    width: 150px;
    margin: 0 auto;
  }
  @keyframes spin {
    0% {
      transform: rotate(0deg);
    }
    50% {
      transform: rotate(360deg);
    }
    100% {
      transform: rotate(720deg);
    }}