* {
    font-family: Roboto;
}
HTML {
    scroll-behavior: smooth;
}

body {
    background-color: #e3e3e3;
    color: #121212;
}

/* Nav */
nav {
    display: flex;
    flex-flow: row wrap;
    height: 30px;
    padding: 8px;
    align-items: center;
    justify-content: flex-end;
    /* margin-bottom: 14px; */
}
nav ul {
    display: flex;
    flex-flow: row wrap;
    align-items: center;
    justify-content: space-around;
    width: 100%;
}
nav ul li {
    font-family: Roboto-Black;
    text-transform: uppercase;
    font-size: 0.75rem;
}
nav ul li a:hover,
.mobile-menu a:hover{
    border-bottom: 2px solid black;
}
.modal-overlay {
    width: 100vw;
    height: 100vh;
    position: absolute;
    z-index: 1000;
    background-color: rgba(0, 0, 0, 0.5);
}
.desktop-nav {
    padding: 10px;
    display: flex;
}

.desktop-nav .secondary {
    font-size: inherit;
}

.mobile-menu {
    display: none;
    border-top: 1px solid rgb(203, 203, 203);
    font-family: Roboto-Bold;
    position: absolute;
    width: calc(100vw - 40px);
    height: calc(100vh - 80px);
    background-color: white;
    text-align: right;
    font-size: 24px;
    padding: 20px;
}

.mobile-menu.is-active {
    display: block;
}

.mobile-menu .secondary {
    width: auto;
}
.mobile-menu li {
    margin-bottom: 12px;
}

/* Buttons */
a.primary,
button.primary,
a.secondary,
button.secondary {
    padding: 8px 24px;
    border-radius: 40px;
    text-transform: uppercase;
    font-family: Roboto-Bold;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    font-size: 16px;
    font-style: normal;
    line-height: normal;
    width: 100%;
    transition: all ease 0.1s;
}

.primary {
    border: 2px solid #000;
    background: #2B2B2D;
    color: white;
    color: #FFF;
    margin-bottom: 12px;
}

.primary:hover {
    background-color: #282828;
    box-shadow: 0px 0px 4px black;
    border: 2px solid #282828;
}

.primary:focus {
    border-radius: 40px;
    border: 2px solid #FFF;
    background: #111;
    box-shadow: 0px 0px 0px 2px #000;
}

.secondary {
    border-radius: 40px;
    border: 2px solid #4F4F4F; 
    background: #FFF;
    color: #4F4F4F; 
}

.secondary:hover {
    border: 2px solid #1E1E1E;
    background: #FFF;
    color: #1E1E1E;
}

.secondary:focus {
    border-radius: 40px;
    border: 2px solid #1E1E1E;
    background: #D0D0D0;
    box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.75);
}

nav .primary,
nav .secondary {
    width: auto;
}

header {
    margin: 20px 0px;
    padding: 8px;
}
.creator-image {
    display: none;
    width: 40%;
    height: auto;
    align-self: flex-end;
}
main {
    padding: 8px 8px 0 8px;
    display: flex;
    flex-flow: column nowrap;
    align-items: center;
    justify-content: center;
}
.showcase-container {
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
}

.showcase-container .showcase.selected {
    display: grid;
}
section {
    width: 100%;
}

hr {
    width: 100%;
    margin: 24px 0;
}

.showcase-menu {
    width: 80%;
    display: flex;
    flex-flow: row wrap;
    justify-content: space-around;
}
.showcase-menu .selected {
    font-family: Roboto-Bold;
}

.showcase-item {
    /* display: block; */
    display: flex;
    overflow: hidden;
    /* width: 280px; */
    width: 100%;
    border-radius: 10px;
    background-color: #fdfdfd;
    /* box-shadow: 0px 0px 10px rgb(138, 138, 138); */
    box-shadow: 6px 6px 12px #cacaca, -6px -6px 12px #f6f6f6;
    transition: all ease-in-out 0.2s;
}

.showcase-container .showcase {
    display: none;
    grid-template-columns: repeat(1, 1fr);
    width: 100%;
    gap: 20px;
    padding: 10px;
}


.showcase-item:hover {
    cursor: pointer;
    box-shadow: 0px 0px 10px rgb(138, 138, 138);
}

.showcase-item .image {
    /* width: 280px;
    height: 220px; */
    width: 64px;
    background-size: 100%;
    background-position: center;
    transition: all 0.5s;
}
.showcase-item:hover .image{
    background-size: 110%;
}

.showcase-item .info {
    padding: 16px 12px;
}
.showcase-item .info .category{
    text-transform: capitalize;
}

