:root {
  --blue: black;
  --white: white;
  --glow: white;
}

/*
no flags to be found here :) 
*/

body {
    display: flexbox;
    background-color:var(--white);
    justify-content: center;
    text-align: center;
    overflow: auto;
    flex-direction: column;
    flex: inherit;
}

h1 {
    font-size: 7em;
    color:var(--blue);
    text-decoration-line: none;
    margin-bottom: 3%;
}

.hfont {
    font-family: "HF";
}

.nfont {
    font-family: "Noto";
    color: var(--blue);
}

nav ul {
    flex-direction: row;
    list-style: none;
}

h2 {
    margin-top: 0;
    color: var(--blue);
    font-size: 4em;
    justify-content:space-between;
    flex-direction: row;
}

p {
    color:var(--blue);
    font-size: 2.5em;
}

a {
    text-decoration: none;
    color: inherit;
}

.unselectable {
    -webkit-user-select: none; /* Chrome and Safari */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* Edge */
    user-select: none; /* Standard */
}

.glow-on-hover {
    transition: text-shadow 0.5s ease-in-out;
}

.glow-on-hover:hover {
    text-shadow: 0 0 10px var(--glow), 0 0 20px var(--glow), 0 0 30px var(--glow);
}

@font-face {
  font-family: "Noto";
  src: url('Noto.ttf') format('truetype');
  font-display: 'swap';
}

/* tablet */
    @media only screen and (max-width: 835px) 
{
    h1{
        font-size: 4em;
    }
    h2 {
        font-size: 2.7em;
    }
    p {
    font-size: 1.7em;
  }
}


/* mobile */
    @media only screen and (max-width: 600px) 
{
    h1{
        font-size: 4em;
    }
    h2 {
        font-size: 1.7em;
    }
    p {
    font-size: 1.25em;
  }
}