@font-face{
  src: url(font/Iosevka-Fixed-Slab.woff2);
  font-family: iksvo;
}
body{
      background: url(img/bg.jpg);
      background-size: cover;        /* Make image cover entire container */
      background-position: center;   /* Center the image */
      background-repeat: no-repeat;  /* Prevent tiling */
      background-attachment: fixed;  /* Optional: keeps image fixed during scroll */
    font-family: 'iksvo', sans-serif;
}

.container{
    max-width: 60%;
    margin: 0 auto;
    background-color: #1A1919;
    color: #ebebeb;
    border: 3px solid #000;
    border-radius: 1rem;
    box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.35), -5px 0px 5px rgba(0, 0, 0, 0.35);
    padding: 1rem;
}

.btn{
    display: inline-block;
    border: 2px solid #000;
    background-color: #222;
    color: #ebebeb;
    padding: 0.5rem 1.5625rem 0.5rem 1.5625rem;
    text-decoration: none;
    border-radius: .7rem;
    font-size: 1.2rem;
    box-shadow: 2px 2px 2px #030f14;
}

.btn-crnt{
    color: #000;
    background: #fff
}

.nav li{
    list-style: none;
    margin: 0 auto;
}

.nav{
    max-width: 60%;
    display: flex;
    margin: 1rem auto;
}

h2{
  text-align: center;
}

p{
  font-size: 1.2rem;
  width: 90%;
  margin: 1rem auto;
}


img{
    max-width: 100%;  /* Shrinks to fit container */
    display: block;   /* Removes inline gap under image */
    max-height: 20rem;
    margin: 0 auto;
}

.mjx-container {
  overflow-x: auto;
  overflow-y: hidden;
  display: block;
  max-width: 100%;
}

@media only screen and (max-width: 480px) {
  .container{
    max-width: 90%;
    padding: .5rem;
  }
  .nav{
    max-width: 100%;
  }
  p{
    font-size: 1.15rem;
  }
}