body {
    background-color:rgb(0, 0, 0);
    color:white
    
}

@font-face{ 
	font-family: 'OpenSans';
	src: url('OpenSans-Light.ttf');
}

@font-face {
    font-family: Lotuseater;
    src: url(Lotuseater.otf);
}
@font-face {
    font-family: OptimusPrinceps;
    src: url(OptimusPrinceps.ttf);
}
h1 {
    font-size:4vw;
    font-family: 'OptimusPrinceps';
    color:white;
    
}
h2 {
    font-size:2vw;
    font-family: OpenSans;
    color:white
}
p {
    font-family: 'OpenSans';
    font-size: 16px;
    color: white;
}
.center {
    margin: auto;
    width: 60%;
    border: transparent;
    padding: 10px;
}
.center2 {
    margin: auto;
    width: 50%;
    border: transparent;
    padding: 10px;
    vertical-align: middle;
}
.header {
    margin: auto;
    vertical-align: center;
    font-family: 'OptimusPrinceps';
    font-size: 4vw;
}
div {
    font-family: 'OpenSans';
    font-size: 16px;
    width: 60%;
    border: 15px transparent;
    margin-left:50px;
    
}


#main{
    width: 60%
}
a:link {
    color: rgb(231, 7, 213);
    background-color: transparent;
    text-decoration: none;
  }
  
  a:visited {
    color: pink;
    background-color: transparent;
    text-decoration: none;
  }
  
  a:hover {
    color: red;
    background-color: transparent;
    text-decoration: underline;
  }
  
  a:active {
    color: rgb(230, 56, 186);
    background-color: transparent;
    text-decoration: underline;
  }