@font-face {
    font-family: "Gotham";
    src: url("GothamBlack.ttf") format("truetype");
}

* {
    font-family: "Gotham";
}

body {
    /*background-color: #FF8000;*/
}

.body {
    /*text-align: center;*/
    /*display: block;*/
    /* display: flex; */
    padding: 5vh 5vw;
    border: 10px dashed orange;
    overflow: auto;
}

img {
    /*border: black solid 10px;*/
}

.topnav {
    display: flex;
    align-items: center;
    position: sticky;
    top: 0;
    background-color: #000000;
    overflow-x: auto;
    /*white-space-collapse: collapse;*/
    text-wrap-mode: nowrap;
}

.topnav a {
    /*float: left;*/
    /*display: block;*/
    text-align: center;
    background-color: #000000;
    /*border: none;*/
    font-size: 2vh;
    padding: 1vh 3vw;
    text-decoration: none;
    color: #FFFFFF;
}

.topnav a:hover {
    background-color: #FFFFFF;
    color: #000000;
}

.topnav a.active {
    background-color: #FA6900;
    color: #FFFFFF;
}

.topnav img {
    float: left;
    height: 3vh;
    /* left: 5%;
    right: 5%; */
    margin-left: 1vh;
    margin-right: 1vh;
}

.nameplate {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.nameplate img {
    width: 10rem;
    object-fit: contain;
}

.nameplate h1 {
    margin-top: 0;
}

.nameplate h2 {
    margin: 0;
    font-weight: bold;
}

.skills {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.skill {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.skill img {
    width: 2rem;
    height: 2rem;
}

@media (max-width: 480px) and (orientation: portrait), (max-width: 900px) and (orientation: landscape) {
    .topnav a {
        /* color: green !important; */
        font-size: 5vh;
        /* padding: 1vh 3vw; */
    }

    .topnav img {
        height: 5vh;
    }
}

@media (max-width: 480px) and (orientation: portrait) {
    .nameplate {
        font-size: 0.8rem;
    }
    
    .nameplate img {
        width: 30vw;
    }
}

@media (max-width: 900px) and (orientation: landscape) {
}