/* CSS files add styling rules to your content */

/* * * Font Reference: * * */

/*

Alata:
  font-family: 'Alata', sans-serif;
Bebas Neue:
  font-family: 'Bebas Neue', cursive;
Sarabun:
  font-family: 'Sarabun', sans-serif;
Space Mono:
  font-family: 'Space Mono', monospace;
  Weights : normal, normal italic, bold, bold italic

*/

/*Imported Fonts*/

/* * * Kenney's Website: https://www.kenney.nl/assets/kenney-fonts * * */
/*Kenney */
@font-face {
  font-family: ;
  src: url();
}

/*Kenney Pixel High Square*/
@font-face {
  font-family: pixelHighS;
  src: url(fonts/Kenney_High_Square.ttf);
}

/*Kenney Pixel High*/
@font-face {
  font-family: pixelHigh;
  src: url(fonts/Kenney_High.ttf);
}

/*Kenney Pixel Block*/
@font-face {
  font-family: pixelBlock;
  src: url(fonts/Kenney_Blocks.ttf);
}

/*Kenney Pixel Mini Square*/
@font-face {
  font-family: pixelMiniS;
  src: url(fonts/Kenney_Mini_Square.ttf);
}

/*Kenney Pixel Mini*/
@font-face {
  font-family: pixelMini;
  src: url(fonts/Kenney_Mini.ttf);
}

/* * * Main (Large Containers) * * */

html {
  font-family: helvetica, arial, sans-serif;
  font-size: 10px;
  
  /* * * Hides everything that goes outside of the boundaries horizontally * * */
  overflow-x: hidden;
  
  /* * * Hides the Cursor so the Custom Cursor is the only thing you see * * */
  /*cursor: none;*/
  
  
  /* * * Makes the "To The Top" Button able to scroll smoothly.* * */
  scroll-behavior: smooth;
}

/*Custom Cursor 3*/

#cursor {
  position: fixed;
  z-index: 99;
  left: 0;
  top: 0;
  pointer-events: none;
  will-change: transform;
  mix-blend-mode: difference;
}

@media (hover: hover) and (pointer: fine) {
  .cursor__circle {
    width: 48px; /*Original: 64 width, 64 height*/
    height: 48px;
    margin-top: -50%;
    margin-left: -50%;
    border-radius: 50%;
    /*border: solid 2px rgba(227, 222, 193, 0.64);*/
    border: solid 2px rgba(87, 186, 139, 0.64);
    transition: opacity 0.3s cubic-bezier(0.25, 1, 0.5, 1),
      background-color 0.3s cubic-bezier(0.25, 1, 0.5, 1),
      border-color 0.3s cubic-bezier(0.25, 1, 0.5, 1),
      width 0.3s cubic-bezier(0.25, 1, 0.5, 1),
      height 0.3s cubic-bezier(0.25, 1, 0.5, 1);
  }
  
  #cursor.arrow .cursor__circle{
    width: 64px; /*Originally 128 for both w and h*/
    height: 64px;
    /*background-color: #073099;
    border-color: #073099;*/
    background-color: #202020;
    border-color: #404040;
  }
  
  #cursor.home .cursor__circle{
    width: 64px; /*Originally 128 for both w and h*/
    height: 64px;
    /*background-color: #073099;
    border-color: #073099;*/
    background-color: #202020;
    border-color: #404040;
  }
  
  #cursor.none .cursor__circle{
    width: 64px; /*Originally 128 for both w and h*/
    height: 64px;
    /*background-color: #073099;
    border-color: #073099;*/
    /*background-color: #57ba8b;*/
    background-color: #94d3b7;
    border-color: #404040;
  }
  
  #cursor.resource .cursor__circle{
    width: 32px; /*Originally 128 for both w and h*/
    height: 32px;
    /*background-color: #073099;
    border-color: #073099;*/
    /*background-color: #57ba8b;*/
    /*background-color: #202020;*/
    border-color: #404040;
  }
  
  #cursor.arrow::after{
    content: '';
    position: absolute;
    left: -50%;
    top: -50%;
    width: 100%;
    height: 100%;
    /*Arrow*/
    /*background-image: url('https://svgshare.com/i/MzQ.svg');
    background-repeat: no-repeat;
    background-position: center;*/
    /*Arrow2*/
    /*background-image: url('https://image.flaticon.com/icons/svg/748/748073.svg');
    background-repeat: no-repeat;
    background-position: center;*/
    /*GradientArrow2*/
    background-image: url('https://image.flaticon.com/icons/svg/747/747904.svg');
    background-repeat: no-repeat;
    background-position: center;
    
    mix-blend-mode: color-burn;
  }
  
  #cursor.home::after{
    content: '';
    position: absolute;
    left: -50%;
    top: -50%;
    width: 100%;
    height: 100%;
    /*HomeIcon*/
    background-image: url('https://image.flaticon.com/icons/svg/709/709537.svg');
    background-repeat: no-repeat;
    background-position: center;
    
    mix-blend-mode: color-burn;
  }
  
  #cursor.none::after{
    content: '';
    position: absolute;
    left: -50%;
    top: -50%;
    width: 100%;
    height: 100%;
    /*PlaneIcon*/
    background-image: url('https://image.flaticon.com/icons/svg/1034/1034160.svg');
    background-repeat: no-repeat;
    background-position: center;
    
    mix-blend-mode: color-burn;
  }
  
  #cursor.resource::after{
    content: '';
    position: absolute;
    left: -50%;
    top: -50%;
    width: 100%;
    height: 100%;
    /*PlayIcon*/
    background-image: url('https://www.flaticon.com/svg/static/icons/svg/109/109720.svg');
    background-repeat: no-repeat;
    background-position: center;
    
    mix-blend-mode: color-burn;
  }
  
  #cursor.subtle .cursor__circle{
    opacity: 0.16;
  }
  
  #cursor.overlay .cursor__circle{
    width: 48px;
    height: 48px;
    background-color: rgba(227, 222, 193, 0.08);
    border-color: transparent;
  }
}


