/* COLOR PALETTE
black: #111112
blue: #5da9f0
yellow: #ecc828
purple-pinkish: #cd63f7 maybe
*/
html, body {
    padding:0;
    margin:0;
    height:100%;
    width:100%;
    max-width:100%;
    overflow-x:hidden;
}
p {
    color:#515174;
    margin:0;
    padding:0;
    font-size:1em;
}
img {
   width:100%;
   object-fit: fill;
}
td {
   text-align:center;
}

.aip {
    color:#4b4b4b;
}
.aip::hover {

}
/* USE P FOR EVEYTHING JUST CHANGE FONT, COLOR, AND SIZE IN THESE DIFFERENT CLASSES */
.xlh {
   font-family: 'Inter';
   font-size:5px;
   color:#000000;
   text-align: left;
   margin:0;
   /* word-spacing: -12px;
   letter-spacing:-4px; */
}
.lh {
    font-family: 'Inter';
   font-size: 4vw;
   color:#000000;
   text-align: left;
   margin:0;
}
.h {
    font-family: 'Inter';
   font-size: 35px;
   color:#000000;
   text-align: left;
   margin:0;
   font-weight:700;
}
.t {
    font-family: 'Inter', sans-serif;
    color:#4b4b4b;
    font-size:15px;
    margin:0;
}
.st { 
    font-family: 'Inter';
    color:#4b4b4b;
   font-size:13px;
   margin:0;
}

.imgg {
    margin: 0 auto;
    margin-bottom:10px;
    /* display: block; */
    /* max-width: 40%; */
    max-height:25vh;
    height:25vh;
    width: auto;
}
/* .imgg:hover {
  transform: scale(1.05) rotate(3deg);
} */
a {
    font-family: 'Inter';
    color:#4b4b4b;
    font-size:14px;
    display: inline-block;
    transition: transform 0.1s ease;
}
.random-tilt:hover {
transform: scale(1.05) rotate(var(--tilt, 3deg));
}
.al {
    color:#4f5a66; 
    pointer-events: none;
}

.al:hover {
    color:#4f5a66; 
}
@media screen and (max-width:1200px) {
   .lh {
      font-size: 32px;
   }
   .h {
      font-size:30px;
   }
   .t {
      font-size:14px;
   }
   .st {
      font-size:13px;
   }
   a {
    font-size:14px;
   }
   /* .imgg {
    max-width: 100%;
   } */
}

.left-side,.right-side {
    padding:0;
    margin:0;
    height: 100vh;
    width:100%;
    position:relative;
}
/* 
@media screen and (min-width:992px) {
    .left-side, .right-side {
        height:100vh;
    }
} */
@media screen and (max-width:4000px) {
    /* .centered-y {
        width:60%;
    }
    .centered {
        width:60%;
    } */
    .c {
        width:40%;
    }
}
@media screen and (max-width:1200px) {
    /* .centered-y {
        width:70%;
    }
    .centered {
        width:70%;
    } */
    .c {
        width:60%;
    }
}
@media screen and (max-width:800px) {
    /* .centered-y {
        width:80%;
    }
    .centered {
        width:80%;
    } */
    .c {
        width:90%;
    }
}
/* If you want the content centered horizontally and vertically */
.c {
    left: 50%;
    transform: translate(-50%, 0%);
    max-width:100%;
    position: absolute;
    padding:0;
    margin:0;
    margin-top: 50px;
}
/* .centered {
    position: absolute;
    top: 50%;
    left: 50%;
    text-align:centered;
    transform: translate(-50%, -50%);
}
.centered2 {
    position: absolute;
    left: 50%;
    transform: translate(-50%, 0%);
}
.relative-centered {
   position:absolute;
   width:90%;
   max-height:100%;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
} */
.link-icon {
   text-align: center;
   width:50px;
   height:50px;
   text-decoration: none;
   transition: transform 0.3s, opacity 1s;
   display: inline-block;
   transform: scale(1, 1);
   opacity:0.7;
   background-repeat:no-repeat;
   margin:15px;
   /* filter: drop-shadow(2px 2px 1px rgba(21, 29, 39, 0.6)); */
}
.disabled {
    opacity:0.2;
    pointer-events: none;
}
.icon {
   width:50px;
   height:50px;
   background-repeat:no-repeat;
}
.link-icon:hover {
    opacity:1;
    transform: scale(1.15, 1.15);
}

.blinking-cursor {
    font-family: 'Roboto Mono', monospace;
    font-size:65px;
    color: #111112;
    display:inline-block;
    -webkit-animation: 1s blink step-end infinite;
    -moz-animation: 1s blink step-end infinite;
    -ms-animation: 1s blink step-end infinite;
    -o-animation: 1s blink step-end infinite;
    animation: 1s blink step-end infinite;
}
@keyframes blink {
    from, to {
        color: transparent;
    }
    50% {
        color: black;
    }
}
@-moz-keyframes blink {
    from, to {
        color: transparent;
    }
    50% {
        color: black;
    }
}
@-webkit-keyframes blink {
    from, to {
        color: transparent;
    }
    50% {
        color: black;
    }
}
@-ms-keyframes blink {
    from, to {
        color: transparent;
    }
    50% {
        color: black;
    }
}
@-o-keyframes blink {
    from, to {
        color: transparent;
    }
    50% {
        color: black;
    }
}

.current { color: dodgerblue; }
.current:hover { color: #6cb7ff; }

.mobile-container {
    text-align: center;
}

#mobile-links-show {
    border: none;
    outline: none;
    font-size: 2em;
}

#mobile-links-show:hover {
    cursor: pointer;
    color: #707070;
}

#mobile-links {
    display: block;
    opacity: 0;
    text-align: center;
    margin-top: 10px;
    margin-left: -32px;
    transition: opacity 0.5s;
    background-color: #5da9f0;
}

.mobile-link {
    display: block;
    position: relative;
    width: 100vw;
    height: 40px;
    background-color: #5da9f0;
    text-decoration: none;
    color: white;
    padding-top: 5px;
    padding-bottom: 15px;
}

.mobile-link:hover {
    cursor: pointer;
    color: lightgray;
}

.current-mobile { color: black; }
.current-mobile:hover { color: dimgray; }

#read-more {
    font-size: 1.25em;
    animation: bounce 2s ease-in-out infinite;
    position: absolute;
    left: 50%;
    top: 85%;
    transform: translate(-50%, -50%);
    transition: opacity 0.6s;
    opacity: 0;
}

.read-more-text {
    color: black;
    font-weight: 600;
}

.read-more-arrow { font-size: 1.5em; }

@keyframes bounce {
    0% { transform: translate(-50%, 0px); }
    50% { transform: translate(-50%, -15px); }
    100% { transform: translate(-50%, 0px); }
}

.text-wrapper{
   width: 100%;
   text-align: center;
   display: flex;
   flex-flow: row nowrap;
   justify-content: space-between;
}
.slanted-reminder {
   transform:rotate(15deg);
}
.bottom-bar {
   position: fixed;
   /* background-image: linear-gradient(to bottom, rgba(255,0,0,0), rgb(232, 233, 235)); */
   width:100%;
   text-align: center;
   padding:2vh;
   bottom:0;
   margin:0;
}
/* width */
::-webkit-scrollbar {
    width: 6px;
  }
  
  /* Track */
  ::-webkit-scrollbar-track {
    background: #0000001a;
  }
  
  /* Handle */
  ::-webkit-scrollbar-thumb {
    background: #0000001a;
  }
  
  /* Handle on hover */
  ::-webkit-scrollbar-thumb:hover {
    background: #00000028;
  }