:root {
  --colorA: #212121;
  --colorB: #f4f4f4;
}

@font-face {
    font-family: 'Forced Square';
    src: url("assets/fonts/FORCED-SQUARE.ttf");
}

@font-face {
    font-family: 'TruenoBd';
    src: url("assets/fonts/TruenoBd.otf");
}


@font-face {
    font-family: 'Ricasso Regular';
    src: url("assets/fonts/Ricasso-Regular.ttf");
}


@font-face {
    font-family: 'Linear Regular';
    src: url("assets/fonts/linear-by-braydon-fuller.otf");
}

body {
    background-image: url("assets/img/background.svg");
    background-repeat: no-repeat;
    /* width: auto; */
    /* height: 10%; */
    background-size: auto ;
    background-position: 20% 50%;
    /* background-attachment: fixed; */
}


h1 {
    font-family: 'Ricasso Regular';
    font-size: 23px;
    color: var(--colorB);
    letter-spacing: 1px;
}

#main {
    width: 60vw;
    min-height: 75vh;
    /* top: 50%; */
    /* left: 50%; */
    background-color: var(--colorB);
    /* position: center; */
    margin-left: auto;
    margin-right: auto;
    margin-top: 6em;
    /* margin-bottom: 5em; */
    padding: 1em;
    font-family: 'TruenoBd';
    color: var(--colorA);
}

#top {
    left:0;
    right:0;
    /* display: flex; */
    position: fixed;
    top: 0;
    /* width: auto; */
    padding-left: 1em;
    background-color: var(--colorA);
    text-align: auto;
}
/* #top2 { */
/*     background-color: var(--colorA); */
/*     position: fixed; */
/*     top: 6%; */
/*     left:0; */
/*     right:0; */
/* } */
#menu {
    background-color: var(--colorA);
    display: flex;
    position: fixed;
    right: 0%;
    top: 0%;
}
#logo {
    display: block;
    margin-left: auto;
    margin-right: auto;
}
#smallmenu {
    /* background-color: var(--colorA); */
    display: flex;
    position: fixed;
    right: 0%;
    bottom: 0%;
    margin: 1em;
    font-family: 'TruenoBd';
}
.link {
    margin: 1em;
    font-family: 'Forced Square';
    font-size: 22px;
}

/* a:link { */
/*   /* color: var(--colorB); */ */
/*  color: var(--colorA); */
/* } */

a:visited {
  color: var(--colorB);
}

/* selected link */
a:active {
  color: blue;
}

.centered {
    text-align: center;
}
button {
    background-color: transparent;
    background-repeat: no-repeat;
    border: none;
    cursor: pointer;
    overflow: hidden;
    outline: none;
    color: var(--colorB);
}

footer {
    bottom: 0;
    left:0;
    right:0;
    position: fixed;
    font-family: 'Linear Regular';
    font-size: 16px;
    letter-spacing: 1px;
    text-align: auto;
    padding-left: 1em;
    background-color: var(--colorA);
    color: var(--colorB);
}