@import url('https://fonts.googleapis.com/css2?family=Arima:wght@500&family=Cormorant+Upright&family=Manrope&family=Montserrat+Alternates&display=swap');

 /* font-family: 'Arima', cursive;
font-family: 'Cormorant Upright', serif;
font-family: 'Manrope', sans-serif;
font-family: 'Montserrat Alternates', sans-serif; */

/*
 * ─── GLOBALS ────────────────────────────────────────────────────────────────────
 */
 :root {
  /* var (--bright-green) */
  --bright-green: rgb(79, 231, 41); 
  /* var (--light-cyan) */
  --light-cyan: hsl(193, 38%, 86%);
  /* var (--neon-green) */
  --neon-green: hsl(150, 100%, 66%);
  /* var (--grayish-blue) */
  --grayish-blue: #313a48;
  /* var (--dark-grayish-blue) */
  --dark-grayish-blue: #202733;
  /* var (--white) */
  --white: white;
 }

* {
  margin: 0;
  padding: 0;
}

body, html {
    background-color: #202733;
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
    font-family: 'Manrope', sans-serif;
}

.parallax {
    /* The image used */
    background-image: url("../assets/bg-img.jpg");
     /* Full height */
    height: 100%;
     /* Create the parallax scrolling effect */
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
  }
  
main {
    display: flexbox;
    background-color: #202733;
    transition: 1s ease-in-out;
    padding-top: 10px;
}

.flex-container {
    padding: 30px;
    background-color: #202733;
    color:hsl(193, 38%, 86%);
    text-align: center;
}

.table {
    background-color:hsl(193, 38%, 86%);
    border: 1px black solid;
    text-align: center;
}

th {
    font-family: 'Montserrat Alternates', sans-serif;
}
#main-col {
    min-width: 300px;
}

td {
    height: 30px;
}