@font-face {
    font-family: "Poppins";
    src: url("fonts/Poppins/Poppins-Regular.ttf") format("truetype");
    font-style: normal;
    font-weight: normal;
}

@font-face {
    font-family: "Poppins";
    src: url("fonts/Poppins/Poppins-Bold.ttf") format("truetype");
    font-style: normal;
    font-weight: bold;
}

@font-face {
    font-family: "Poppins";
    src: url("fonts/Poppins/Poppins-ExtraLight.ttf") format("truetype");
    font-style: normal;
    font-weight: 200;
}

@font-face {
    font-family: "Poppins";
    src: url("fonts/Poppins/Poppins-Light.ttf") format("truetype");
    font-style: normal;
    font-weight: 300;
}

@font-face {
    font-family: "Poppins";
    src: url("fonts/Poppins/Poppins-Medium.ttf") format("truetype");
    font-style: normal;
    font-weight: 600;
}

/*
italic fonts
*/
@font-face {
    font-family: "Poppins";
    src: url("fonts/Poppins/Poppins-Italic.ttf") format("truetype");
    font-style: italic;
    font-weight: normal;
}

@font-face {
    font-family: "Poppins";
    src: url("fonts/Poppins/Poppins-BoldItalic.ttf") format("truetype");
    font-style: italic;
    font-weight: bold;
}

@font-face {
    font-family: "Poppins";
    src: url("fonts/Poppins/Poppins-ExtraLightItalic.ttf") format("truetype");
    font-style: italic;
    font-weight: 200;
}

@font-face {
    font-family: "Poppins";
    src: url("fonts/Poppins/Poppins-LightItalic.ttf") format("truetype");
    font-style: italic;
    font-weight: 300;
}

@font-face {
    font-family: "Poppins";
    src: url("fonts/Poppins/Poppins-MediumItalic.ttf") format("truetype");
    font-style: italic;
    font-weight: 600;
}

html {
    background-color: black;
    font-family: 'Poppins';
    color: #40b9ff;
    display: flex;
    justify-content: center;
    align-items: center;
}

body {
    background-color: rgb(0, 15, 29);
    margin: 5vh 5vh 5vh 5vh;
    width: 64rem;
    border-style: solid;
    border-radius: 3vh;
    border-color: #40b9ff;
    border-width: 0.1em;
    padding: 2em 2em 2em 2em;
    font-size: 1.2rem;
}

@media only screen and (max-width: 64rem) {
    body {
        width: 98vw;
        margin: 1vw;
    }
}

#page-header {
    margin-bottom: 2em;
}

a {
    color: inherit;
}

a:visited {
    color: #318ec4;
}

a:hover {
    background-color: rgba(0, 225, 255, 0.404);
}

.points-of-interest > *:not(:last-child) {
    margin-bottom: 1em;
}

.point-of-interest {
    display: grid;
    grid-template-columns: 70% auto;
    border-style: dashed;
    border-color: #318ec4;
    height: 4em;
    align-items: center;
    padding: 0.5em;
    border-width: 0.05em;
    border-radius: 0.5vh;
}

.image-container > img {
    width: 3em;
    height: 3em;
}