/*Custom Cursor 2 (UNUSED)*/

#canvas {
  /*position: absolute;
  width: 100%;
  height: 100%;
  z-index: 100;
  overflow: visible;
  display: auto;*/
}

/*#canvasContainer {
  background-color: rgba(0, 0, 0, 0.2);
}*/

/*Custom Cursor 1 (UNUSED)*/

#follower {
  position: absolute;
  top: 50%;
  left: 50%;
}

#follower #circle1 {
  position: absolute;
  -webkit-animation: pulse 2s infinite; /* Chrome, Safari, Opera */
  animation: pulse 4s infinite;
  background: #000;
  border-radius: 50%;
  height: 0em;
  width: 0em;
  margin-top: 0em;
  margin-left: 0em;
}
/*
#follower #circle2 {
  position: absolute;
  -webkit-animation: pulse 4s infinite; /* Chrome, Safari, Opera *//*
  animation: pulse 4s infinite;
  background: rgba(93, 170, 171, 0.8);
  border-radius: 50%;
  height: 0em;
  width: 0em;
  margin-top: 0em;
  margin-left: 0em;
}
*/
@-moz-keyframes pulse {
  0% {
    opacity: 0.2;
    height: 1em;
    width: 1em;
    margin-top: -0.5em;
    margin-left: -0.5em;
  }
  50% {
    opacity: 0.9;
    height: 3em;
    width: 3em;
    margin-top: -1.5em;
    margin-left: -1.5em;
  }
  100% {
    opacity: 0.2;
    height: 1em;
    width: 1em;
    margin-top: -0.5em;
    margin-left: -0.5em;
  }
}

@-webkit-keyframes pulse {
  0% {
    opacity: 0.2;
    height: 1em;
    width: 1em;
    margin-top: -0.5em;
    margin-left: -0.5em;
  }
  50% {
    opacity: 0.9;
    height: 3em;
    width: 3em;
    margin-top: -1.5em;
    margin-left: -1.5em;
  }
  100% {
    opacity: 0.2;
    height: 1em;
    width: 1em;
    margin-top: -0.5em;
    margin-left: -0.5em;
  }
}

@-o-keyframes pulse {
  0% {
    opacity: 0.2;
    height: 1em;
    width: 1em;
    margin-top: -0.5em;
    margin-left: -0.5em;
  }
  50% {
    opacity: 0.9;
    height: 3em;
    width: 3em;
    margin-top: -1.5em;
    margin-left: -1.5em;
  }
  100% {
    opacity: 0.2;
    height: 1em;
    width: 1em;
    margin-top: -0.5em;
    margin-left: -0.5em;
  }
}

@keyframes pulse {
  0% {
    opacity: 0.2;
    height: 1em;
    width: 1em;
    margin-top: -0.5em;
    margin-left: -0.5em;
  }
  50% {
    opacity: 0.9;
    height: 3em;
    width: 3em;
    margin-top: -1.5em;
    margin-left: -1.5em;
  }
  100% {
    opacity: 0.2;
    height: 1em;
    width: 1em;
    margin-top: -0.5em;
    margin-left: -0.5em;
  }
}

/*Selection Text and Background Color*/

::-moz-selection { /* Code for Firefox */
  color: #f5fff5;
  background: #9995D0;
  /*outline: 5px solid #000000;*/
}

::selection {
  color: #f5fff5;
  background: #9995D0;
  /*outline: 100px solid #000000;*/
}

body {
  margin: 0;
}

main {
  margin: 2rem;
}

h1 {
  font-family: "Alata", sans-serif;
  margin-bottom: 0em; /*Originally 0.67em*/
}

p {
  font-family: "pixelMini", sans-serif;
}

.email {
  font-family: "Alata", sans-serif;
  font-size: 1.6rem;
}

.emailCL {
  /*color: #81CAA8;*/
  color: #AA9FDF;
}

.emailCD {
  color: #332D52;
}

li {
  font-family: "pixelMini", sans-serif;
}

h2 {
  font-family: "Alata", sans-serif;
}

.title1 {
  width: auto;
  display: flex;
  /*display: inline-block;*/
  text-align: left;
  margin-right: 0px;
}

h3 {
  font-family: "pixelMiniS", sans-serif;
}

h4 {
  font-family: "pixelMiniS", sans-serif;
}

nav {
  /*Makes navbar stick to the top of the screen*/
  position: -webkit-sticky; /* Safari */
  position: sticky;
  top: -5px;
  z-index: 10;
}

footer {
  /*Slide-out Footer (not working yet...)*/
  /*position: sticky;
  bottom: 0;
  left: 0;
  width: 100%;*/
}

.footer1 {
  background-color: #363347;
  height: auto;
  z-index: 10;
}

.pfooter1 {
  background-color: #ffffff;
}

