@import url('https://fonts.googleapis.com/css2?family=Fredoka+One&family=Montserrat&family=PT+Sans&display=swap');
@import './dsdf.css';

:root {
    font-size: 16px;
    font-family: 'Montserrat', sans-serif;
    color: white;
    background:#434a46
}

.brand-logo {
    font-family: 'Fredoka One', cursive;
    text-shadow: 2px 4px #434a46;
}

.start-sidebar {
    background: linear-gradient(to bottom right, #43C6AC, #F8FFAE);
    height: 5rem !important;
    padding: 1rem 2rem !important;
    font-family: 'Fredoka One', cursive;
    text-shadow: 2px 4px #434a46;
}

.navbar-fixed {
    z-index: 999 !important;
}

.fad {
    --fa-primary-color: #434a46;
    --fa-secondary-color: #F8FFAE;
}

blockquote {
    border-left: 5px solid #43C6AC !important;
}

nav {
    background: linear-gradient(to bottom right, #43C6AC, #F8FFAE);
    height: 5rem;
}

nav .sidenav-trigger, nav .brand-logo, .topnav {
    margin: 0.5rem 1rem;
}

h2, h3, h4 {
    background: linear-gradient(to bottom right, #43C6AC, #F8FFAE);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    word-wrap: break-word;
}

.text-content {
    word-wrap: break-word;
    animation: slide-in-left 1s cubic-bezier(0.215, 0.610, 0.355, 1.000) both;
}

.sidenav {
    background:#434a46;
}

nav .topnav a {
    color: #434a46 !important;
    text-shadow: 1px 2px 3px green;
}

.text-color {
    color: white !important;
}

.navbar-nav {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
}

.navbar-logo {
    width: 100%;
    font-family: 'Fredoka One', cursive;
    font-size: 2rem;
    color: rgb(37, 134, 58);
}

.logo {
    background: linear-gradient(to right, #43C6AC, #F8FFAE);
    height: 5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 1.5rem;
}

.logo-text {
    font-size: 1.7rem;
}

.logo > i {
    transition: all 0.2s ease-in-out;
    display: flex;
    align-items: center;
}

.logo > i:hover {
	text-shadow: 1px 1px #43C6AC, 2px 2px #43C6AC, 3px 3px #43C6AC;
    transform: translateX(-3px);
}

.card {
    animation: slide-in-left 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

@keyframes slide-in-left {
    0% {
      transform: translateX(-1000px);
      opacity: 0;
    }
    100% {
      transform: translateX(0);
      opacity: 1;
    }
  }

.card .card-action {
    background: linear-gradient(to bottom right, #43C6AC, #F8FFAE);
}
  
.card .card-action a:not(.btn):not(.btn-large):not(.btn-small):not(.btn-large):not(.btn-floating) {
    color: white !important;
}