/******************************/
/*           QUOTE I          */
/******************************/

.quote-1 {
    font-family: 'Source Sans Pro', sans-serif;
    margin: auto;
    font-size: 1.6rem;
    padding: 0 1rem;
}

.quote-1 blockquote.quote {
    position: relative;
    text-align: center;
    padding: 4rem 4rem;
}

.quote-1 blockquote.EN {
    background:
        linear-gradient(to right, #fff 5px, transparent 5px) 0% 100%,
        linear-gradient(to left, #fff 5px, transparent 5px) 100% 0,
        linear-gradient(to bottom, #fff 5px, transparent 5px) 100% 0,
        linear-gradient(to top, #fff 5px, transparent 5px) 0 100%;
    background-repeat: no-repeat;
    background-size: 70px 70px;
    border-radius: 5px;
    margin: auto;
}

.quote-1 blockquote.quote:before,
.quote-1 blockquote.quote:after {
    font-family: FontAwesome;
    position: absolute;
    color: #ff3b88;
    font-size: 23px;
}

.quote-1 blockquote.EN:before {
    content: "\f10d";
    top: -12px;
    margin-right: -20px;
    right: 100%;
}

.quote-1 blockquote.EN:after {
    content: "\f10e";
    margin-left: -20px;
    left: 100%;
    top: auto;
    bottom: -12px;
}

/******************************/
/*           QUOTE II         */
/******************************/


.quote-2 {
    -webkit-transition: all 900ms cubic-bezier(0.165, 0.84, 0.44, 1);
    -moz-transition: all 900ms cubic-bezier(0.165, 0.84, 0.44, 1);
    transition: all 900ms cubic-bezier(0.165, 0.84, 0.44, 1);
    opacity: 0;
    margin-top: 30px; 
    margin-left: auto;
    margin-right: auto;
    font-family: 'Inter', sans-serif;
    font-size: 2rem;
    line-height: 1.2;
    font-style: italic;
    font-weight:900;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
     /* text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);  */
}

.quote-container {
    margin: 30px 0 30px 0;
}

.quote-2 .author {
    color: #ff3b88;
    font-style: normal;
    font-size: 1.5rem;
}

.line {
    -webkit-transition: width 900ms cubic-bezier(0.165, 0.84, 0.44, 1);
    -moz-transition: width 900ms cubic-bezier(0.165, 0.84, 0.44, 1);
    transition: width 900ms cubic-bezier(0.165, 0.84, 0.44, 1);
    width: 0px;
    height: 2px;
    background: #fff;
    margin: auto;
    margin-bottom: 18px;
    margin-top: 18px;
    border-radius: 5px;
} 

.quote-2.active {
    -webkit-transform: translateY(-30px);
    -moz-transform: translateY(-30px);
    transform: translateY(-30px);
    opacity: 1;
}

.quote-2.active .line {
    width: 13%;
}


/* activate if using gradient */

/* .quote-2 img {
    -webkit-animation: adjustHue 10s infinite;
    -moz-animation: adjustHue 10s infinite;
    animation: adjustHue 10s infinite;
} 

@-webkit-keyframes adjustHue {
    50% {
        -webkit-filter: saturate(150%) hue-rotate(-35deg);
    }
}

@-moz-keyframes adjustHue {
    50% {
        -moz-filter: saturate(150%) hue-rotate(-35deg);
    }
}

@keyframes adjustHue {
    50% {
        filter: saturate(150%) hue-rotate(-35deg);
    }
} */


/*****************************/
/*          FONTS            */
/*****************************/

@font-face {
    font-family: space-heavy;
    src: url("/static/fonts/space-heavy.otf");
}


/*****************************/
/*       CODE HILITE         */
/*****************************/


.codehilite {
  line-height: 1.2;
  background-color: #fff;
  padding: 5px;
  color: #000000;
  white-space: pre-wrap;
  white-space: -moz-pre-wrap !important;
  word-wrap: break-word;
  font-size: 14px;
  font-family: Consolas, Menlo, Monaco, Lucida Console, Liberation Mono,
    DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace, serif;
  width: 100%;
}

.codehilite {
    border: 5px solid #ddd; /* Border for separation */
    border-radius: 10px; /* Rounded corners */
    padding: 0.5em; /* Padding inside the container */
    overflow: hidden; /* Prevent inner overflow */
}

.codehilite pre {
    overflow-x: auto; /* Add horizontal scrollbar only if necessary */
    overflow-y: hidden; /* No vertical scrollbar */
    margin: 0; /* Remove extra margin */
    padding: 0.5em; /* Padding inside the pre block */
    background-color: transparent; /* Match background to .codehilite */
    border: none; /* Remove pre's default border */
}

.codehilite code {
    font-family: monospace;
    font-size: 1em; 
    line-height: 1.4em; 
    display: block; 
    background-color: transparent; 
}

/*****************************/
/*       DIV BOX DESIGN I    */
/*****************************/

.sphere-1 {
    position: absolute;
    width: 400px;
    height: 420px;
    border-radius: 74% 82% 70% 88%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
    background-color: rgba(255, 59, 136, .4);
    z-index: -1;
    transition: .5s;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.sphere-1:before,
.sphere-1:after {
    content: '';
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    z-index: -1;
    animation: RotateDiv 35s linear infinite;
}

.sphere-1:before {
    border-radius: 130% 151% 189% 166%;
    border: 5px solid #ff3b88;
    box-shadow: 0 0 10px #ff3b88;
    animation-delay: 0s;
}

.sphere-1:after {
    border-radius: 145% 86% 80% 90%;
    background-color: rgba(77, 22, 95, .7);
    animation-delay: .2s;
}

@keyframes RotateDiv {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/*****************************/
/*       DIV BOX DESIGN II   */
/*****************************/

.sphere-2 {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: -1;
    transition: .5s;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.sphere-2 span:nth-child(1) {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 59, 136, .3);
    border-radius: 74% 82% 70% 88%;
    animation: animate-2 50s linear infinite;   
}

.sphere-2 span:nth-child(2) {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 5px solid #fff;
    /* box-shadow: 0 0 10px #fff; */
    border-radius: 74% 82% 70% 88%;
    animation: animate-1 30s linear infinite;
}

.sphere-2 span:nth-child(3) {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 5px solid #ff3b88;
    /* box-shadow: 0 0 10px #ff3b88; */
    border-radius: 74% 82% 70% 88%;
    animation: animate-2 40s linear infinite;
}


@keyframes animate-1 {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

@keyframes animate-2 {
    0% {
        transform: rotate(360deg);
    }

    100% {
        transform: rotate(0deg);
    }
}