:root{
    --bapphy-light-red: #e9425c;
    --bapphy-dark-red: #933048;
    --bapphy-light-black: #37414e;
    --bapphy-dark-black: #161e2f;
    --bapphy-light-gray: #d9e5ec;
    --bapphy-medium-gray: #66768c;
    --bapphy-red-gradient: linear-gradient(
        to bottom,
        var(--bapphy-light-red),
        var(--bapphy-dark-red));
    --bapphy-black-gradient: linear-gradient(
        to bottom,
        var(--bapphy-light-black),
        var(--bapphy-dark-black));
    --bapphy-gray-gradient: linear-gradient(
        to bottom,
        var(--bapphy-light-gray),
        var(--bapphy-medium-gray));

    --text-color: var(--bapphy-light-gray); 
    --hover-text-color: var(--bapphy-dark-black);
    --accent-color: var(--bapphy-light-red);
    --bg-color: var(--bapphy-light-black);
    --bg-gradient: var(--bapphy-black-gradient);
    --accent-gradient: var(--bapphy-red-gradient);
    --other-gradient: var(--bapphy-gray-gradient);
    --bg-shadow: #161e2fcb;
    --bg-pattern-img: radial-gradient(
                        circle at center,
                        black var(--dot-size),
                        transparent 0);

    --black-shadow: 0px 10px 5px 0px var(--bg-shadow);
    --hover-black-shadow: 0px 14px 7px 0px var(--bg-shadow);
    --focus-black-shadow: 0px 5px 3px 0px var(--bg-shadow);

    --text-size: 14pt;

    --title-font: "New Rocker", system-ui;
    --text-font: "Roboto", sans-serif;
    --border-radius: 30px;
    --dot-size: 10px;
    --wiggle: wiggle 2s infinite;
}

@keyframes wiggle {
    0% { transform: rotate(0deg) scale(1); }
   50% { transform: scale(1.1); }
   80% { transform: rotate(0deg) scale(1); }
   85% { transform: rotate(5deg); }
   95% { transform: rotate(-5deg) }
  100% { transform: rotate(0deg) }
}

html {
    min-height: 100%;
    margin: 0;
}

body{
  min-height: 100%;
  margin: 0;
  background-image: var(--bapphy-black-gradient);
}

#banner{
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0;
}

nav{
  display: flex;
  justify-content: space-between;
  height: 50px;
  width: 100vw;
  margin: 0;
  background-image: var(--bapphy-red-gradient);
}

#goat{
  margin: 5px 20px;
}

#goat:hover{
  cursor: pointer;  
}

nav a {
  margin: 0 20px;
  font-size: 2em;  
  font-family: "New Rocker";
  color: var(--text-color);
  text-decoration: none;
}

nav a:hover{
  color: var(--hover-text-color);
}

nav div{
  display: flex;
  align-items: center;
  justify-content: center;
}

h2{
  font-family: "New Rocker";
  font-size: 2em;
  font-weight: 200;
  color: var(--accent-color);
}

h3{
  font-family: "New Rocker";
  font-size: 1.2em;
  font-weight: 100;
  color: var(--text-color);
}

.section-content{
  margin: 4em 4em;  
}

.section-content p{
  font-family: "Roboto";
  font-size: 1em;
  color: var(--text-color);
}

#all-socials{
  display: flex;
  justify-content: center;
}

.socials{
  display: block;
  background-image: var(--accent-color);
  height: 5em;
  width: 5em;
}

.socials i{
  color: var(--text-color);
  font-size: 4em;
}

.socials i:hover{
  color: var(--hover-text-color);
}