@font-face {
    font-family: "CiscoSansTTB";
    src: url('./CiscoSansTTBold.eot');
    src: url('./CiscoSansTTBold.eot') format('embedded-opentype'),
        url('./CiscoSansTTBold.woff2') format('woff2'),
        url('./CiscoSansTTBold.woff') format('woff'),
        url('./CiscoSansTTBold.ttf') format('truetype');
    }
:root {
    --harder-purple: #543d7b;
    --hard-purple: #6d5593;
    --soft-purple: #968eaf;
    --grey: #bbc1cb;
    --off-white: #F5F5F5;
}
* {
    box-sizing: border-box;
    font-family: Georgia, 'Times New Roman', Times, serif;
    /* font-family: 'CiscoSansTTB'; */
}

a:hover { text-shadow: 0 0 5px #486D88; }

.container {
    color: var(--off-white);
    display: flex;
    flex-direction: column;
    height: 100%;
    margin: 0;
    max-height: 100%;
    background-image: linear-gradient(#2b5876, #4e4376);
    /* background-image: url('./bg.jpg'); */
    /* background-color: black; */
}
.nav {
    display: flex;
    margin-left: auto;
    margin-top: 2rem;
    margin-right: 2rem; 
    font-size: 14px;
}
.nav__item {
    margin-right: 2rem; 
    cursor: pointer;
    color: var(--off-white);
    font-family: 'CiscoSansTTB';
    text-decoration: none;

}
.nav__item:hover {
    color: var(--grey);
    border-radius: 20%;
    filter: drop-shadow(7px 7px 7px #666666);
    -webkit-filter: drop-shadow(7px 7px 7px #666666);
}
.nav__item:active {
    color: var(--soft-purple);
}
.chat {
    cursor: pointer;
    background: var(--off-white);
    position: fixed;
    bottom: 1rem;
    right: 1rem;
    padding: 1rem;
    font-size: 2rem;
    border-radius: 25px;
    display: flex;
    align-items: center;
    text-decoration: none;
}
.chat:hover {
    background: var(--hard-purple);
}
.chat:active {
    background: var(--harder-purple);
}
@import url('https://fonts.googleapis.com/css2?family=Alfa+Slab+One&display=swap');
body {
background-color:  #151719;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
.notice{
    /* display: flex;
    position: relative; */
    justify-content: center;
    margin: auto 0;
    padding-top: 5vw;
    font-size: 1vw;   
}
.notice span {
    font-family: 'Alfa Slab One';
    position: relative;
    display: inline-block;
}
/* Add styles for welcome text with colors */
.title {
    font-size: max(4em, 8vw);
    text-align: center;
    margin-top: 20vh;
}

.welcome-text {
    color: #00BCEB; /* Cisco blue for "welcome to" */
    display: block;
    font-size: 0.6em; /* Smaller than API Hub */
    margin-bottom: 10px;
}

/* Navigation icon styles */
.nav__icon {
    font-size: max(1em, 1.5vw) !important;
}

/* Arrow icon styles */
.arrow-icon {
    font-size: max(20px, 2vw) !important;
}

/* Animation spacing spans */
.spacing-1 { --i: 1; }
.spacing-2 { --i: 2; color: #74BF4B; }
.spacing-3 { --i: 3; color: #74BF4B; }
.spacing-4 { --i: 4; color: #74BF4B; }
.spacing-5 { --i: 5; }
.spacing-6 { --i: 6; color: #00BCEB; }
.spacing-7 { --i: 7; color: #00BCEB; }
.spacing-8 { --i: 8; color: #00BCEB; }

.waviy {
position: relative;
-webkit-box-reflect: below -.4em linear-gradient(transparent, rgba(0,0,0,.2));
font-size: 6vw
}

.waviy span {
font-family: 'Alfa Slab One', cursive;
position: relative;
display: inline-block;
color: #fff;
animation: waviy 1s 2;
animation-delay: calc(.1s * var(--i));

}
@keyframes waviy {
0%,40%,100% {
    transform: translateY(0)
}
20% {
    transform: translateY(-20px)
}
}