:root {
    --gray-custom-normal: #8f8f8f;
    --gray-custom-light: #ededee;
    --gray-custom-text: #3b3938;
    --red-custom: #ff595a;
}
html {
    scroll-behavior: smooth;
}
::-webkit-scrollbar {
    width: 10px;
    background-color: var(--gray-custom-light);
}
::-webkit-scrollbar-track {
    box-shadow: inset 0 0 5px rgb(209, 209, 209);
}
::-webkit-scrollbar-thumb {
    background: var(--gray-custom-text);
}
::-webkit-scrollbar-thumb:hover {
    background: var(--gray-custom-text);
}
::selection {
    color: #fff;
    background: #000000;
}
::-moz-selection {
    color: #fff;
    background: #000000;
}
::marker {
    content: "";
    display: none;
}
.max-videosize {
    max-height: 51rem;
}
body {
    font-family: "Montserrat", sans-serif;
    color: var(--gray-custom-text);
    font-weight: 500;
}
.navbar--style {
    -webkit-transition: background-color 200ms linear;
    -moz-transition: background-color 200ms linear;
    -o-transition: background-color 200ms linear;
    -ms-transition: background-color 200ms linear;
    transition: background-color 200ms linear;
}

.switch {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 34px;
}

/* Hide default HTML checkbox */
.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

/* The slider */
.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    -webkit-transition: 0.4s;
    transition: 0.4s;
}

.slider:before {
    position: absolute;
    content: "";
    height: 26px;
    width: 26px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    -webkit-transition: 0.4s;
    transition: 0.4s;
}

input:checked + .slider {
    background-color: #000000;
}

input:focus + .slider {
    box-shadow: 0 0 1px #000000;
}

input:checked + .slider:before {
    -webkit-transform: translateX(26px);
    -ms-transform: translateX(26px);
    transform: translateX(26px);
}
.anima-card:hover {
    height: 115%;
}
.morelink {
    color: var(--gray-custom-normal);
}
.morelink:hover {
    color: var(--red-custom);
}
.otherProj--bg {
    background: rgb(255, 255, 255);
    background: linear-gradient(
        0deg,
        rgba(255, 255, 255, 1) 0%,
        rgba(255, 255, 255, 0.5) 33%,
        rgba(255, 255, 255, 0) 100%
    );
}

.height-75 {
    height: 75vh;
}

.category--title {
    -moz-animation: fade-in-left 0.5s ease-in; /* Firefox */
    -webkit-animation: fade-in-left 0.5s ease-in; /* Safari and Chrome */
    -ms-animation: fade-in-left 0.5s ease-in; /* IE10 */
    -o-animation: fade-in-left 0.5s ease-in; /* Opera */
    animation: fade-in-left 0.5s ease-in;
}

.image--container {
    display: block;
    content: "";
    width: 100%;
    height: 0;
    padding-bottom: 66.6666666667%;
}

.column {
    flex: 50%;
    max-width: 50%;
}

/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
    .column {
        flex: 100%;
        max-width: 100%;
    }
}

@keyframes fade-in-left {
    0% {
        opacity: 0;
        transform: translateX(-50px);
    }
    66% {
        opacity: 0;
        transform: translateX(-25px);
    }
    100% {
        opacity: 1;
        transform: translateX(0px);
    }
}
@-webkit-keyframes fade-in-left {
    0% {
        opacity: 0;
        transform: translateX(-50px);
    }
    66% {
        opacity: 0;
        transform: translateX(-25px);
    }
    100% {
        opacity: 1;
        transform: translateX(0px);
    }
}
@-moz-keyframes fade-in-left {
    0% {
        opacity: 0;
        transform: translateX(-50px);
    }
    66% {
        opacity: 0;
        transform: translateX(-25px);
    }
    100% {
        opacity: 1;
        transform: translateX(0px);
    }
}
@-o-keyframes fade-in-left {
    0% {
        opacity: 0;
        transform: translateX(-50px);
    }
    66% {
        opacity: 0;
        transform: translateX(-25px);
    }
    100% {
        opacity: 1;
        transform: translateX(0px);
    }
}
