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

.cont {
    width: 80%;
    margin: auto;
}

@font-face {
    font-family: heading;
    src: url(../fonts/heading.otf);
}

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

/* DARK MODE */
body.dark-mode {
    background-color: black;
    color: #999999;
    font-family: body;
}

.heading-font {
    font-family: heading;
}

h1 {
    font-family: heading;
    color: white;
}

body.dark-mode h2,
body.dark-mode h3,
body.dark-mode h4,
body.dark-mode h5,
body.dark-mode h6 {
    color: white;
    font-family: heading;
}

/* LIGHT MODE */
body.light-mode {
    background-color: white;
    color: #333333;
    font-family: body;
}

body.light-mode h2,
body.light-mode h3,
body.light-mode h4,
body.light-mode h5,
body.light-mode h6 {
    color: #111111;
    font-family: heading;
}

/* Smooth transition */
body {
    transition: background-color 0.3s ease, color 0.3s ease;
}