:root,
:host {
    --webipy-primary-color: rgba(0, 58, 89);
    --webipy-secondary-color: rgb(103, 103, 103);
    --webipy-third-color: rgb(247, 0, 0);
    --webipy-scrollbar-color: rgba(120, 120, 120, 0.485);
    --webipy-scrollbar-color-hover: rgba(120, 120, 120, 0.750); 
}
.navbar {
    background: var(--webipy-primary-color);
    width: 100%;
    height: 50px;
    border-radius: 10px;
    animation: second-entry 0.5s ease-in;
    display: flex;
    justify-content: center;
}
.navbar-btns {
    margin-top: 5px;
    margin-left: 10px;
    border-radius: 10px;
    border-width: 0px;
    width: 150px;
    height: 35px;
    background: var(--webipy-secondary-color);
    font-weight: bold;
    transition: width ease 0.5s;
    cursor: pointer;
    padding: 0px;
}
.navbar-btns:hover {
    width: 200px;
} 
.main-title {
    text-align: center;
    color: var(--webipy-primary-color);
}
button {
    transition: width ease 0.5s;
    width: 350px;
    height: 50px;
    border-radius: 0px 20px 20px 0px;
    border-width: 0px;
    background-color: var(--webipy-secondary-color);
    cursor: pointer;
}
button:hover {
    width: 400px;
}
h2, h3 {
    font-weight: 100;
    color: var(--webipy-primary-color);
}
.check-box {
    border-radius: 5px;
    background: var(--webipy-secondary-color);
    margin-top: 15px;
    margin-left: 145px;
    justify-content: center;
    width: 65px;
    height: 20px;
    display: none;
}
a {
    text-decoration: none;
    color: var(--webipy-third-color);
}
tt {
    border-radius: 5px;
    background: var(--webipy-secondary-color);
    color: rgb(255, 255, 255);
    font-family: Consolas;
}
a:focus {
    text-decoration: underline;
}
li::marker {
    content: url('../assets/img/custom_li_marker.svg');
}
.desc-lists {
    width: max-content;
    transition: background-color ease-in 0.42s;
}
.desc-lists:hover {
    background-color: rgb(0, 247, 0, 0.450);
}
svg {
   animation: entry 0.5s ease-in;
}
#rect28083, #rect14495 {
    animation: fade ease-in-out 0.6s infinite;
}
video {
    border-radius: 50px;
    margin-top: 0px;
    height: 720px;
    width: 720px;
}
img {
    width: 720px;
    border-radius: 20px;
}
footer {
    padding: 150px 0;
    background: var(--webipy-primary-color);
    border-radius: 20px;
}
footer h3 {
    color: var(--webipy-secondary-color);
    margin-top: -120px;
    margin-left: 5px;
    font-weight: 100;
}

::-webkit-scrollbar {
    background: rgb(0, 0, 0, 0);
}
::-webkit-scrollbar-thumb {
    background-color: var(--webipy-scrollbar-color);
    border-radius: 15px;
}
::-webkit-scrollbar-thumb:hover {
    background-color: var(--webipy-scrollbar-color-hover);
}
@keyframes fade { 
    from {
        opacity: 0;
    } to {
        opacity: 1;
    }
}
@keyframes entry {
    from {
        margin-top: 10px; 
        opacity: 0;
    }
    to {
        margin-top: 0px;
        opacity: 1;
    }
}
@keyframes second-entry {
    from {
        margin-top: 0px; 
        opacity: 0;
    }
    to {
        margin-top: 6px;
        opacity: 1;
    }
}