@font-face{
    font-family: "DinamoABCWhyte-Light";
    src:url("./fonts/DinamoABCWhyte/ABCWhyte-Light-Trial.woff") format("woff");
    src:url("./fonts/DinamoABCWhyte/ABCWhyte-Light-Trial.woff2") format("woff2");
    font-weight:light;
    font-style:normal;
}

@font-face{
    font-family: "DinamoABCWhyte-LightItalic";
    src:url("./fonts/DinamoABCWhyte/ABCWhyte-LightItalic-Trial.woff") format("woff");
    src:url("./fonts/DinamoABCWhyte/ABCWhyte-LightItalic-Trial.woff2") format("woff2");
    font-weight:light;
    font-style:italic;
}

@font-face{
    font-family: "DinamoABCWhyte-Regular";
    src:url("./fonts/DinamoABCWhyte/ABCWhyte-Regular-Trial.woff") format("woff");
    src:url("./fonts/DinamoABCWhyte/ABCWhyte-Regular-Trial.woff2") format("woff2");
    font-weight:normal;
    font-style:normal;
}

@font-face{
    font-family: "DinamoABCWhyte-RegularItalic";
    src:url("./fonts/DinamoABCWhyte/ABCWhyte-RegularItalic-Trial.woff") format("woff");
    src:url("./fonts/DinamoABCWhyte/ABCWhyte-RegularItalic-Trial.woff2") format("woff2");
    font-weight:normal;
    font-style:italic;
}

@font-face{
    font-family: "DinamoABCWhyte-Bold";
    src:url("./fonts/DinamoABCWhyte/ABCWhyte-Bold-Trial.woff") format("woff");
    src:url("./fonts/DinamoABCWhyte/ABCWhyte-Bold-Trial.woff2") format("woff2");
    font-weight:bold;
    font-style:normal;
}

@font-face{
    font-family: "DinamoABCWhyte-BoldItalic";
    src:url("./fonts/DinamoABCWhyte/ABCWhyte-BoldItalic-Trial.woff") format("woff");
    src:url("./fonts/DinamoABCWhyte/ABCWhyte-BoldItalic-Trial.woff2") format("woff2");
    font-weight:bold;
    font-style:italic;
}

@font-face{
    font-family: "DinamoABCWhyte-Heavy";
    src:url("./fonts/DinamoABCWhyte/ABCWhyte-Heavy-Trial.woff") format("woff");
    src:url("./fonts/DinamoABCWhyte/ABCWhyte-Heavy-Trial.woff2") format("woff2");
    font-weight:heavy;
    font-style:normal;
}

@font-face{
    font-family: "DinamoABCWhyte-HeavyItalic";
    src:url("./fonts/DinamoABCWhyte/ABCWhyte-HeavyItalic-Trial.woff") format("woff");
    src:url("./fonts/DinamoABCWhyte/ABCWhyte-HeavyItalic-Trial.woff2") format("woff2");
    font-weight:heavy;
    font-style:italic;
}

body{
    background-color: white;
    font-size: 1em;
    font-family: "DinamoABCWhyte-Regular", sans-serif;
    margin: 0.95em;
    color: #000000;
    cursor:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='50' height='60' style='fill:black;font-size:30px;'><text y='50%'>☝️</text></svg>") 16 0, auto;
}

.header{
    margin-top: -0.95em;
    width: 97vw;
    height: 7.5vh;
    display: flex;
    flex-direction: row;
    align-items: center;
    background: #ffffff;
    justify-content: space-between;
    top: 0;
    position: sticky;
}

.main-title{
    font-weight: bolder;
    text-align: left;
}

.main-title a:link{
    text-decoration: none;
}

.main-title a:hover{
    cursor:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='50' height='60' style='fill:black;font-size:30px;'><text y='50%'>🏠</text></svg>") 16 0, auto;
}

.navigation{
    display: flex;
    flex-direction: row;
    text-align: right;
    list-style-type: none;
    padding: 0;
    column-gap: 2em;
    right: 0;
}

.mobile-menu{
    opacity: 0;
    display: none;
    position: absolute;
    right: 0;
    z-index: 999;
    margin-right: 1em;
}

.mobile-navigation{
    background: #000000;
    margin-top: -0.95em;
    margin-left: -0.95em;
    min-height: 100vh;
    width: 100vw;
    position: fixed;
    top: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: #ffffff;
    display: none;
    z-index: 1;
    list-style-type: none;
}

.mobile-navigation li{
    margin-top: 0;
    z-index: 1;
}

.mobile-navigation a:link{
    text-decoration: none;
}

.mobile-navigation a:hover{
    color: #ffdf01;
}


.header.open .mobile-navigation{
    display: flex;
    position: absolute;
    background: #000000;
}

h1{
    font-family: "DinamoABCWhyte-Bold", sans-serif;
    font-size: 1em;
    font-weight: bolder;
}

h2{
    font-family: "DinamoABCWhyte-Bold", sans-serif;
    font-size: 1em;
    font-weight: bold;
}

h3{
    font-family: "DinamoABCWhyte-Bold", sans-serif;
    font-size: 1em;
    font-weight: bold;
}

img{
    width: 100%;
    height: auto;
}

div{
    margin-top: 1rem;
    margin-bottom: 1rem;
}

a:link{
    text-decoration: underline;
    color: inherit;
}

a:visited{
    display: inline-block;
    color: inherit;
}

a:hover{
    color:#1b0fd7;
    text-decoration: dotted underline;
    /* font-family: "DinamoABCWhyte-Heavy"; */
    cursor:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='75' height='90' style='fill:black;font-size:45px;'><text y='50%'>🔗</text></svg>") 16 0, auto;
}
  
a:active{
    color: #ff3000;
}

.things{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 3rem;
}

.box{
    padding: 0;
    margin-bottom: -0.5rem;
}

.box p{
    font-family: "DinamoABCWhyte-Light", sans-serif;
}

.box ul{
    font-family: "DinamoABCWhyte-Light", sans-serif;
}


/* styles for screens smaller than 800px wide */
@media screen and (max-width: 800px){
    .navigation{
        display: none;
    }
    .mobile-menu{
        opacity: 1;
        display: block;
    }
    .things{
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        gap: 3rem;
    }
}