.rfooter1 {
  background-image: linear-gradient(90deg, #57ba8b, #5DABAB, #7893be);
}

.footer2 {
  background-color: #4b8972;
  height: auto;
  margin-top: -5px;
  
  z-index: 10;
  /*outline: 5px solid #467568;*/
  border-top: 8px solid #467568;
  border-bottom: 15px solid #4b8972;
  
  text-align: center;
}

.footerB {
  /*background: none;*/
  background-color: rgba(79, 69, 94, 0.50);
  
  /*border: 3px solid #363347;
  border-radius: 5px;
  color: #363347;*/
  
  display: inline-block;
  /*width: 100%;*/
  /*max-width: 50%;*/
  /*max-width: 29em;
  height: auto;*/
  
  /*top, right, bottom, left */
  margin: 0em 0em 0em 0em;
  padding: 1em 2em;
  position: relative;
  
  font-family: "pixelMiniS", sans-serif;
  font-size: 2rem;
  
  overflow: hidden;
  cursor: none; /* * * Gets rid of the cursor when hovering over a button * * */
}

.footerB2 {
  background: none;
  /*background-color: #4F455E;*/
  background-color: rgba(79, 69, 94, 0.20);
  
  border: 3px solid #363347;
  border-radius: 5px;
  color: #363347;
  
  display: inline-block;
  width: 100%;*/
  /*max-width: 50%;*/
  max-width: 29em;
  height: auto;
  
  /*top, right, bottom, left */
  margin: 1em 0em 0em 0em;
  padding: 1em 2em;
  position: relative;
  
  font-family: "pixelMiniS", sans-serif;
  /*font-size: 1.5rem;*/
  
  overflow: hidden;
  cursor: none; /* * * Gets rid of the cursor when hovering over a button * * */
}

.footerB3 {
  background: none;
  /*background-color: #4F455E;*/
  background-color: rgba(255, 255, 255, 0.5);
  
  border: 3px solid #363347;
  border-radius: 5px;
  color: #363347;
  
  display: inline-block;
  width: 100%;*/
  /*max-width: 50%;*/
  max-width: 29em;
  height: auto;
  
  /*top, right, bottom, left */
  margin: 1em 0em 0em 0em;
  padding: 1em 2em;
  position: relative;
  
  font-family: "pixelMiniS", sans-serif;
  /*font-size: 1.5rem;*/
  
  overflow: hidden;
  cursor: none; /* * * Gets rid of the cursor when hovering over a button * * */
}

/* * * The same animations as above, but for other buttons (NOT WORKING)* * */

.footerB::before,
.footerB::after {
  background: none;
  content: '';
  position: absolute;
  z-index: -1;
}

/*Changes the color of the text gradually (and gradually makes the button go back up)*/
.footerB:hover {
  color: #57ba8b;
  transition-duration: 0.6s;
}

/*Moves the button down when you press it*/
.footerB:active {
  transform: translateY(4px);
  transition-duration: 0s;
}

/*These two below are the thing that comes in while hovering*/
.footerB::after {
  /*background-color: #f00;*/
  height: 100%;
  left: -35%;
  top: 0;
  transform: skew(50deg); /*Changing this angle changes how the "shine" comes through*/
  transition-duration: 0.6s;
  transform-origin: top left;
  width: 0;
}

.footerB:hover:after {
  height: 100%;
  width: 135%;
}

/*Second button*/

.footerB2::before,
.footerB2::after {
  background: none;
  content: '';
  position: absolute;
  z-index: -1;
}

/*Changes the color of the text gradually (and gradually makes the button go back up)*/
.footerB2:hover {
  color: #57ba8b;
  transition-duration: 0.6s;
}

/*Moves the button down when you press it*/
.footerB2:active {
  transform: translateY(4px);
  transition-duration: 0s;
}

/*These two below are the thing that comes in while hovering*/
.footerB2::after {
  /*background-color: #f00;*/
  height: 100%;
  left: -35%;
  top: 0;
  transform: skew(50deg); /*Changing this angle changes how the "shine" comes through*/
  transition-duration: 0.6s;
  transform-origin: top left;
  width: 0;
}

.footerB2:hover:after {
  height: 100%;
  width: 135%;
}

/*Third Button! (Only did the text color change)*/

.footerB3:hover {
  color: #ffffff;
  transition-duration: 0.6s;
}

/*Footer Divs*/

.fdiv1 {
  /*background-color: none;*/
  background-image: linear-gradient(0deg, #4b8972, #446e64);
  color: #ffffff;
  
  width: 85%;
  height: 80%;
  
  border-top: 2px dashed #ffffff;
  /*border-left: 2px dashed #ffffff;
  border-right: 2px dashed #ffffff;*/
  display: inline-block;
  
  padding-left: 10px;
  padding-right: 10px;
}

.fdiv2 {
  /*background-color: none;*/
  background-image: linear-gradient(0deg, #4b8972, #446e64);
  color: #ffffff;
  
  width: 85%;
  height: 80%;
  
  border-top: 2px dashed #ffffff;
  /*border-left: 2px dashed #ffffff;
  border-right: 2px dashed #ffffff;*/
  display: inline-block;
  
  padding-left: 10px;
  padding-right: 10px;
}

.fdiv3 {
  /*background-color: none;*/
  /*background-image: linear-gradient(0deg, #4b8972, #446e64);*/
  color: #ffffff;
  
  width: 85%;
  height: 80%;
  
  border-top: 2px dashed #BDDBCD;
  /*border-left: 2px dashed #ffffff;
  border-right: 2px dashed #ffffff;*/
  display: inline-block;
  
  padding-left: 10px;
  padding-right: 10px;
}

/*H1-3 Responsive Font Sizing*/

@media screen and (min-width: 501px) {
  h1 {
    font-size: 6.5rem;
  }
  h2 {
    font-size: 3em;
  }
  h3 {
    font-size: 2em;
  }
  p {
    font-size: 1.6rem;
    margin-top: 16px; /*The default for paragraphs*/
  }
  .email {
    font-size: 1.6rem;
  }
  .title1 {
    display: flex;
  }
}

@media screen and (max-width: 500px) {
  h1 {
    font-size: 4rem;
    text-align: center;
  }
  #centerS {
    text-align: center;
  }
  h2 {
    font-size: 2em;
  }
  h3 {
    font-size: 1em;
  }
  p {
    font-size: 4vw;
    margin-top: 0px;
  }
  .email {
    font-size: 4vw;
  }
  .title1 {
    margin-bottom: 10px;
  }
}

@media screen and (max-width: 400px) {
.title1 {
    display: inline-block;
    /*margin-bottom: 10px;*/
  }
}

a {
  color: #ffffff;
}

a:visited {
  color: #A5D9C1;
}

/*Project Page Links*/

a.plink {
  text-decoration: none;
}

/*navbar*/

.nav-sitewide {
  /*background-color: #363347;*/
  background-image: linear-gradient(-80deg, #7A92BF, #5DABAB, #57BB8A);
  list-style-type: none;
  margin: 5px 0px 0px 0px;
  padding: 1rem 2rem;
  text-align: right;

  border-color: #ffffff;
  border-style: solid;
  border-width: 5px 0px 5px 0px;
}

.nav-sitewide li {
  font-family: "Alata", sans-serif;
  /*font-family: "Courier New", Courier, monospace;*/
  display: inline-block;
  padding: 1rem;
}

.nav-sitewide a {
  color: white;
  font-size: 2rem;
  text-decoration: none;
  transition: color 1s ease 0s;
  cursor: none; /* * * Gets rid of the cursor when hovering over a link in the navbar * * */
}

.nav-sitewide a:hover {
  /* Exchanged for the animUnder text decoration
text-decoration: underline;*/
  color: #000000;
}

#chosen {
  color: #363347;
  text-decoration: line-through;
}

/* * * Made by Us (G/A) * * */ /* * * - = - = - * * */



.logo {
  float: left;
  margin: none;
  padding: none;
}

.svg1 {
  position: absolute;
  left: -285px;
  top: 35px;
  z-index: -2;
  animation: skew 4s ease infinite;
  animation: skew2 6s ease infinite;
  animation-direction: alternate;
}

@keyframes skew {
  0% {
    transform: skewY(-3deg);
  }
  100% {
    transform: skewY(3deg);
  }
}

@keyframes skew2 {
  0% {
    transform: skewX(-3deg);
  }
  100% {
    transform: skewX(3deg);
  }
}

.svg11 {
  position: absolute;
  left: -285px;
  top: 35px;
  z-index: -3;
}

/* Unused
.svg2 {
  position: absolute;
  left: 500px;
  top: 50px;
  z-index: -2;
}*/

.svgtop {
  z-index: -20;
  position: absolute;
  top: 0px;
}

.svg2 {
  position: absolute;
  left: -180px;
  top: 1235px;
  z-index: -1;
  animation: skew 4s ease infinite;
  animation: skew2 6s ease infinite;
  animation-direction: alternate;
}

.svg22 {
  position: absolute;
  left: -180px;
  top: 1235px;
  z-index: -3;
}

.svg3 {
  position: absolute;
  left: 0px;
  top: 2120px;
  z-index: 1;
  animation: skew 4s ease infinite;
  animation: skew2 6s ease infinite;
  animation-direction: alternate;
}

.div1-sitewide {
  background-color: #363347;
  /*background-image: linear-gradient(-80deg, #7A92BF, #5DABAB, #57BB8A);*/
  
  color: #ffffff;
  
  /*height: 500px;*/
  height: auto;
  
  margin: 0px 0px 0px 0px;
  padding: 1rem 2rem;

  border-color: #ffffff;
  border-style: solid;
  border-width: 0px 0px 5px 0px;
}

.meetUs0 {
  width: 100%;
  height: auto;
  padding: 0px;
  padding-bottom: 10px;
  border: none;
  background-color: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: left;
  /*background-image: url("img/ga-club-photo-1.png");
  background-repeat: no-repeat;
  background-size: auto 500px;*/
}

.meetUsImgContainer {
  width: 100%;
  height: auto;
  padding: 0px;
  margins: 0px;
  background-color: rgba(0, 0, 0, 0.0);
  display: flex;
  justify-content: right;
  /*background-image: url("img/ga-club-photo-1.png");
  background-repeat: no-repeat;
  background-size: auto 500px;*/
}

.meetUs1 {
  width: 25%;
  height: 220px;
  border: none;
  margin-top: 10px;
  /*margin-right: 10px;*/
  padding: 0px !important;
  outline: 10px solid #363347;
  text-align: right;
  display: flex;
  
  /*background-color: #627268;*/
  background-image: linear-gradient(0deg, #4b8972, #446e64);
}

.meetUs2 {
  /*width: 150px;*/
  width: 45%;
  height: 200px;
  border: none;
  
  margin: none;
  margin-left: 10px;
  margin-top: 10px;
  margin-right: 10px;
  
  padding: 0px !important;
  border: none;
  text-align: center;
  
  background-color: #ffffff;
  outline: 5px ridge #ffffff;
  outline-offset: -5px;
}

.meetUs3 {
  height: 200px;
  background-color: rgba(0, 0, 0, 0.5);
  text-align: right;
  overflow-x: hidden;
  overflow-y: auto;
  
  outline: none;
}

.meetUsProfile {
  margin-top: 0px;
  margin-right: 0px;
  font-size: 1.2rem;
}

@media (max-width: 800px) {
  .meetUs1 {
    height: 410px;
    margin-top: 10px;
    flex-direction: column;
  }
  .meetUs2 {
    margin-left: 0px;
    width: 100%;
    margin-top: 0px;
    outline: none;
  }
  .meetUs3 {
    width: 100%;
  }
  .meetUsProfile {
    margin-right: 10px;
  }
}

.div2-sitewide {
  /*background-color: #ffffff;*/
  /*background-image: linear-gradient(-180deg, #7A92BF, #363347);*/
  
  color: #363347;
  
  height: auto;
  
  margin: 0px 0px 0px 0px;
  padding: 1rem 2rem;

  border-color: #ffffff;
  border-style: solid;
  border-width: 0px 0px 5px 0px;
  
  text-align: center;
}

.div3-sitewide {
  /*background-color: #363347;*/
  background-image: linear-gradient(-180deg, #7A92BF, #363347);
  
  color: #ffffff;
  
  height: auto;
  
  margin: 0px 0px 0px 0px;
  padding: 1rem 2rem;

  /*border-color: #ffffff;
  border-style: solid;
  border-width: 0px 0px 5px 0px;*/
}

.div4-sitewide {
  /*background-color: #57ba8b;*/
  background-image: linear-gradient(90deg, #57ba8b, #5DABAB, #7893be);
  
  color: #ffffff;
  
  height: auto;
  
  margin: 0px 0px 0px 0px;
  padding: 1rem 2rem;

  /*border-color: #ffffff;
  border-style: solid;
  border-width: 0px 0px 5px 0px;*/
}

/*Resources Page Divs*/

.rdivflex {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center; 
}

.rdivflex2 {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  /*justify-content: left;*/
  justify-content: space-between;
  /*justify-content: space-around;*/
  align-items: left;
  
}

@media (max-width: 800px) {
  .rdivflex2 {
    flex-direction: column;
  }
}

.rdfitem {
  flex: 50%; /*Makes the items take up 50% of the flexbox*/
  background: rgba(201, 198, 205, 0.5);
  padding: 0rem 0rem 0rem 0rem;
}

.rfeatured {
  /*background: rgba(255, 215, 0, 0.5); Gold*/
  /*background: linear-gradient(-80deg, rgba(201, 198, 205, 0.5), hsla(169, 67%, 69%, 0.5));*/
  background: linear-gradient(-80deg, rgba(201, 198, 205, 0.5), rgba(255, 215, 0, 0.5));
}

.rfeatured a:hover {
  color: rgba(184, 134, 11, 1);
}

/*Flipped version of .rfeatured*/
.rfeatured2 { 
  background: linear-gradient(80deg, rgba(201, 198, 205, 0.5), rgba(255, 215, 0, 0.5));
}

.rfeatured2 a:hover {
  color: rgba(184, 134, 11, 1);
}

.rlabel {
  float: right;
  display: inline-block;
  background: #c5c5c5; /*Change background using style="" for different labels*/
  /*border: 0px solid #000;*/
  /*box-shadow: -3px -3px 0px rgba(51, 47, 55, 0.25) inset, 0px 2px 0px rgba(255, 255, 255, 0.15) inset;*/
  box-shadow: -3px -3px 0px rgba(140, 139, 172, 0.25) inset;
  border-radius: 5px;
  padding: 5px;
  margin-right: 10px;
  /*top right bottom left*/
}

/*.rcolumn1 {
  column-count: 2;
}*/

.rdiv1 {
  background-color: #363347;
  color: #ffffff;
  border-color: #ffffff;
  border-style: solid;
  border-width: 3px 3px 3px 3px;
  border-radius: 20px;
  
  width: 25%;
  height: auto;
  margin: 10px;
  /*padding: vertical horizontal;*/
  padding: 20px 20px;
  
  white-space: wrap;
  overflow: hidden;
  text-overflow: ellipsis;
  word-wrap: break-word;
  
  text-align: center;
}

.rlink1 {
  text-decoration: none;
}

.rtablink1:visited {
  color: #363347;
}

.rtablink1:hover {
  color: #57ba8b;
  transition: 0.3s;
}

.rtablink1 {
  color: #363347;
}

/*Resources Tab Menu*/

/* Style the tab */
.tab {
  overflow: hidden;
  /*border: 1px solid #ccc;*/
  border: 3px solid #363347;
  /*background-color: #c0ecd8;*/
  background: linear-gradient(80deg, #c0ecd8, /*#a3f0da*/#7be5d1);
  
  text-align: center;
}

/* Style the buttons inside the tab */
.tab button {
  /*background-color: inherit;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.3s;
  font-size: 17px;*/
  
  /*background: #fff;*/
  /*background: linear-gradient(90deg, hsla(360, 100%, 100%, 0), hsla(360, 100%, 100%, 0), hsla(249, 29%, 75%, 1), hsla(360, 100%, 100%, 0));*/
  background: linear-gradient(90deg, hsla(360, 100%, 100%, 0), hsla(249, 16%, 24%, 0.2));
  
  border: 3px solid #363347;
  border-radius: 5px;
  color: #363347;
  
  display: inline-block;
  width: auto;
  /*max-width: 50%;*/
  max-width: 29em;
  height: auto;
  
  /*top, right, bottom, left */
  /*margin: 1em 0em 2em 0em;*/
  margin: 1em 0.5em 1em 0.5em;
  padding: 1em 2em;
  position: relative;
  
  font-family: "pixelMiniS", sans-serif;
  
  overflow: hidden;
  cursor: pointer; /* * * Gets rid of the cursor when hovering over a button * * */
}

/* Change background color of buttons on hover */
.tab button:hover {
  background-color: #a8a3c2;
  transition: 0.3s;
}

/* Create an active/current tablink class */
.tab button.active {
  background-color: #8b85ad;
  color: #ffffff;
  transform: scale(1.1);
}

#rsoftwarebutton {
  background: linear-gradient(90deg, rgba(87, 186, 139, 0.3), rgba(93, 171, 171, 0.5), rgba(120, 147, 190, 0.7));
}

#rsoftwarebutton:hover {
  background: linear-gradient(90deg, rgba(87, 186, 139, 0.5), rgba(93, 171, 171, 0.7), rgba(120, 147, 190, 0.9));
  transition: 0.3s; /*Doesn't do anything?*/
}

#rsoftwarebutton.active {
  background: linear-gradient(90deg, rgba(87, 186, 139, 0.7), rgba(93, 171, 171, 0.85), rgba(120, 147, 190, 1));
  color: #ffffff;
  transform: scale(1.1);
}

/* Style the tab content */
.tabcontent {
  display: none;
  padding: 12px 12px;
  /*border: 1px solid #ccc;*/
  border: 3px solid #363347;
  border-top: none;
  
  word-wrap: break-word;
  
  overflow: hidden;
}

/*Align paragraphs in the tabcontent to the center*/
/*.tabcontent p {
  text-align: center;
}*/

/* Style the close button */
.topright {
  float: right;
  cursor: pointer;
  /*font-size: 28px;*/
  font-size: 35px;
}

.topright:hover {
  color: #dc143c; /*Red*/
}

@media (max-width: 800px) {
  .topright {
    font-size: 20px;
  }
}

/*Resources Page Card Tilt CSS*/

.wrap {
  /*margin: 2rem;*/
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  -webkit-transform: perspective(100rem);
          transform: perspective(100rem);
  cursor: pointer;
}
.rcontainer {
  --rX: 0; /*Default rotation of the cards*/
  --rY: 0;
  --bX: 50%; /*Idk what these do*/
  --bY: 80%; /*--by was Originally 80% (changed in javascript as well)*/
  /*Width and Height used to define how the 3D affect is applied (maybe not?)*/
  /*Originally 30rem (width) and 36rem (height)*/
  width: 24rem;
  height: 30rem;
  
  border: 3px solid #ffffff;
  /*border-radius: 1.6rem;*/
  
  padding: 2rem;
  /*display: flex;*/
  /*align-items: flex-end;*/
  position: relative;
  -webkit-transform: rotateX(calc(var(--rX) * 1deg)) rotateY(calc(var(--rY) * 1deg));
          transform: rotateX(calc(var(--rX) * 1deg)) rotateY(calc(var(--rY) * 1deg));
  
  /*background: linear-gradient(hsla(0, 0%, 100%, .1), hsla(0, 0%, 100%, .1)), url("https://webdevtrick.com/wp-content/uploads/flower.jpg");
  background-position: var(--bX) var(--bY);
  background-size: 40rem auto;*/
  /*background-image: radial-gradient(circle, #7893be, #363347);*/
  
  box-shadow: 0 0 3rem .5rem hsla(0, 0%, 0%, .2);
  transition: -webkit-transform .6s 1s;
  transition: transform .6s 1s;
  transition: transform .6s 1s, -webkit-transform .6s 1s;
}

/*rcontainer backgrounds!*/

/*GreenToPurpleishBlue Gradient: linear-gradient(hsla(152, 42%, 54%, 0), hsla(249, 16%, 24%, 0.5))*/
/*DarkPurple Overlay Gradient: linear-gradient(hsla(249, 16%, 24%, 0.3), hsla(249, 16%, 24%, 0.3))*/

.rcbg1 {
  background: linear-gradient(hsla(249, 16%, 24%, 0.3), hsla(249, 16%, 24%, 0.3)), url("https://i.ytimg.com/vi/uDqjIdI4bF4/maxresdefault.jpg");
  background-position: var(--bX) var(--bY);
  background-size: 60rem auto; /*width height*/
  
  text-shadow: 1px 1px 0px #000000;
}

.rcbg2 {
  /*background: linear-gradient(hsla(0, 0%, 100%, .1), hsla(0, 0%, 100%, .1)), url("https://mir-s3-cdn-cf.behance.net/project_modules/fs/798dfb77982249.5ccb5d6f3c4b9.png");*/
  /*background: linear-gradient(hsla(0, 0%, 100%, .1), hsla(0, 0%, 100%, .1)), url("https://saint11.org/blog/thoughts_on_low_resolution/image7.png");*/
  background: linear-gradient(hsla(249, 16%, 24%, 0.5), hsla(249, 16%, 24%, 0.3)), url("https://saint11.art/img/pixel-tutorials/1-bit.gif");
  background-position: var(--bX) var(--bY);
  background-size: 60rem auto; /*width height*/
  
  text-shadow: 1px 1px 0px #000000;
}

.rcbg3 {
  /*background: linear-gradient(hsla(0, 0%, 100%, .1), hsla(0, 0%, 100%, .1)), url("https://images.hdqwalls.com/download/8-bit-artwork-house-island-in-middle-of-water-8v-3840x2400.jpg");*/
  background: linear-gradient(hsla(249, 16%, 24%, 0.6), hsla(249, 16%, 24%, 0.6)), url("https://lospec.com/articles/pixel-art-where-to-start/pixel-art-collage.jpg");
  background-position: var(--bX) var(--bY);
  background-size: 70rem auto; /*width height*/
  
  /*color: #000000;*/
  text-shadow: 1px 1px 0px #000000;
}

.rcbg4 {
  /*background: linear-gradient(hsla(249, 16%, 24%, 0.3), hsla(249, 16%, 24%, 0.3)), url("https://mir-s3-cdn-cf.behance.net/project_modules/1400_opt_1/e1af87105565713.5f7c29853db36.jpg");*/
  background: linear-gradient(hsla(249, 16%, 24%, 0.5), hsla(249, 16%, 24%, 0.5)), url("https://tse2.mm.bing.net/th?id=OIP.lBrnWcqU10LwolAdeOU4XAHaEK&pid=Api");
  background-position: var(--bX) var(--bY);
  background-size: 60rem auto; /*width height*/
  
  text-shadow: 1px 1px 0px #000000;
}

.rcbg5 {
  background: linear-gradient(hsla(0, 0%, 100%, .1), hsla(0, 0%, 100%, .1)), url("https://wallpapercave.com/wp/wp1933965.jpg");
  background-position: var(--bX) var(--bY);
  background-size: 70rem auto; /*width height*/
  
  text-shadow: 1px 1px 0px #000000;
}

/*Before and Afters are for the lines on the cards*/
.rcontainer::before,
.rcontainer::after {
  content: "";
  width: 1rem;
  height: 1rem;
  border: 1px solid #fff;
  position: absolute;
  z-index: 2;
  opacity: 1;
  transition: .3s;
}
.rcontainer::before {
  top: 1rem;
  right: 1rem;
  border-bottom-width: 0;
  border-left-width: 0;
}
.rcontainer::after {
  bottom: 1rem;
  left: 1rem;
  border-top-width: 0;
  border-right-width: 0;
}
.rcontainer--active {
  transition: none;
  /*background-size: 75rem auto;*/ /*width height*/
}

/*What does this mean? What are the 4rem measurements for?*/
.wrap:hover .rcontainer::before,
.wrap:hover .rcontainer::after {
  width: calc(100% - 4rem);
  height: calc(100% - 4rem);
}

/*Parallax for Project Page! **Doesn't work on mobile for some reason?*/

.parallax {
  /* Set a specific height */
  height: auto;
  /*height: 500px;*/
  
  /* Create the parallax scrolling effect */
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  
  /*-webkit-filter: blur(1px);*/ /* Safari 6.0 - 9.0 */
  /*filter: blur(1px);*/
  /*webkit-filter: saturate(60%);
  filter: saturate(60%);*/
  
  outline: 5px solid #ffffff;
  
  padding: 1rem 0rem;
  
  cursor: crosshair;
  
  transition-duration: 0.2s;
}

.parallax:hover {
  /*webkit-filter: saturate(100%);
  filter: saturate(100%);*/
  transform: scale(0.98);
}

.p1 {
  /* The image used */
  /*Write specifically for each div using style="background-image: url("image.jpg");"*/
  background-image: url("img/CrabBoss1.PNG");
}

.p2 {
  /* The image used */
  /*Write specifically for each div using style="background-image: url("image.jpg");"*/
  background-image: url("img/GALogoColorFINAL(pngtransparent).png");
}

.p3 {
  /* The image used */
  /*Write specifically for each div using style="background-image: url("image.jpg");"*/
  background-image: url("img/GALogoColorFINAL(png).png");
}

.p4 {
  /* The image used */
  /*Write specifically for each div using style="background-image: url("image.jpg");"*/
  background-image: url("img/GALogoColorFINAL(pngtransparent).png");
}

.overlayP1 {
  background-color: rgba(55, 51, 71, 0.5);
  color: #ffffff;
  /*margin: auto;*/
  margin-top: 200px;
  margin-bottom: 200px;
  
  /*width: 100%;
  height: 100%;*/
  
  /*-webkit-filter: blur(0px);*/ /* Safari 6.0 - 9.0 */
  /*filter: blur(0px);*/
  /*-webkit-filter: saturate(0%);*/ /* Safari 6.0 - 9.0 */
  /*filter: saturate(0%);*/
  transition-duration: 1s;
}

.overlayP1:hover {
  background-color: rgba(55, 51, 71, 1);
}

.overlayP2 {
  background-color: rgba(55, 51, 71, 0.5);
  color: #ffffff;
  /*margin: auto;*/
  margin-top: 50px;
  margin-bottom: 50px;
  
  /*width: 100%;
  height: 100%;*/
  
  /*-webkit-filter: blur(0px);*/ /* Safari 6.0 - 9.0 */
  /*filter: blur(0px);*/
  /*-webkit-filter: saturate(0%);*/ /* Safari 6.0 - 9.0 */
  /*filter: saturate(0%);*/
  transition-duration: 1s;
}

.overlayP2:hover {
  background-color: rgba(55, 51, 71, 1);
}

.parallax2 {
  /* Set a specific height */
  height: auto;
  /*height: 500px;*/
  
  /* Create the parallax scrolling effect */
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  
  /*-webkit-filter: blur(1px);*/ /* Safari 6.0 - 9.0 */
  /*filter: blur(1px);*/
  /*webkit-filter: saturate(60%);
  filter: saturate(60%);*/
  
  /*outline: 15px solid #363347;*/
  
  padding: 1rem 0rem;
  
  cursor: crosshair;
  
  transition-duration: 0.2s;
  
  /*position: relative;
  bottom: 15px;*/
}

/*.parallax2:hover {
  /*webkit-filter: saturate(100%);
  filter: saturate(100%);*/
  /*transform: scale(0.95);
}*/


.vid1{
  width: 100%;
  max-width: 480px;
  height: auto;
}

/*Project Page Google Document Imbed & its' container*/

.piframe {
  /*width: 110%;*/
  width: 100%;
  max-width: 110vh;
  height: 100vh;
  
  border: 3px solid #363347;
  
  /*align: center;
  align-items: center;
  justify-content: center;
  text-align: center;*/
}

.piframe-s {
  /*width: 100%;
  max-width: 100vh;
  height: 100vh;*/
  /*width: 1440px;
  height: 839px;*/
  width: 100%;
  height: 569px;
  
  border: 3px solid #363347;
}

.p1-sitewide {
  /*background-color: #363347;*/
  /*background-color: #ffffff;*/
  /*background-image: linear-gradient(-80deg, #7A92BF, #5DABAB, #57BB8A);*/
  
  color: #363347;
  
  /*height: 500px;*/
  height: auto;
  
  margin: 0px 0px 0px 0px;
  padding: 0rem 2rem;

  /*border-color: #ffffff;
  border-style: solid;
  border-width: 0px 0px 0px 0px;*/
  
  align: center;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.r1-sitewide {
  /*background-color: #363347;*/
  /*background-color: #ffffff;*/
  background-image: linear-gradient(-80deg, #7A92BF, #5DABAB, #57BB8A);
  
  color: #ffffff;
  
  /*height: 500px;*/
  height: auto;
  
  margin: 0px 0px 0px 0px;
  padding: 0rem 0rem 0rem 0rem;

  /*border-color: #ffffff;
  border-style: solid;
  border-width: 0px 0px 0px 0px;*/
  
  align: center;
  align-items: center;
  justify-content: center;
  text-align: center;
  
  box-shadow: 0px 10px 20px #363347 inset;
}

/*Illustration 1 (with responsive resizing!)*/

.img1 {
  float: right;
  display: inline-block;
  position: relative;
}

/* Image Containers */

.img1Con {
  
}

/*Image Captions/Credits*/

.img1C {
  position: absolute;
  bottom: 36px;
  right: 36px; /*bottom-right*/
}

@media screen and (min-width: 801px) {
  .img1 {
    float: right;
    width: 500px;
    height: 500px;
    bottom: 100px;
  }
  .img1C {
    bottom: 36px;
    right: 36px; /*Seems to not work in certain viewports--CHECK*/
  }
}
@media screen and (max-width: 800px) {
  .img1 {
    float: right;
    width: 300px;
    height: 300px;
    bottom: 0px;
  }
  .img1C {
    bottom: 36px;
    right: 36px;
  }
}
@media screen and (max-width: 500px) {
  .img1 {
    float: none;
    width: 80vw;
    height: auto;
    /*margin-left: 0%;*/
    bottom: 0px;
    /*top: -15px;*/
  }
  .img1C {
    /*bottom: 100px;
    right: 24px;
    font-size: 3vw;*/
    /*Can't solve right now--put to display: none to hide when small*/
    display: none;
  }
}

.breakMed {
  /*background-color: #363347;*/
  /*background-color: #808080;*/
  width: 100%;
  height: 60px;
  overflow: hidden;
}

.breakSm {
  /*background-color: #363347;*/
  /*background-color: #808080;*/
  width: 100%;
  height: 15px;
}

.breakSmHome {
  background-color: #363347;
  /*background-color: #808080;*/
  width: 100%;
  height: 15px;
  
  outline: 5px solid #363347;
}

/*PixelGradientBorders*/


/*Unused*/
.pixelGrad1 {
  /*background-color: #808080;*/
  opacity: 1;
  
  width: 100%;
  min-width: 500px;
  height: auto;
  
  position: relative;
  top: -20px;
  
  z-index: -1;
}

.pixelGrad2 {
  /*background-color: #808080;*/
  opacity: 1;
  
  width: 100%;
  min-width: 500px;
  height: auto;
  
  position: relative;
  top: -14px;
  
  z-index: 5;
}

/* UNUSED
@media screen and (min-width: 501px) {
  .pixelGrad1 {
    top: -24px;
  }
}
@media screen and (min-width: 701px) {
  .pixelGrad1 {
    top: -80px;
  }
}
@media screen and (min-width: 901px) {
  .pixelGrad1 {
    top: -102px;
  }
}
*/

/* Buttons */

button {
  background: none;
  
  border: 3px solid #363347;
  border-radius: 5px;
  color: #363347;
  
  display: block;
  width: 100%;
  /*max-width: 50%;*/
  max-width: 29em;
  height: auto;
  
  /*top, right, bottom, left */
  margin: 1em 0em 2em 0em;
  padding: 1em 2em;
  position: relative;
  
  font-family: "pixelMiniS", sans-serif;
  
  overflow: hidden;
  cursor: none; /* * * Gets rid of the cursor when hovering over a button * * */
}

/*Animated "Shine" Button!*/

/*Defines more attributes for the button before and after hover*/
.button1::before,
.button1::after {
  background: #363347;
  content: '';
  position: absolute;
  z-index: -1;
}

/*Changes the color of the text gradually (and gradually makes the button go back up)*/
.button1:hover {
  color: #57ba8b;
  transition-duration: 0.6s;
}

/*Moves the button down when you press it*/
.button1:active {
  transform: translateY(4px);
  transition-duration: 0s;
}

/*These two below are the thing that comes in while hovering*/
.button1::after {
  /*background-color: #f00;*/
  height: 100%;
  left: -35%;
  top: 0;
  transform: skew(50deg); /*Changing this angle changes how the "shine" comes through*/
  transition-duration: 0.6s;
  transform-origin: top left;
  width: 0;
}

.button1:hover:after {
  height: 100%;
  width: 135%;
}

/* * *Imported * * */

/*New Typewriter Effect CSS*/
/*USED*/

.content {
  width: 10px;
  height: 40px;
  
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.typedtext {
  /*margin-top: 0px;
  margin-bottom: 15px;*/
  margin-left: 0.7rem;
  
  border-right: 2px solid black; /*Is the fake cursor*/
  animation: blinkTextCursor 800ms steps(44) infinite normal; /*Blinks fake cursor*/
  height: 40px; /*Height of fake cursor (and somewhat defines where the text is)*/
  color: #000;
  display: block;
  /*display: inline-block;*/
}

@keyframes blinkTextCursor {
  from {
    border-right-color: black;
  }
  to {
    border-right-color: transparent;
  }
}

/*Typewriter formatting stuff*/
@media screen and (min-width: 401px) {
  .typedtext {
    margin-left: 0.6rem;
    /*height: 40px; Height of fake cursor (and somewhat defines where the text is)*/
  }
  .title1 {
    
  }
}
@media screen and (max-width: 400px) {
  .typedtext {
    margin-left: 0rem;
    /*margin-left: 4rem;*/
    /*align: center;*/
    /*height: 40px; Height of fake cursor (and somewhat defines where the text is)*/
  }
  .title1 {
    
  }
}

/*Typewriter Effect*/
/* * * UNUSED * * */

.typewriter {
  /*border: 2px solid #363347;*/
  color: #000000;
  font-family: 'Alata', sans-serif;
  
  width: 7em;
  
  overflow: hidden; /* Ensures the content is not revealed until the animation */
  border-right: .15em solid #363347; /* The typwriter cursor */
  white-space: nowrap; /* Keeps the content on a single line */
  margin: -8px 2px; /* Gives that scrolling effect as the typing happens */ /*also moves the div left or right*/
  letter-spacing: .16em; /* Adjust as needed */
  
  text-align: left;
  display: inline-block;
  
  animation: 
    typing 3.5s steps(9, end) alternate infinite,
    blink-caret .5s step-end infinite;
}

/* The typing effect */
@keyframes typing {
  from {width: 0px}
  to {width: 7em}
}

@keyframes gone {
  from {display: inline-block }
  to {display: none}
}

/* The typewriter cursor effect (blinking)*/
@keyframes blink-caret {
  from, to { border-color: transparent }
  50% { border-color: #363347 }
}

/*link animated underline!!*/

.animUnder {
  position: relative;
  color: #fff;
  text-decoration: none;
}

.animUnder:hover {
  color: #fff;
}

.animUnder:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 2px;
  bottom: 0;
  left: 0;
  background-color: #ffffff;
  visibility: hidden;
  -webkit-transform: scaleX(0);
  transform: scaleX(0);
  -webkit-transition: all 0.3s ease-in-out 0s;
  transition: all 0.3s ease-in-out 0s;
}

.animUnder:hover:before {
  visibility: visible;
  -webkit-transform: scaleX(0.5);
  transform: scaleX(0.5);
}