:root {
  --main-color: #fff;
  --color-dark: #000;
  --matrix-color:#00ff00;
  --text-grey: #888888;
}

* {margin: 0;padding: 0;}
body,html,td,th {display:grid;height: 100%;color: var(--main-color);background-color: var(--color-dark);font-family: Source Code Pro, Courier New, Courier, monospace;}

/* HEADER SECTION  */
header {display: grid;}
header .logo {width: 100px;}

/* NAVIGATION MENU SECTION  */
nav {text-align: center;}
nav ul {display: grid; grid-template-columns: repeat(5,1fr);list-style-type: none}
nav li {margin: 5px;}
nav a {color: var(--main-color);text-decoration: none;}

/* MAIN SECTION  */
main { margin: 10%;text-align: center;}
p.large {font-size: 20px;color: var(--matrix-color);font-weight: bold;text-transform: uppercase;}

/* FOOTER SECTION  */
footer {font-size: 20px;text-align: center;}
footer .footer-legal-links a {color: var(--text-grey);}
footer .footer-social-links a {color: var(--text-grey);}
footer .footer-social-links a:hover {color: var(--main-color);}

/* RESPONSIVE SECTION  */
@media screen and (min-width: 32em) {
}

@media screen and (min-width: 64em) {
}

@media screen and (max-width: 530px) {
header {display: grid;}
header .logo {width: 60px;}
main { margin-top: 10%;font-size: 12px;}
p.large {color: var(--matrix-color);font-weight: bold;text-transform: uppercase;}
}

@media screen and (min-width: 1200px) {
}