:root {
    --main-colour: #031850;
    --accent-colour: #010A22;
    --highlight-colour: #0047FF;
    --light-highlight-colour: #1A3170;
    --x-tra-large-font: 82px;
}
.temp-border {
  border-style: solid;
  border-color: red;
}
/* Fonts */
@font-face {
  font-family: 'Outfit';
  src: url('../fonts/Outfit-ExtraBold.ttf') format('truetype');
  font-weight: bolder;
  font-style: normal;
}
/* Defaults */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

a {
    text-decoration: none;
    color: white;
}
ul li {
  list-style-type: lower-roman;
}
body {
    background: var(--main-colour);
    font-family: 'Outfit', sans-serif;
    width: 100%;
}

/* navigation */
.link {
  margin: 0 25px;
}
    
.nav-container {
  display: flex;
  position: fixed;
  bottom: 20px; 
  left: 50%;
  width: max-content;
  height: 50px;
  align-items: center;
  transform: translateX(-50%);
  background-color: var(--accent-colour);
  border-radius: 25px;
  z-index: 1000; /* Ensure it sits on top */
}

ul {
  list-style-type: none;
}

#main-container {
  display: flex;
  flex-direction: row;
}

.container {
  text-wrap: wrap;
}

.subcontainer {
  background-color: var(--light-highlight-colour);
  border-radius: 25px;
  align-items: center;
  /* height: 100px; */
}

.center {
  /* border: 5px solid; */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 50px;
}

.subcontainer button {
  background-color: var(--highlight-colour);
  border: none;
  color: white;
  font-family: 'Outfit';
  font-size: large;
  width: 250px;
  height: 50px;
  border-radius: 25px;
  margin-top: 30px;
}

.subcontainer button:hover {
  background-color: var(--accent-colour);
}

.subcontainer button:active {
  background-color: var(--accent-colour);
}
/* Helper classes*/

.d-flex {
  display: flex;
}

.d-flex-col {
  flex-direction: column;
}

.d-flex-row {
  flex-direction: row;
}

.text-white {
  color: white;
}

.large-text {
  font-size: var(--x-tra-large-font);
}

/* Custom classes */
/* Mobile viewports */
@media only screen and (max-width: 375px) {
  .container {
    width: 100%;
    margin: 50px 0px;
    text-align: center;
    text-wrap: balance;
  }
  .large-text {
    font-size: 52px;
  }
}