@font-face {
  font-family: 'ddmono';
  src: url('fonts/deltadefaultmono.woff') format('woff'),
       url('fonts/deltadefaultmono.woff2') format('woff2');
}
@font-face {
  font-family: 'ddsans';
  src: url('fonts/deltadefaultsans.woff') format('woff'),
       url('fonts/deltadefaultsans.woff2') format('woff2');
}


button.job {
  font-family: 'ddmono';
  background-color: purple;
  border-top: 3px solid yellow;
  border-left:3px solid yellow;
  border-right: 3px solid rgb(139, 128, 0);
  border-bottom: 3px solid rgb(139, 128, 0);
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 20px;
  cursor: pointer;
}

button.job:hover {
  font-family: 'ddmono';
  background-color: magenta;
  border-top: 3px solid yellow;
  border-left:3px solid yellow;
  border-right: 3px solid rgb(139, 128, 0);
  border-bottom: 3px solid rgb(139, 128, 0);
  color: yellow;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 20px;
  cursor: pointer;
  transition: transform .5s;
}

button.job:hover {
  transform: scale(1.2);
}

button.nojob {
  font-family: 'ddmono';
  background-color: gray;
  border-top: 3px solid lightgray;
  border-left:3px solid lightgray;
  border-right: 3px solid slategray;
  border-bottom: 3px solid slategray;
  color: rgb(71, 71, 71);
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 20px;
  cursor: pointer;
  box-shadow: 3px 5px black;
}

img.reactive{
  transition: transform .5s;
  
}


img.reactive:hover {
  transform: scale(1.2);
}


.center {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 50%;
  animation: bob 1s;
  animation-iteration-count: infinite;
}

/*
h1 {
    font-family: 'ddmono';
}*/
h2 {
    font-family: 'ddmono';
    color: yellow;
    font-size: 30px;
}


@keyframes bob {
  0% { transform: translate(0px, 1px); }
  10% { transform: translate(0px, 2px);}
  20% { transform: translate(0px, 3px);}
  30% { transform: translate(0px, 4px);}
  40% { transform: translate(0px, 5px);}
  50% { transform: translate(0px, 6px);}
  60% { transform: translate(0px, 5px);}
  70% { transform: translate(0px, 4px);}
  80% { transform: translate(0px, 3px);}
  90% { transform: translate(0px, 2px);}
  100% { transform: translate(0px, 1px);}
}


.invis-red {
    text-align: center;
    text-decoration: none; 
    background-color: transparent; 
    border: none; 
    color: yellow; 
    padding: 10px 20px; 
    cursor: pointer; 
    font-size: 45px; 
}

.invis-red:hover {
    text-align: center;
    text-decoration: none; 
    color: red;
}


htown.image-container {
  width: auto;
  height: 100%;
}

htown.image-container img {
  width: auto;
  height: 100%;
  object-fit: cover;
}

header {
  background-color: black;
  padding: 30px 10px;
  border-bottom: 3px solid white;
}

nav {
  font-family: 'ddmono';
  text-shadow: 2px 2px #333;
  font-size: 50px;
}

nav a {
  text-decoration: none;
  margin: 0 75px;
  transition: 0.2s;
}

nav a:hover {
  color: currentColor;
  text-shadow: 0 0 5px currentColor;
}

body {
  margin: 0;
  padding: 0;
  font-family: 'ddmono';
  background-color: black;
  color: white;
  text-align: center;
}




div.scroll-container {
  background-color: black;
  overflow: auto;
  white-space: nowrap;
  padding: 50px;
}

div.scroll-container img {
  padding: 0px;
  object-fit: cover; 
  object-position: center;
  border: solid white;
}

div.img-title {
  object-fit: contain;
}



body2 {
  display: flex;
  justify-content: center;
  align-items: center;
  min-width: 10vh;
  text-shadow: 2px 2px #333;
  font-size: 20px;
}

.profile-layout {
  display: grid;
  margin: 30px;
  grid-template-columns: 1fr 1fr;
  column-gap: 20px;
  row-gap: 10px;
}

.profile-item {
  display: flex;
  border: 1px grey solid;
  border-radius: 10px;
  height: 100%;
  width: 100%;
  max-width: 50vw;
}

.image-container {
  padding: 1rem;
  height: 200px;
  width: 200px;
}

img.profileimg {
  border: solid white;
  object-position: center;
  object-fit: cover;
  height: 200px;
  width: 200px;
}

.info-container {
  height: auto;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.info-container ul {
  display: flex;
  list-style-type: none;
  padding: 0;
  gap: .5rem;
}

.Role {
  color: yellow;
  font-size: 20px;
}



/*code I don't wanna get rid of but can't use rn





<script>

function play() { 
  document.getElementById('audio').play();
  setTimeout(function() {
  window.location.href = "test.html"; 
}, 300); 
}

</script>
<br>
<br>
<a onclick="play()" id="test.html" class="invis-red" style="font-family: 'ddmono'; display: float; text-align: left;">LEFT</a>
<a onclick="play()" id="test.html" class="invis-red" style="font-family: 'ddmono'; display: float; text-align :center;">ABOUT</a>
<a onclick="play()" id="test.html" class="invis-red" style="font-family: 'ddmono'; display: float; text-align :right;">RIGHT</a>





*/