:root {
 --my-nav-bar: linear-gradient(rgb(32, 32, 32), rgb(70, 73, 75));
 --basic-yellow: #f2c75c;
 --basic-darkblue: #1b365d;
 --basic-dark: #44494e;
 --the-shadow: 4px 4px 20px 1px rgb(112, 115, 117);
 --light-background: #e4e3e3;
 --shady-background: linear-gradient(rgb(32, 32, 32), rgb(70, 73, 75));
}

.hidden {
  display: none;
}

html {
  box-sizing: border-box;
  font-size: 19px;
 }
 
body {
 font-family: "IM Fell Great Primer", serif;
 font-family: "Rhodium Libre", serif;
}

h1,
h2,
h3,
h4 {
 text-align: center;
}
p {
 margin: 0;
}
#portfolio a {
 line-height: 0.6rem;
}

:focus {
 outline: 4px solid #61c900;
} 

.nav-wrapper {
  background-image: var(--my-nav-bar);
  height: 40px;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 1;
}

.sticky-name {
  color: var(--light-background);
  font-size: 19px;
  padding: 0 10px;
  position: fixed;
  left: 0;
  top: 10px;
  text-decoration: none;
}

.sticky-name:hover {
  color: var(--basic-yellow);
  letter-spacing: 1px;
}

#nav {
  position: fixed;
  right: 0;
  top: 10px;
}
#nav > a {
 list-style: none;
 display: inline;
 font-size: 19px;
 margin-right: 12px;
}
.a-nav {
 color: var(--basic-yellow);
 text-decoration: none;
}
.a-nav:hover {
 color: whitesmoke;
 text-decoration: underline var(--basic-yellow) 3px solid;
}

.section {
 width: 100%;
 height: fit-content;
 padding: 50px 20px;
}

#about-me {
 background-image: var(--shady-background);

 p {
  padding: 20px;
  width: 90%;
  margin: auto;
  text-align: justify;
}

p, h2, h1 {
 color: whitesmoke;
}
}

.portfolio-container {
 align-items: center;
 display: flex;
 flex-flow: row wrap;
 justify-content: center;
}

#portfolio {
 background-color: var(--basic-yellow);
}

#portfolio h2 {
 font-weight: bold;
}

.portfolio-box {
 flex: 0 0 auto;
 background-color: var(--light-background);
 border-radius: 6px;
 box-shadow: 20px 15px 15px gray;
 margin: 25px;
 padding: 15px;
 width: 350px;
}
.portfolio-box:hover {
 box-shadow: 5px 5px 10px gray;
 transition: all 0.2s ease-out;
}
.portfolio-images {
 border-radius: 5px;
 display: block;
 margin: 0 auto;
}

.v-box {
  transform: rotate(3deg);
}
.t-box {
  transform: rotate(-3deg);
}
.d-box {
  transform: rotate(3deg);
}
.rps-box {
  transform: rotate(-3deg);
}
.eat-box {
 transform: rotate(3deg);
}

.caption {
  text-align: center;
}

.show {
  color: black;
  margin-bottom: 15px;
  position: relative;
  text-decoration: none;
}
.show-more {
  float: left;
}
.show-github {
  float: right;
}
.show:hover {
 color: var(--basic-darkblue);
 text-decoration: underline;
}

#vet-listing, #dobble-listing, #eat-listing {
 background-color: var(--basic-darkblue);

 p, figcaption, h1, h2, h6, hr {
  color: var(--basic-yellow);
 }
}
#tournament-listing, #rps-listing {
 color: var(--basic-darkblue);
 background-color: var(--basic-yellow);
}

.description {
 padding: 20px;
}

#tournament-listing .description,
#eat-listing .description {
 padding-top: 0;
}

.app-link {
 padding: 2px;
 display: block;
 width: fit-content;
}

.app-link-eat {
 color: var(--basic-yellow);
}
.app-link-rps {
 color: var(--basic-blue);
}

.app-link-rps:hover {
 background-color: var(--basic-darkblue);
 color: var(--basic-yellow);
 text-decoration: none;
 transition: all 0.3s ease-in-out;
}
.app-link-eat:hover {
 background-color: var(--basic-yellow);
 color: var(--basic-darkblue);
 text-decoration: none;
 transition: all 0.3s ease-in-out;
}

.video-box {
  display: block;
  margin: 0 auto;
  max-width: 600px;
}
.figure-caption {
  text-align: center;
  color: black;
  font-weight: bold;
  font-size: large;
}
.video {
  box-shadow: rgba(0, 0, 0, 0.56) 0px 22px 70px 4px;
}

/*CONTACT LINKS*/
.fab,
.fas {
  font-size: 50px;
  margin-right: 5px;
}
.fa-envelope {
  color: black;
  transform: rotate(-35deg);
}
.fa-linkedin {
  color: #225696;
}
.fa-github-square {
  color: black;
}
.fa-twitter-square {
  color: #00acee;
}

.fa-linkedin:hover,
.fa-github-square:hover,
.fa-twitter-square:hover,
.fa-envelope:hover {
  color: var(--basic-yellow);
}
.fa-envelope:hover {
  transform: rotate(0deg);
  transition: 0.3s ease-in-out;
}

#contact {
 background-image: var(--shady-background);
 background-image: url("images/stabbs.jpg") no-repeat;
 background-position: center top;
 background-size: cover;
 background-repeat: no-repeat;
 height: 350px;
 position: relative;
 width: 100%;
}

#contact-items {
 position: absolute;
 top: 12%;
 right: 1%;
}
#contact h3 {
 background-color: var(--basic-darkblue);
 border-top: 1px solid var(--basic-yellow);
 color: var(--basic-yellow);
 position: absolute;
 right: 0;
 text-align: center;
 top: 0;
 width: 200px;
}

.container {
  padding: 0;
}
.row {
  margin-bottom: 30px;
}
.each-col {
  margin-bottom: 15px;
}

footer {
  padding: 30px;
  background-image: var(--shady-background);
  color: white;
}

footer p {
  text-align: center;
}

@media (max-width: 992px) {
  .custom-class,
  .listing {
    display: flex;
    flex-flow: column wrap;
    justify-content: center;
    align-items: center;
  }
  .each-col {
    width: fit-content;
  }
}