@import url('https://fonts.googleapis.com/css?family=Roboto&display=swap');
@import url('https://fonts.googleapis.com/css?family=Nanum+Gothic&display=swap');

* {margin: 0;padding: 0;box-sizing: border-box;}

body {margin:0rem;padding: 0rem;background-color: black;}

header{position: fixed;width: 100%;background-color: white;padding:0.5rem;}
header div p {height: 50px;margin-left: 2rem;color: black; font-family:"Nanum gothic"; font-weight: bolder; font-size: 2.5rem; text-align: center;;}
header div {max-width: 960px;margin: 0 auto;display: flex;justify-content: space-between;align-items: center;}
nav {margin:0rem; float: right;position: relative;}

nav a {font-size: 0.8rem; display: inline-block; color: #2a8ad7; text-decoration: none; font-family: "nanum gothic"; padding: 1rem; color: black;}

nav a:hover {background-color:lightgrey;border-radius: 0.5rem;padding: 1rem;border-width: inherit;}

h1{font-size: 2.5rem;padding-bottom: 1rem;text-align: center;padding-top: 6rem;color: white;font-family: "Roboto";text-transform: uppercase;}
footer {font-family: "nanum gothic"; color:white; font-size: 0.7rem;padding: 2rem;  height: 2rem; text-align: center; display: block;}
footer p {margin-left: 3rem; margin-right: 3rem;}
img { border-radius: 50%; display:block;
margin:auto; padding-bottom: 1rem;}
.materias h2 {font-family: "Roboto"; color: white; font-size: 1.5rem; font-weight: lighter; text-align: center;}
.materias p {font-family: "Roboto";color: white;font-size: 1rem;font-weight: lighter;text-align: center;}