/* About Section */
.about-me {
    background-color: #282828;
    background-image: url('/assets/img/about-pattern.png');
    color: #e3e3e3;
    padding: 20px 8px;
    margin-top: 80px;
    background-size: 300px;
    background-position: center;
}
.about-me h1,
.about-me h2 {
    text-align: center;
}
.about-me p {  
    padding: 0 20px;
    margin-bottom: 20px;
    line-height: 1.5rem;
}
.about-me .buttons {
    padding: 0 20px;
}
.about-me .about-top {
    width: 80px;
    height: 80px;
    border-radius: 80px;
    border: 3px solid #e3e3e3;
    background-size: 105%;
    background-position: center;
    position: relative;
    top: -60px;
    left: calc(50% - 40px);
    background-image: url('/assets/img/RichardRobinson_min-500x500.jpg');
    box-shadow: 0px 0px 10px rgba(138, 138, 138, 0.5);
    transition: all ease 0.2s;
}
.about-me .about-bottom {
    margin-top: -30px;
}

.resume {
    /* width: 98%; */
    margin: 24px 0 8px 0;
}

.resume .section-title {
    font-size: 2rem;
    font-family: 'Roboto-Bold';
    margin-bottom: 20px;
    text-align: center;
}

.resume .experience-container {
    padding: 12px;
    background-color: white;
    border-radius: 10px;
}
.resume .experience {  
    display: grid;
    grid-template-columns: 64px calc(70% - 44px) calc(30% - 44px);
    grid-template-rows: auto auto auto;
    gap: 12px 12px;
    grid-auto-flow: row;
    grid-template-areas:
      "image company company"
      ". occupation-title occupation-title"
      ". occupation-role occupation-role";
  }
  
.experience .image img {
    width: 64px;
    border-radius: 5px;
}

.image { grid-area: image; }
.company { grid-area: company; }
.occupation-title { grid-area: occupation-title; }
.occupation-role { grid-area: occupation-role; }

.company * {
    padding-top: 6px;
}

.company .job {
    font-family: 'Roboto-Bold';
}

.company .date,
.company .location {
    color: #737373;
}

.occupation-title {
    margin-bottom: 12px;
}


.occupation-title li {
    list-style: disc;
    padding-top: 12px;
}
.occupation-title li::marker {
    padding-left: 12px;
}

.flex {
    display: flex;
    flex-flow: row wrap;
}

.justify-around {
    justify-content: space-around;
}

.b8px {
    margin-bottom: 8px;
}
.b12px {
    margin-bottom: 12px;
}
.b16px {
    margin-bottom: 16px;
}
.b20px {
    margin-bottom: 20px;
}

.border-bottom {
   border: 1px solid rgb(203, 203, 203);
}

.border-bottom-light {
   border: 1px solid rgb(232, 232, 232);
}

@media screen and (min-width: 480px) {
    a.primary,
    button.primary,
    a.secondary,
    button.secondary {
        width: auto;
        margin-bottom: 0;
    }
    a.primary,
    button.primary {
        margin-right: 12px;
    }

    .mobile-menu-icon {
        display: none;
    }

    .desktop-nav {
        display: flex;
    }
    .showcase-container .showcase {
        grid-template-columns: repeat(2, 1fr);
        width: 100%;
    }
}

@media screen and (min-width: 640px) {
    nav {
        display: flex;
        justify-content: flex-end;
    }
    .desktop-nav {
        width: 400px;
    }
    .about-me .about-top {
        width: 120px;
        height: 120px;
        top: -80px;
        left: calc(50% - 60px);
    }
    .about-me .about-bottom {
        margin-top: -50px;
    }
    .about-me {  
        margin-top: 120px;
    }
    .about-me .buttons,
    .about-me p {  
       padding: 0 60px;
    }
    .about-me p {  
        text-align: center;
    }
    
}

@media screen and (min-width: 768px) {
    .showcase-container .showcase {
        grid-template-columns: repeat(3, 1fr);
        width: 100%;
    }
        .showcase-menu {
        width: 30%;
    }
    header {
        display: flex;
        flex-flow: row wrap;
        justify-content: space-between;
        align-items: center;
    }
    .creator-image {
        display: block;
    }
        
    hr {
        margin-top: 0;
    }
}

@media screen and (min-width: 1024px) {
    .showcase-container .showcase {
        grid-template-columns: repeat(4, 1fr);
        width: 100%;
    }
    .showcase-item .image {
        width: 100%;
        height: 140px;
    }
    .showcase-item {
        flex-flow: row wrap;
    }
      .creator-image {
        width: 50%;
    }

}

@media screen and (min-width: 1280px) {
    body {
        display: flex;
        flex-flow: column nowrap;
        align-items: center;
    }
    nav,
    header,
    main { 
        width: 1280px;
    }
}