@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,100..700;1,100..700&display=swap');

body {
    background-color: #ffffff;
    color: #222222;
    height: 100%;
    background-repeat: no-repeat;
    background-attachment: fixed;
    font-size: 20px; 
    font-family: "Roboto Mono", monospace;
    font-weight: 300;
}

body.dark-mode {
        background-color: #222222; /* Very Dark Gray */
        color: #ececec; /* White Text */
    }

.center-rail{
    width:900px; 
    margin: 0 auto; 
    opacity:0; 
    animation: fade-slide .5s ease-in;
    animation-fill-mode: forwards;
}

.container{
    padding-top: 30px; 
    position: relative;
}

.container a{
    color: #00ABDF; 
    text-decoration:none;
    transition: .2s ease-in-out;
}
.container a:hover{
    color: #FF6D90; 
}

.container ul{
    list-style-type: "> ";
}

.pink{
    color: #FF6D90; 
}
.blue{
    color: #00ABDF; 
}
.green{
    color: #00BC40; 
}
.orange{
    color: #f39933; 
}

@keyframes fade-slide{
    0%{ 
      opacity: 0;
    }
    50%{ 
        opacity: .3;
      }
    100%{ 
      opacity: 1; 
    }
  }


@media only screen and (max-width: 900px){
    .center-rail{
        width:100%; 
        margin: 10px auto; 
    }
    .container{
        position: relative;
        top: 10px; 
        border-radius: 50px;
        /* top right bottom left  */
        padding: 50px 20px 30px; 
        margin: 0px auto 0px auto; 
    }
}