:root {
  --bg-color: #E9ECEF;
  --header-color: #002e40;
  --main-color: #F8F9FA;
  --page-header-color: #ffffff;
  --font-color: black;
}

html {
  display: flex;
  width: 100%; 
  height: 100%; 
  background-color: var(--bg-color); 
  overflow: hidden; 
  text-align: center;
  color: var(--font-color);
  font-family: Proxima-Nova, 
    -apple-system, 
    BlinkMacSystemFont, 
    "Segoe UI", 
    Helvetica, 
    Arial, 
    Roboto, 
    sans-serif, 
    "Apple Color Emoji", 
    "Segoe UI Emoji", 
    "Segoe UI Symbol";
}

body {
  width: 100%; 
  height: 100%;
}

.header {
  position: sticky;
  margin-left: -10px;
  margin-top: -10px;
  width: 105%; 
  height: 54.375px; 
  background-color: var(--header-color);
  border-top-left-radius: 10px; 
  border-top-right-radius: 10px; 
  text-align: left; 
  align-content: center;
}

.TL_Logo {
  width: 15rem; 
  padding-left: 15px;
}

.mainPage {
  width: 99%; 
  height: 94%; 
  background-color: var(--main-color); 
  margin-top: 15px;  
  margin-left: 0.5%;
  border-radius: 10px;
}

.access {
  width: 100%; 
  height: 70px; 
  font-size: 1.25rem; 
  font-weight: 600; 
  background-color: var(--page-header-color); 
  align-content: center; 
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}

i {
  color: red; 
  font-weight: 600;
}

.dialog {
  width: 30%; 
  height: 25%; 
  background-color: white; 
  margin-left: 35%; 
  margin-top: 15%; 
  border-radius: 10px;
}

.topText {
  display: flex; 
  height: 40%; 
  padding-top: 5%;
}

.firewall {
  width: 4.9vw; 
  height: 4vw;
  padding-left: 3%;
}

h1 {
  color: black;
  font-size: 0.92vw;
  align-content: center;
}

.bottomText {
  padding-top: 2%;
}

p {
  color: red;
  font-size: 0.75vw;
  font-weight: 500;
}