@font-face {
    font-family: "Lulo";
    src: url("../fonts/LuloClean.ttf");
}

@font-face {
    font-family: "Futura";
    src: url("../fonts/futura.ttf");
}

::placeholder {
    font-family: 'Futura';
    color: #121212;
    opacity: 1;
}

/* Add a black background color to the top navigation */
.topnav {
    font-family: "Lulo";
    display: inline-block;
    overflow: hidden;
    width: 100%;
    padding: 1% 0%;
}
  
/* Style the links inside the navigation bar */
.topnav a {
    font-family: "Lulo";
    color: #f2f2f2;
    padding: 5% 2.5%;
    text-decoration: none;
    font-size: 2.3vw;
}
  
  /* Change the color of links on hover */
.topnav a:hover, a:focus{
    font-family: "Lulo";
    color: #eea8c8;
}
  
  /* Add a color to the active/current link */
.topnav a:active {
    font-family: "Lulo";
    color: #dc2c21;
}

body {
    background-color: #121212;
    color:#fafafa;
    font-family: 'Futura'; 
    font-size: 1.4vw;
    padding: 10px;
}

h1 {
    text-align: center;
    font-family: 'Lulo';
    font-size: 4vw;
}

h2 {
    text-align: center;
    font-family: 'Lulo';
    font-size: 2.3vw;
}

h3 {
    text-align: left;
    font-family: 'Lulo';
    font-size: 2vw;
}

h4 {
    text-align: left;
    font-family: 'Lulo';
    font-size: 1.4vw;
}

p{
    font-family: 'Futura'; 
    font-size: 1.6vw;
}

ol{
    text-align: left;
    list-style-position: inside;
}

.copyright {
    color: white;
    font-size: 0.9vw;
    font-family: 'Futura';
    text-align: center;
}

.grid-rowcontainer {
    display: flex;
    flex-direction: row;
    align-items: top;
    flex-wrap: wrap;
}

.grid-colcontainer {
    display: flex;
    flex-direction: column;
    align-content: center;
    flex-wrap: wrap;
}

.footer1{
    background-color: #121212;
    color:#fafafa;
    flex: 2;
    padding: 1rem 3rem;
    text-align: left;
}

.footer2{
    background-color: #121212;
    color:#fafafa;
    flex: 1;
    padding: 1rem;
    text-align: left;
}

.footer3{
    background-color: #121212;
    color:#fafafa;
    flex: 1;
    padding: 1rem;
    text-align: left;
}

/* set style for buttons */
.footerbutton {
    background-color: transparent;
    font-family: 'Futura';
    font-size: 1.4vw;
    color: #fafafa;
    padding: 3% 5%;
    border: 0px;
    cursor: pointer;
}
  
.footerbutton:hover {
    background-color: transparent;
    font-family: 'Futura';
    font-size: 1.4vw;
    color: #fafafa;
    padding: 3% 5%;
    border: 0px;
    cursor: pointer;
}

.aboutpic {
    border-radius: 50%;
}

.nextarrow {
    height: 5vw;
    width: auto;
    vertical-align: top;
}

#newEmail {
    height: 5vw;
    width: 60%;
    color: #37a95b;
    font-size: 1.2vw;
    border: 5px solid #027abe;
    vertical-align: center;
}