/* ========================================
   FONT DECLARATIONS
   ======================================== */
@font-face {
  font-family: Eliot Lord;
  src: url(Fonts/Eliothand-Regular.otf);
}

@font-face {
  font-family: Impact;
  src: url(Fonts/Impact.ttf);
}

@font-face {
  font-family: Montserrat;
  src: url(Fonts/Montserrat-Regular.ttf);
}

@font-face {
  font-family: Montserrat ExtraBold;
  src: url(Fonts/Montserrat-ExtraBold.ttf);
}

@font-face {
  font-family: VB;
  src: url(Fonts/AIVeritas%20Black/AIVeritas%20BlackRegular/AIVeritas%20Black%20Regular.otf);
}

@font-face {
  font-family: Fail;
  src: url(Fonts/Fail.otf);
}

@font-face {
  font-family: Eliot Headline;
  src: url(Fonts/EliotHeadline-Regular.ttf);
}

@font-face {
  font-family: DS Digital;
  src: url(Fonts/DS-DIGIT.TTF);
}

@font-face {
  font-family: Devil;
  src: url(Fonts/DevilBreeze.ttf);
}

@font-face {
  font-family: Bell;
  src: url(Fonts/Bell%20MT.ttf);
}

@font-face {
  font-family: Corpid;
  src: url(Fonts/Corpid%20Caps%20Bold.otf);
}

@font-face {
  font-family: Corpid Regular;
  src: url(Fonts/Corpid%20Regular/Corpid%20Regular.otf);
}

@font-face {
  font-family: Helvetica Condensed;
  src: url(Fonts/HELVETI1.TTF);
}

@font-face {
  font-family: Time;
  src: url(Fonts/TIMES%20CY.TTF);
}

@font-face {
  font-family: DM;
  src: url(Fonts/Dm-Regular.otf);
}

@font-face {
  font-family: GBonserrat;
  src: url(Fonts/Gbonserrat-Regular.otf);
}

@font-face {
  font-family: GbonserratEB;
  src: url(Fonts/GbonserratExtra_bold.otf);
}

@font-face {
  font-family: Sunbodytolove;
  src: url(Fonts/Sunbodytolove.otf);
}

@font-face {
  font-family: Insta Sans;
  src: url("Fonts/instagram-sans-2/Instagram Sans Light.ttf");
}

@font-face {
  font-family: Instagram Sans;
  src: url("Fonts/instagram-sans-2/Instagram Sans Bold.ttf");
}

@font-face {
  font-family: Instagram;
  src: url("Fonts/Fontspring-DEMO-blue_vinyl_bold_ps_ot.otf");
}

@font-face {
  font-family: Guardian;
  src: url(Fonts/Graun-Regular.otf);
}

@font-face {
  font-family: Guardian Heavy;
  src: url(Fonts/GraunBold.otf);
}

@font-face {
  font-family: EliotHeadline;
  src: url(Fonts/Eliotheadline-Regular.otf);
}

@font-face {
  font-family: The Scum;
  src: url(Fonts/Thescum.otf);
}

@font-face {
  font-family: ToryGraph;
  src: url(Fonts/Torygraph.otf);
}

@font-face {
  font-family: Surial;
  src: url(Fonts/Surial-Regular.otf);
}

/* ========================================
     BASE STYLES
     ======================================== */
body {
  opacity: 100%;
  font-family: Eliot Lord;
  font-size: 2.2dvw;
  overflow-x: hidden;
  margin: 0;
  -webkit-user-drag: none;
}

/* ========================================
     BASE STYLES
     ======================================== */
body {
  opacity: 100%;
  font-family: Eliot Lord;
  font-size: 2.2dvw;
  overflow-x: hidden;
  margin: 0;
  -webkit-user-drag: none;
  cursor: url(img/background/cursors/Cursor.svg),
    url(img/background/Pointer.svg), pointer;
}

/* Remove or comment out this line - it's overriding everything! */
/* * {
      cursor: url(img/background/PointerNoGo.svg);
    } */

/* Apply default cursor to all text elements */
p,
h1,
h2,
h3,
h4,
h5,
h6,
span,
div,
li,
td,
th,
label,
.title_text,
.title_text1,
.title_text2,
.caption_text,
.caption_text1,
.caption,
.date,
.joke,
.heading,
.headline,
.subheadline,
.wordtitle {
  cursor: url(img/background/cursors/Cursor.svg),
    url(img/background/Pointer.svg), pointer;
}

/* Override for interactive elements */
a,
button,
a:hover,
img[onClick],
div[onclick] {
  cursor: url("img/background/Pointer.svg"), pointer !important;
}

/* Ensure all text elements inherit the cursor */
* {
  cursor: url(img/background/PointerNoGo.svg);
}

strong {
  font-family: Sunbodytolove;
}

img {
  -webkit-user-drag: none;
}

a {
  text-decoration: none;
}

button {
  cursor: url(img/background/Pointer.svg), pointer;
  height: 75px;
  font-family: Impact;
  font-size: 30px;
}

h1 {
  font-family: The Scum;
  font-weight: 900;
  font-size: 50px;
  text-align: center;
}

h2 {
  font-size: 3dvw;
  background-color: #fff;
  padding-top: 0;
  text-align: center;
}

h3 {
  font-size: 1.2em;
}

h3 a {
  font-weight: 100;
  color: #c33531;
}

h3 a:hover {
  color: #1131a3;
}

/* ========================================
     LAYOUT CONTAINERS
     ======================================== */
.container,
#container1 {
  width: 80%;
  background-color: white;
  height: 100%;
  overflow: hidden;
  padding-top: 30px;
  margin: 0 auto;
}

.container2 {
  width: 100%;
  height: 100%;
  overflow: hidden;
  padding-top: 30px;
  margin: 0 auto;
  font-weight: 100;
  border-style: solid white;
  background-color: white;
}

.container2 a {
  font-weight: 100;
  color: #c33531;
}

.container2 a:hover {
  color: #1131a3;
}

.center {
  display: block;
  margin: auto;
  text-align: center;
}

.center1 {
  display: block;
  margin-left: 42%;
  margin-right: 42%;
  width: 100%;
}

/* ========================================
     NAVIGATION BARS
     ======================================== */
.topnav a {
  font-family: GBonserrat;
  padding: 20px;
  color: black;
  font-size: 2dvh;
}

.topnav a:hover {
  text-decoration: none;
  font-weight: 900;
  background-image: url(img/background/empty.png);
  background-repeat: no-repeat;
  background-size: 100% 20%;
  background-position: bottom;
}

.topnavmail {
  background-color: white;
  font-family: VB;
  font-size: 1dvw;
  padding: 5px 10px;
}

.topnavmail a {
  color: black;
  text-decoration: none;
  font-weight: 800;
}

.topnavmail a:hover {
  font-weight: 900;
}

/* Top nav mail hover colors */
.topnavmail a:nth-of-type(1):hover {
  color: #ec1801;
}
.topnavmail a:nth-of-type(2):hover {
  color: #1e4cad;
}
.topnavmail a:nth-of-type(3):hover {
  color: #850024;
}
.topnavmail a:nth-of-type(4):hover {
  color: #e91111;
}
.topnavmail a:nth-of-type(5):hover {
  color: #1147e9;
}
.topnavmail a:nth-of-type(6):hover {
  color: #c88410;
}
.topnavmail a:nth-of-type(7):hover {
  color: #ec1801;
}
.topnavmail a:nth-of-type(8):hover {
  color: #8b0000;
}
.topnavmail a:nth-of-type(9):hover {
  color: #a92216;
}
.topnavmail a:nth-of-type(10):hover {
  color: #0e32b3;
}
.topnavmail a:nth-of-type(11):hover {
  color: #ac713c;
}
.topnavmail a:nth-of-type(12):hover {
  color: #e1306c;
}
.topnavmail a:nth-of-type(13):hover {
  color: #b90005;
}

#mailnavigationbar {
  background-color: #1e4cad;
  padding: 10px 10px;
  font-family: VB;
  font-size: 2.6dvw;
  color: white;
  font-weight: 900;
}

#mailnavigationbar a {
  font-family: VB;
  font-weight: 100;
  color: white;
  padding: 5px 10px;
  text-decoration: none;
  font-size: 2dvw;
  display: inline-block;
}

#mailnavigationbar a:hover {
  font-family: VB;
  text-decoration: none;
  display: inline-block;
  background-image: url(img/background/Underline%20White.svg);
  background-repeat: repeat-x;
  background-size: 100% 20%;
  background-position: bottom;
  font-weight: 900;
}

.gbbluesnavbar {
  background-color: #030e51;
  padding: 30px;
  font-family: GBonserrat;
  left: 0;
  border-top: 6px solid #d42027;
}

.gbbluesnavbar a {
  padding: 10px;
  font-size: 1.3dvw;
  color: white;
  text-decoration: none;
}

.gbbluesnavbar a:hover {
  font-family: GBonserratEB;
  font-size: 1.3dvw;
  font-weight: 1000;
  background-image: url(img/background/empty.png);
  background-repeat: no-repeat;
  background-size: 100% 20%;
  background-position: 0px 85%;
}

.topnavgb {
  background-color: white;
}

.topnavgb a {
  text-decoration: none;
  font-size: 1.2rem;
  padding: 20px;
  font-family: GBonserrat;
  color: #000;
}

.topnavgb a:hover {
  font-size: 1.2rem;
  padding: 20px;
  color: #002a98;
  font-family: GBonserratEB;
  font-weight: 100;
}

/* Times Navigation */
#timesnavigationbar,
#simesnavigationbar {
  font-size: 3dvw;
  font-weight: 900;
  background-color: black;
  font-family: "Times New Roman", Times, serif;
  height: auto;
  overflow: auto;
  position: sticky;
  top: 0;
  z-index: 2147483647;
}

#timesnavigationbar a {
  font-family: "Times New Roman", Times, serif;
  color: white;
  text-decoration: none;
  font-size: 3.1dvw;
  padding: 10px;
  margin: 0;
  float: left;
  font-weight: 800;
}

#timesnavigationbar a:hover {
  background-color: #4f4e4e;
  font-weight: 900;
  color: white;
}

#timesnavigationbar img {
  float: left;
  top: 100%;
  width: 14%;
}

#simesnavigationbar {
  background-image: linear-gradient(to right, #b50938, #e4003b, #faa61a);
}

#simesnavigationbar a {
  color: white;
  text-decoration: none;
  width: 50%;
  margin: auto;
  padding: 2%;
}

#simesnavigationbar a:hover {
  background-color: #a92323;
}

#simesnavigationbar img {
  float: left;
  padding-left: 60px;
}

/* Mirror Navigation */
.mirrornavbar {
  font-family: "Times New Roman", Times, serif;
  background-color: #a92323;
  font-weight: 900;
  padding: 50px;
  height: 0px;
}

.mirrornavbar a {
  font-family: "Arial Black";
  color: white;
  padding: 10px 10px 50px;
  text-decoration: none;
}

.mirrornavbar a:hover {
  text-decoration: underline;
  color: white;
}

.mirrornavbar img {
  height: auto;
  overflow: auto;
  top: 0;
  z-index: 2147483647;
  position: sticky;
}

/* Navau */
.navau,
.nav {
  background-color: white;
  top: 100%;
  opacity: 1;
}

.navau a,
.nav a {
  color: black;
  text-decoration: none;
  padding-left: 20px;
  font-family: ToryGraph;
}

.navau a:hover,
.nav a:hover {
  color: #e4003b;
  text-decoration: underline;
  cursor: url(img/background/Pointer.svg), pointer;
}

/* Instagram Navigation */
.navbarinsta {
  font-family: Insta Sans;
  font-size: 1.4dvw;
  padding: 40px;
  color: white;
}

.navbarinsta a {
  color: white;
  text-decoration: none;
  padding: 20px;
  font-size: 1.4dvw;
  font-family: Insta Sans;
  font-weight: 100;
}

.navbarinsta a:hover {
  background-image: url("img/background/UnderlineBlue.png");
  background-repeat: repeat-x;
  text-decoration: none;
  background-size: 100% 20%;
  background-position: bottom;
  color: white;
  font-weight: 800;
}

.navbarinsta a:active {
  font-family: "Instagram Sans";
  font-weight: 800;
  color: #00a2ff;
}

.line5 {
  background-color: #8134af;
  height: 2px;
}

/* Guardian Navigation */
.topnavgraun {
  background-color: #0b1e47;
  width: 100%;
  top: 0%;
  padding-bottom: 1%;
  font-family: Guardian Heavy;
  font-size: 1dvh;
  font-weight: 900;
}

.topnavgraun a {
  color: white;
  text-decoration: none;
  font-size: 2dvh;
}

.topnavgraun a:hover {
  color: #ffff66;
  text-decoration: underline;
}

.topnavbar {
  background-color: #062962;
  width: 100%;
  height: 150px;
  padding-left: 2%;
}

.topnavbar a {
  color: white;
  font-family: Guardian Heavy;
  font-size: 2.5dvh;
  padding: 2%;
  float: left;
  text-decoration: none;
}

.topnavbar a:nth-of-type(1):hover {
  text-decoration: underline;
  text-decoration-color: #e93717;
  text-underline-offset: 78%;
  text-decoration-thickness: 7px;
}

.topnavbar a:nth-of-type(2):hover {
  text-decoration: underline;
  text-decoration-color: #ef8636;
  text-underline-offset: 78%;
  text-decoration-thickness: 7px;
}

.topnavbar a:nth-of-type(3):hover {
  text-decoration: underline;
  text-decoration-color: #389fee;
  text-underline-offset: 78%;
  text-decoration-thickness: 7px;
}

.topnavbar a:nth-of-type(4):hover {
  text-decoration: underline;
  text-decoration-color: rgb(241, 184, 60);
  text-underline-offset: 78%;
  text-decoration-thickness: 7px;
}

.topnavbar a:nth-of-type(5):hover {
  text-decoration: underline;
  text-decoration-color: rgb(78, 172, 12);
  text-underline-offset: 78%;
  text-decoration-thickness: 7px;
}

.topnavbar a:nth-of-type(6):hover {
  text-decoration: underline;
  text-decoration-color: rgb(151, 7, 195);
  text-underline-offset: 78%;
  text-decoration-thickness: 7px;
}

.topnavbar img {
  float: right;
  padding-right: 2%;
}

/* Retro Navigation */
.Retronav {
  font-family: Corpid;
  background-color: #f1f1f1;
  background-clip: content-box;
}

.Retronav a {
  color: black;
  font-size: 1.5rem;
  text-decoration: none;
}

.Retronav a:hover {
  background-color: #f5c342;
  color: black;
}

/* Sun Navigation */
.sunnavigationbar {
  font-family: Sunbodytolove;
  font-weight: 900;
  border-top: 1px solid #fff;
  background-color: #ec1801;
  font-size: 2.6dvw;
  text-align: center;
  text-decoration: none;
}

.sunnavigationbar a {
  color: #fff;
  padding: 5px;
  display: inline-block;
  font-size: 2.6dvw;
  text-decoration: none;
}

.sunnavigationbar a:hover {
  color: #fff;
  display: inline-block;
  background-image: url(img/background/Underline%20White.svg);
  background-repeat: repeat-x;
  background-size: 100% 20%;
  background-position: bottom;
  font-family: Sunbodytolove;
  font-weight: 900;
}

/* Connections Navigation */
#connavigationbar {
  font-weight: 900;
  background-color: white;
  font-family: Helvetica;
  margin: auto;
  width: 50%;
  padding: 10px;
}

#connavigationbar a {
  color: black;
  font-family: VB;
  font-size: 5dvh;
  text-decoration: none;
  text-align: center;
  padding: 10px;
}

#connavigationbar a:hover {
  font-family: VB;
  text-decoration: none;
  background-image: url(img/background/Underlineblack.png);
  background-repeat: repeat-x;
  background-size: 100% 20%;
  background-position: bottom;
  cursor: url(img/background/Pointer.svg);
}

/* Mobile Menu */
.topnavoo {
  overflow: hidden;
  background-color: #333;
  position: relative;
}

.topnavoo #myLinks {
  display: none;
  z-index: 10000000000000;
}

.topnavoo a {
  color: white;
  padding: 14px 16px 16px 0px;
  text-decoration: none;
  font-size: 17px;
  display: block;
}

.topnavoo a.icon {
  background: black;
  display: block;
  position: absolute;
  right: 0;
  top: 0;
}

.topnavoo a:hover {
  background-color: #ddd;
  color: black;
}

#menuOverlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  z-index: 998;
}

#menuOverlay.overlay-active {
  opacity: 1;
  visibility: visible;
}

#myLinks {
  position: fixed;
  top: 0;
  right: -300px;
  width: 300px;
  height: 100%;
  background-color: #fff;
  box-shadow: -2px 0 10px rgba(0, 0, 0, 0.3);
  transition: right 0.3s ease;
  z-index: 999;
  overflow-y: auto;
}

#myLinks.menu-open {
  right: 0;
}

/* ========================================
     FOOTER STYLES
     ======================================== */
footer,
#footer,
.footer {
  background-color: #ffffff;
  float: left;
  bottom: 0;
  font-size: 3dvh;
  width: 100%;
  position: relative;
  overflow: hidden;
}

footer a,
.footer a {
  user-select: none;
  -webkit-user-drag: none;
  float: none;
  display: inline-block;
  color: #ffffff;
  text-decoration: none;
  font-family: Eliot Lord;
  padding-left: 20px;
}

footer a:hover,
.footer a:hover {
  color: white;
  cursor: url("img/background/Pointer.svg"), pointer;
}

#footer a {
  color: black;
  font-family: VB;
  font-weight: 900;
  text-decoration: none;
  display: inline-block;
  background-repeat: no-repeat;
  background-size: 100% 20%;
  background-position: bottom;
  font-size: 4.5dvh;
}

/* Footer hover colors */
#footer a:first-of-type:hover,
#footer a:nth-of-type(8):hover {
  color: #1e4cad;
}
#footer a:nth-of-type(2):hover {
  color: #850024;
}
#footer a:nth-of-type(3):hover {
  color: #e91111;
}
#footer a:nth-of-type(4):hover {
  color: #1147e9;
}
#footer a:nth-of-type(5):hover {
  color: #c88410;
}
#footer a:nth-of-type(6):hover {
  color: #ec1801;
}
#footer a:nth-of-type(7):hover {
  color: #8b0000;
}
#footer a:nth-of-type(9):hover {
  color: #0e32b3;
}
#footer a:nth-of-type(10):hover {
  color: #ac713c;
}
#footer a:nth-of-type(11):hover {
  color: #e1306c;
}
#footer a:nth-of-type(12):hover {
  color: #b90005;
}

.footergb {
  background-color: #ebebeb;
}

.footergb a {
  color: black;
  text-decoration: none;
  font-family: GBonserrat;
  padding-right: 5%;
}

.footergb a:hover {
  color: #002a98;
  font-family: GBonserratEB;
  font-weight: 100;
  background-color: #ebebeb;
}

.footertel {
  background-color: #153247;
  font-family: Arial;
  font-size: 1.2rem;
  padding: 40px 40px 0px 40px;
  text-decoration: none;
  columns: 4;
  column-gap: 20rem;
}

.footertel a {
  color: white;
  text-decoration: none;
  padding: 40px 40px 0px 40px;
  font-size: 1.2rem;
}

.footertel a:hover {
  color: white;
  text-decoration: underline;
  background-repeat: repeat-x;
  text-decoration-color: white;
}

.tfooter a {
  font-family: Time;
  font-size: 1.2dvh;
}

.tfooter a:hover {
  color: white;
}

.footer-container {
  background-color: #95aab6;
  display: flex;
  font-size: 3.6dvw;
}

.footer-container a {
  color: #f5f6f7;
  text-decoration: none;
  font-family: Eliot Lord;
  font-size: medium;
  text-align: center;
}

.video-container {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 aspect ratio (9/16 = 0.5625) */
  height: 0;
  overflow: hidden;
  max-width: 100%;
}

.video-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.footer-container a:hover {
  font-weight: 900;
}

#footerimagecenter,
.footerimagecenter {
  margin: auto;
  width: 50%;
  padding: 10px;
}

.socials a:hover {
  text-decoration: none;
  background-image: url(img/background/empty.png);
}

/* ========================================
     CONTENT LAYOUTS
     ======================================== */
.content-box {
  padding-top: 30px;
  columns: 3 auto;
  max-width: 1400px;
  border-left: 0px;
  border-right: 0px;
  column-gap: 40px;
  column-rule: 0px;
}

.content-box2 {
  padding-left: 20px;
  padding-top: 30px;
  columns: 3 auto;
  max-width: 1400px;
  border-left: 0px;
  border-right: 0px;
  column-gap: 40px;
  column-rule: 0px;
  font-size: 3dvw;
  text-decoration: none;
  font-family: Insta Sans;
}

.content-box2 a {
  color: #8134af;
  font-weight: 100;
  text-decoration: none;
  font-size: 3dvw;
  padding: 20px;
}

.content-box2 a:hover {
  font-family: Insta Sans;
  color: #dd2a7b;
}

.content-box2 p,
.content-box2 a {
  font-size: 3dvw;
}

@media (min-width: 768px) {
  .content-box1 {
    columns: 2;
    max-width: 90%;
    column-gap: 40px;
  }
}

.column,
#column {
  float: left;
  width: 300px;
  padding: 0;
}

.column1 {
  width: 350px;
}

.column2 {
  width: 350px;
}

/* ========================================
     HEADER STYLES
     ======================================== */
#header {
  background-color: white;
  fill: white;
  padding-top: 20px;
  padding-bottom: 20px;
  font-family: GBonserratEB;
  font-size: 3dvh;
}

#header img {
  display: flex;
  justify-content: center;
}

#headerlogo1 {
  width: 50%;
  margin: auto;
}

.header {
  padding: 20px 0px 20px;
  color: white;
  font-family: Instagram;
  font-size: 9dvw;
  font-weight: 900;
}

.heading {
  font-size: 75px;
  font-weight: 200;
  font-family: ToryGraph;
  text-shadow: 5px 5px 2px rgba(0, 0, 0, 0.3);
  letter-spacing: 2px;
}

.headline {
  text-align: center;
  font-family: Eliot Headline;
  font-size: 7dvh;
}

.subheadline {
  font-size: 2.5dvh;
  font-family: GBonserrat;
  text-align: center;
}

/* ========================================
     TEXT STYLES
     ======================================== */
.title_text {
  font-size: 2.8dvw;
  z-index: 2147483647;
  font-weight: 100;
}

.title_text a {
  color: #1e4cad;
}

.title_text a:hover {
  font-weight: 900;
  color: #e4003b;
}

.title_text1 a {
  background: linear-gradient(currentColor 0 0) bottom left/
    var(--underline-width, 0%) 0.1em no-repeat;
  color: #ec1801;
  display: inline-block;
  text-decoration: none;
}

.title_text1 a:hover {
  color: #faa61a;
  --underline-width: 100%;
}

.title_textrah {
  font-family: GBonserrat;
}

.title_text2 {
  font-size: 5dvh;
  font-weight: 900;
  color: #000;
  text-align: center;
  font-family: Eliot Lord;
  cursor: url ("img/background/Pointer.svg"), pointer;
}

.caption_text {
  font-size: 2.8vw;
  z-index: 2147483647;
  font-weight: 100;
}

.caption_text :hover {
  cursor: url ("img/background/Pointer.svg"), pointer;
}

.caption_text1 {
  color: #faa61a;
  font-family: Eliot Lord;
  font-weight: 100;
  text-align: center;
}

.caption_text1 :hover {
  cursor: url ("img/background/Pointer.svg"), pointer;
}

.caption {
  font-size: 2.5dvh;
  font-family: GBonserrat;
  text-align: left;
  padding-left: 40%;
  font-style: italic;
}

.date {
  font-size: 2.5dvh;
  font-family: GBonserrat;
  text-align: center;
  font-style: italic;
}

#currentDate {
  font-size: 28px;
  color: black;
}

#date {
  color: black;
  text-align: center;
  width: 100%;
}

#author {
  font-family: Eliot Headline;
  font-size: 3dvw;
  font-weight: 200;
  z-index: 2147483647;
  width: 13%;
  display: inline-block;
  margin: 0;
  padding: 0;
  color: black;
}

/* ========================================
     JOKE/GAME COMPONENTS
     ======================================== */
.joke {
  font-family: ToryGraph;
  font-size: 40px;
  font-weight: 900;
  margin: 40px;
}

.jokecontainer {
  background-color: rgba(255, 255, 255, 0.95);
  color: rgba(0, 0, 0);
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.9);
  transition: all 300ms ease;
  border-radius: 10px;
  margin: auto;
  width: 75%;
  padding: 20px;
  text-align: center;
  display: flex;
  flex-direction: column;
  min-height: 400px;
}

.jokecontainer .btn {
  margin-top: auto;
  position: relative;
}

.wrapjoke {
  background-image: url(img/background/Laugh.svg);
  background-repeat: repeat;
  min-height: 100vh;
  display: block;
  justify-content: center;
  align-items: center;
  user-select: none;
  -moz-user-select: none;
}

/* ========================================
     GALLERY STYLES
     ======================================== */
#galleries {
  overflow: hidden;
  position: relative;
  columns: 700px auto;
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  flex-wrap: wrap;
  background-color: white;
}

#galleries a {
  color: #faa61a;
  font-family: Eliot Lord;
  font-weight: 100;
}

#galleries a:hover {
  color: #00bed6;
  font-weight: bolder;
  text-decoration: none;
}

#galleries .title_text1 a:hover {
  font-family: Eliot Lord;
  font-size: 3dvh;
  font-weight: 100;
  -webkit-text-fill-color: #00bed6;
}

#gallery1,
#gallery2,
#gallery3,
#gallery4,
#gallery5,
#gallery6,
#gallery7,
#gallery8,
#gallery9,
#gallery10,
#gallery11,
#gallery12,
#gallery13,
#gallery14,
#gallery15,
#gallery16,
#gallery17 {
  max-width: 25%;
  padding: 10px;
  float: left;
  -webkit-user-drag: none;
  user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
}

#gallery16 {
  width: 40%;
}

#everything {
  background-color: white;
  padding: 0;
  text-align: center;
  overflow-x: hidden;
}

#everything:active {
  background-color: white;
  padding: 0;
  text-align: center;
  overflow-x: hidden;
}

.slideshowcontainers {
  position: fixed;
  z-index: 4000000000000000;
  display: none;
  top: 0;
  left: 0;
  background-color: none;
  width: 100%;
  height: 100vh;
  border: none;
}

.slideshow1container,
.slideshow2container,
.slideshow3container,
.slideshow4container,
.slideshow5container,
.slideshow6container,
.slideshow7container,
.slideshow8container,
.slideshow9container,
.slideshow10container,
.slideshow11container,
.slideshow12container,
.slideshow13container,
.slideshow14container,
.slideshow15container,
.slideshow16container,
.slideshow17container {
  padding-top: 100px;
  display: none;
  position: relative;
  margin: 0;
  height: 100%;
  width: 100%;
}

.slideshow1container {
  background-color: #e4003b;
}

.slideshow2container {
  background-color: #0087dc;
}

.slideshow3container {
  background-color: #00bed6;
}

.slideshow4container {
  background-color: #1cabe2;
}

.slideshow5container {
  background-color: #6c3baa;
}

.slideshow6container {
  background-color: #02a95b;
}

.image_slide1,
.image_slide2,
.image_slide3,
.image_slide4,
.image_slide5,
.image_slide6,
.image_slide7,
.image_slide8,
.image_slide9,
.image_slide10,
.image_slide11,
.image_slide12,
.image_slide13,
.image_slide14,
.image_slide15,
.image_slide16,
.image_slide17,
.image_slides {
  height: 100%;
  width: 75%;
  overflow: hidden;
  display: none;
  margin: auto;
  text-align: center;
}

.close_button,
.next_button,
.previous_button {
  position: absolute;
  min-width: 50px;
}

.previous_button {
  top: 50%;
  left: 0;
}

.next_button {
  top: 50%;
  right: 0;
}

.close_button {
  top: 10px;
  right: 10px;
}

.close_button:hover,
.next_button:hover,
.previous_button:hover {
  filter: brightness(80%);
}

/* ========================================
     CV/RESUME STYLES
     ======================================== */
.cv {
  width: 75%;
  margin: auto;
  overflow-x: hidden;
}

.cv-title,
.cv-description {
  float: left;
  width: 50%;
  border-style: solid white;
  background-color: white;
  font-weight: 100;
  font-family: GBonserrat;
}

.cv-title {
  font-size: 4dvw;
  background-image: url(img/background/Underline%20White.svg);
  background-repeat: repeat-x;
  background-size: 100% 20%;
  background-position: bottom;
  font-family: GBonserrat;
}

.cv-title a {
  color: #000;
  font-weight: 100;
  text-decoration: none;
  background-image: url(img/background/Underlineblack.png);
  background-repeat: repeat-x;
  background-size: 110% 30%;
  background-position: bottom;
  font-family: GBonserrat;
}

.cv-title a:hover {
  background-image: url(img/background/Underlineblack.png);
  background-repeat: repeat-x;
  background-size: 110% 30%;
  background-position: bottom;
  text-decoration: none;
  font-family: GBonserrat;
}

.cv p a {
  font-weight: 100;
  color: #c33531;
  font-family: GBonserrat;
}

.cv p a:hover {
  color: #1131a3;
  font-family: GBonserrat;
}

.cv-description p a:hover {
  color: #1131a3;
  font-family: GBonserrat;
}

.cv footer {
  columns: 4;
  font-family: GBonserrat;
}

.cv footer a {
  user-select: none;
  -webkit-user-drag: none;
  float: none;
  display: inline-block;
  font-family: GBonserrat;
}

.cv footer a:hover {
  background-image: url(img/background/Underlineblack.png);
  background-repeat: repeat-x;
  background-size: 110% 30%;
  background-position: bottom;
  font-family: GBonserrat;
}

/* ========================================
     COUNTDOWN COMPONENT
     ======================================== */
.Countdown {
  background-color: white;
  font-family: DS Digital;
  font-size: 50px;
  text-align: center;
}

.foo a {
  font-family: Arial;
  font-weight: 800;
  text-decoration: none;
  padding: 0 20px;
  margin: auto;
  text-align: center;
}

.foo a:hover {
  color: #00bed6;
  cursor: url(img/background/Pointer.svg);
  text-decoration: none;
}

#navo a:hover {
  cursor: url(img/background/Pointer.svg), pointer;
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
}

/* ========================================
     BUTTON STYLES
     ======================================== */
.btn {
  position: fixed;
  font-weight: 100;
  bottom: 17%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: auto;
  background-color: rgba(0, 135, 220, 0.9);
  color: white;
  border-radius: 10px;
  padding: 20px;
  font-size: 30px;
  font-family: ToryGraph;
  font-weight: 500;
  text-align: center;
  text-decoration: none;
  box-shadow: 0 4px 4px rgba(228, 0, 59, 0.9);
}

.btn:hover {
  color: rgba(255, 159, 26);
  font-weight: 900;
  background-color: rgba(0, 135, 220, 0.9);
  box-shadow: 0 4px 4px rgba(228, 0, 59, 0.9);
  transition: all 300ms ease;
  cursor: url(img/background/Pointer.svg), pointer;
}

/* ========================================
     RETRO THEME
     ======================================== */
.Retro {
  padding-left: 20%;
  padding-right: 20%;
}

.Retro h1 {
  color: black;
  font-family: Corpid Regular;
}

.Retro h2 {
  color: white;
  font-weight: 900;
  font-family: Corpid Regular;
  padding-bottom: 2%;
}

.Retro a {
  color: black;
  text-align: center;
}

.Retro a:hover {
  color: #1e4cad;
}

.Retro .columns {
  color: black;
  font-family: Corpid Regular;
  padding-bottom: 10%;
  font-size: 2rem;
  columns: 2;
}

.Retro .columns a {
  font-size: 2rem;
}

.Retro .title_text {
  float: right;
  padding-right: 20%;
  padding-top: 5%;
  font-size: 1.5rem;
  top: 0;
}

.Retro footer a {
  color: white;
  font-family: Corpid;
  font-size: 1.5rem;
  text-decoration: none;
}

.Retro footer a:hover {
  color: white;
  text-decoration: underline;
}

.Retro .active {
  background-color: #f5c342;
}

/* ========================================
     INSTAGRAM THEME (INSPA)
     ======================================== */
.Inspa {
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.Inspa .title_text1 {
  font-family: Insta Sans;
  font-size: 3dvw;
}

.Inspa a:hover {
  font-family: Instagram Sans;
  background-image: url("img/background/Underlinepink.png");
  background-repeat: repeat-x;
  background-size: 100% 20%;
  background-position: bottom;
  font-weight: 900;
  cursor: url("img/background/Pointer.svg"), pointer;
}

.activelinknavinsta {
  background-image: url("img/background/UnderlineBlue.png");
  background-repeat: no-repeat;
  background-size: 100% 20%;
  background-position: bottom;
  font-weight: 900;
  font-family: Helvetica;
  font-size: 3.6dvw;
}

.inspalogo:hover,
.love:hover,
.plane:hover {
  filter: brightness(0.6);
}

/* ========================================
     GUARDIAN THEME (GRAUN)
     ======================================== */
#Graun {
  height: 100%;
  width: 100%;
  bottom: 100%;
  background-color: #062962;
  font-family: Guardian Heavy;
}

#Graun a {
  color: white;
  padding-left: 6%;
  padding-right: 6%;
  text-decoration: none;
}

#Graun a:hover {
  text-decoration: none;
}

#Graun .sass a {
  color: black;
  font-family: Guardian;
}

#Graun .sass a:hover {
  color: #b84f20;
}

#Graun::-moz-selection {
  color: black;
  background: yellow;
}

#Graun::selection {
  user-select: text;
  color: black;
  background: yellow;
}

#Graun header a {
  border-right: 1px solid #ffffff;
  border-bottom: 1px solid #ffffff;
}

#Graun .topfoot a:nth-of-type(1):hover {
  text-decoration: underline;
  text-decoration-color: red;
  text-decoration-thickness: 7px;
}

#Graun .topfoot a:nth-of-type(2):hover {
  text-decoration: underline;
  text-decoration-color: rgb(64, 179, 224);
  text-decoration-thickness: 7px;
}

#Graun .topfoot a:nth-of-type(3):hover {
  text-decoration: underline;
  text-decoration-color: rgb(233, 143, 17);
  text-decoration-thickness: 7px;
}

#Graun .topfoot a:nth-of-type(4):hover {
  text-decoration: underline;
  text-decoration-color: rgb(233, 17, 197);
  text-decoration-thickness: 7px;
}

#Graun .topfoot a:nth-of-type(5):hover {
  text-decoration: underline;
  text-decoration-color: #e5cda5;
  text-decoration-thickness: 7px;
}

#Graun .topfoot a:nth-of-type(6):hover {
  text-decoration: underline;
  text-decoration-color: #f3afd9;
  text-decoration-thickness: 7px;
}

.main a:hover {
  color: #062962;
}

table {
  width: 75%;
  margin: auto;
}

th {
  font-family: Guardian Heavy;
  font-size: 3vw;
}

td {
  font-family: Guardian;
  font-size: 2.5vw;
}

.navbox {
  width: 80%;
  height: 80%;
  border: 10px white;
  font-size: 2.5dvh;
  z-index: 2147483647;
  top: 0;
  right: 0;
  background-color: #062962;
}

.underbox {
  padding-top: 3%;
  background-color: #062962;
  padding-bottom: 2%;
  display: inline-block;
  text-decoration-thickness: 3px;
  border: none;
}

.underbox a {
  border-top: 1px white;
  font-family: Arial;
}

.topfoot {
  border-top: white 3px;
  border-left: white 3px;
  border-right: white 3px;
}

.topfoot a:hover {
  text-decoration: none;
}

.title {
  font-family: Guardian;
  padding-left: 2%;
  color: yellow;
}

/* ========================================
     MISC COMPONENTS
     ======================================== */
.bobois {
  display: block;
  margin-left: 10%;
  margin-right: 10%;
  width: 75%;
  background-color: #f4efeb;
}

#bobois img {
  display: block;
  margin: auto;
}

.elcapitalo {
  columns: 3;
  font-family: Eliot Lord;
  width: 80%;
  margin: auto;
  font-weight: 100;
  padding: 30px;
  color: black;
}

.elcapitalo img {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 50%;
}

#elcapitalfoot {
  margin: 0;
  padding: 0;
  display: inline-block;
}

#elcapitalfoot a {
  font-family: "Times New Roman", Times, serif;
  font-size: 3dvw;
  font-weight: 200;
  z-index: 2147483647;
  width: 13%;
  display: inline-block;
  margin: 0;
  padding: 0;
  height: 100%;
}

#elcapitalfoot a:hover {
  font-family: "Times New Roman", Times, serif;
  font-weight: 900;
  text-decoration: none;
  height: 100%;
  display: inline-block;
}

.centerblockblack {
  width: 100%;
  background-color: black;
}

.centerblockblack h1,
.centerblockblack a {
  color: white;
  text-align: center;
}

.central {
  background-color: white;
}

#timesheader,
.timesheader {
  background-color: white;
}

#timescontent,
.timescontent {
  margin-left: 10%;
  margin-right: 10%;
}

.gridcontainer {
  display: grid;
  color: black;
}

.picturearea {
  border-top-width: thick;
  border-top-color: white;
  border-top: white;
  z-index: 2147483647;
}

.middle {
  padding-top: 0;
  background-color: #fff;
}

.headlogo {
  background-color: #ec1801;
  padding-left: 25%;
}

.headlogo a:hover {
  font-weight: 900;
  background-image: url(img/background/empty.png);
  text-decoration: none;
  background-repeat: repeat-x;
  background-size: 100% 20%;
  background-position: bottom;
}

#roche1 {
  float: right;
  bottom: 100px;
  background-color: #ec1801;
  width: 100%;
}

#Sunny {
  background: #ec1801;
  margin-top: 60px;
  bottom: 0;
  user-select: none;
  -webkit-user-drag: none;
  font-family: The Scum;
  text-decoration: none;
  background-image: url(img/background/Underline%20White.svg);
  background-repeat: repeat-x;
  background-size: 100% 20%;
  background-position: bottom;
  font-weight: 100;
}

#Sunny a,
#Sunny a:hover {
  color: #fff;
  font-weight: 100;
  max-width: fit-content;
  margin-inline: auto;
  margin: auto;
  width: 50%;
  padding: 10px;
  font-family: The Scum;
}

#Hi {
  font-size: 24px;
  width: 75%;
  margin: 0 auto;
}

#Hi a:hover {
  font-size: 22px;
}

#Hola {
  background-color: white;
  width: 60%;
  margin: auto;
}

#Hola #date {
  text-align: right;
}

#Selling {
  width: 60%;
  margin: auto;
}

#Fail {
  width: 60%;
}

#FailPlus {
  float: right;
  right: 0%;
  z-index: 2147483647;
}

#FailPlus a {
  font-family: DM;
  font-size: 10dvh;
  color: black;
}

#peace img {
  top: 100%;
  width: 100px;
  height: 100px;
  position: relative;
  top: 0;
  animation: linear infinite;
  animation-name: run, rotate;
  animation-duration: 3s, 2s;
  overflow-x: hidden;
}

@keyframes run {
  0% {
    left: 0;
  }
  50% {
    left: calc(100% - 100px);
  }
  100% {
    left: 0;
  }
}

@keyframes rotate {
  0% {
    rotate: 0deg;
  }
  50% {
    rotate: 180deg;
  }
  100% {
    rotate: 360deg;
  }
}

.Cov {
  animation: none;
}

.Cov:hover {
  animation: rotation 1s infinite linear;
}

@keyframes rotation {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(359deg);
  }
}

#cross {
  animation: shake 0.5s;
  animation-iteration-count: infinite;
}

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

.emoji {
  display: inline-block;
  font-size: 3rem;
}

.wordtitle {
  font-weight: 900;
  text-decoration: underline;
}

/* ========================================
     SCROLLBAR STYLES
     ======================================== */
.elcapital::-webkit-scrollbar,
.Retro::-webkit-scrollbar,
.Inspa::-webkit-scrollbar,
#Hola::-webkit-scrollbar,
#TimeToGo::-webkit-scrollbar,
.cv::-webkit-scrollbar,
.Mole::-webkit-scrollbar {
  width: 1em;
  overflow: scroll;
}

.elcapital::-webkit-scrollbar-track {
  box-shadow: inset 0 0 6px black;
}

.elcapital::-webkit-scrollbar-thumb {
  background-color: #e4003b;
  width: 1em;
  border-radius: 10px;
}

.Retro::-webkit-scrollbar {
  width: 1em;
}

.Retro::-webkit-scrollbar-track {
  box-shadow: inset 0 0 6px #0000;
}

.Retro::-webkit-scrollbar-thumb {
  background-color: #f5c342;
  outline: 5px solid #0000;
  border-radius: 10px;
}

.Retro::-webkit-scrollbar-thumb:hover,
.cv::-webkit-scrollbar-thumb:hover,
.Inspa::-webkit-scrollbar-thumb:hover,
#Hola::-webkit-scrollbar-thumb:hover {
  cursor: url("img/background/Pointer.svg");
}

.Inspa::-webkit-scrollbar-track {
  box-shadow: inset 0 0 6px #1e4cad;
}

.Inspa::-webkit-scrollbar-thumb {
  background-color: #8134af;
  outline: 1px solid #8134af;
  border-radius: 10px;
}

#Hola::-webkit-scrollbar-track {
  box-shadow: inset 0 0 6px #1e4cad;
}

#Hola::-webkit-scrollbar-thumb {
  background-color: #1e4cad;
  outline: 1px solid #1e4cad;
  border-radius: 10px;
}

#TimeToGo::-webkit-scrollbar {
  background-color: #00bed6;
}

#TimeToGo::-webkit-scrollbar-thumb {
  background-color: #000000;
  outline: #00bed6 solid 1px;
}

.cv::-webkit-scrollbar-thumb {
  background-color: #002a98;
  outline: #002a98 solid 1px;
}

.Mole::-webkit-scrollbar-track {
  box-shadow: inset 0 0 6px #a92323;
}

.Mole::-webkit-scrollbar-thumb {
  background-color: #a92323;
  outline: 1px solid #a92323;
  border-radius: 10px;
}

.Retro::-webkit-scrollbar,
.cv::-webkit-scrollbar,
.Inspa::-webkit-scrollbar {
  width: 10px;
}
/* ========================================
     MISC UTILITIES
     ======================================== */
.radish a:hover {
  background-image: url(img/background/Underlineblack.png);
  background-repeat: repeat-x;
  background-size: 100% 20%;
  background-position: 0px 85%;
}

.wrap a:hover {
  background-image: url(img/background/Underlineblack.png);
  background-repeat: repeat-x;
  background-size: 110% 30%;
  background-position: bottom;
  text-decoration: none;
}

.link :hover {
  background-image: url(img/background/Underline%20White.svg);
  background-repeat: repeat-x;
  background-size: 100% 20%;
  background-position: bottom;
}

.activelinknav,
.activelinkfooter {
  background-image: url(img/background/Underline%20White.svg);
  background-repeat: repeat-x;
  background-size: 100% 20%;
  background-position: bottom;
  font-weight: 900;
}

.activelinkgallery a:hover {
  background-image: url(img/background/Underlineblack.png);
  background-repeat: repeat-x;
  background-size: 100% 20%;
  text-decoration: none;
  font-weight: 100;
  color: #00bed6;
  font-family: Eliot Lord;
}

.refo {
  text-decoration: none;
}

.refo a:hover {
  text-decoration: none;
}

.rhubarb a:hover {
  color: red;
}

.Corgi {
  -webkit-user-drag: none;
  user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
}

.ToryGraph a,
.Joke a,
.Corgi a {
  text-decoration: underline;
}

.ToryGraph a:hover,
.Joke a:hover,
.Corgi a:hover {
  text-decoration: underline;
  background-image: none;
}

.Joke hr,
.Torygraph hr {
  display: block;
  border: 0;
  margin: 1em 0;
  padding: 0;
}

.Joke .navcar {
  color: black;
  font-family: ToryGraph;
}

.navcar a {
  font-family: ToryGraph;
  text-decoration: none;
}

.navcar a:hover {
  text-decoration: underline;
  text-decoration-color: #00908a;
  text-underline-offset: 100%;
  color: black;
  font-weight: 100;
  background-repeat: repeat-x;
}

#Rotygraph a:hover {
  text-decoration: underline;
  text-decoration-color: white;
}

.Mail a:hover {
  color: red;
  text-decoration-color: red;
}

.tom:hover {
  color: #f58529;
}

/* ========================================
     PRODUCT/SHOP STYLES
     ======================================== */
.cart {
  font-size: 1.2rem;
}

.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.5rem;
  padding: 2rem;
}

.product {
  background: white;
  border-radius: 10px;
  padding: 1rem;
  text-align: center;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.product img {
  width: 100%;
  border-radius: 10px;
}

/* ========================================
     GAME FOOTER STYLES
     ======================================== */

.footergames {
  color: #000;
}

/* ========================================
     SOCIAL ICONS
     ======================================== */
.social-icon {
  width: 40px;
  height: 40px;
  min-width: 40px;
  min-height: 40px;
  background-color: #012169;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 20px;
  font-weight: normal;
  transition: background-color 0.2s ease;
  flex-shrink: 0;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  padding: 0;
}

.social-link:hover .social-icon {
  background-color: #1131a3;
}

.fa {
  padding: 0;
  font-size: 30px;
  width: 50px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  text-decoration: none;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  bottom: 100px;
  float: right;
  aspect-ratio: 1 / 1;
  overflow: hidden;
}

.fa:hover {
  opacity: 0.7;
}

.fa-facebook {
  background: #1877f2;
  color: white;
  height: 50px;
  width: 50px;
}

.fa-twitter {
  background: #429bd6;
  color: white;
  height: 50px;
  width: 50px;
}

.fa-instagram {
  background: #ffffff;
  height: 50px;
  width: 50px;
}

.fa-substack {
  background-color: #ffffff;
  height: 50px;
  width: 50px;
}

.fa-mastodon {
  background-color: white;
  height: 50px;
  width: 50px;
}

.socials a:hover {
  text-decoration: none;
  background-image: url(img/background/empty.png);
}
/* ========================================
     PAGE-SPECIFIC STYLES
     ======================================== */
#GB_Blues img {
  width: 20%;
  margin-left: 35%;
  margin-right: 35%;
  overflow-clip-margin: content-box;
  overflow: clip;
}

#FArt {
  font-family: The Scum;
  z-index: 2147483647;
  background-color: #ec1801;
  position: sticky;
  top: 0;
}

#Retro {
  top: 0;
}

#Retro img {
  float: left;
  color: white;
}

#Sigh h4 {
  font-family: Helvetica Condensed;
}

#wrapper {
  columns: 1;
}

#wrapper a {
  color: #1e4cad;
}

#wrapper a:hover {
  color: #bb271a;
}

#rhubarb {
  padding: 0;
  margin: 0;
  min-height: 100%;
}

#roche,
#roche1 {
  padding: 0;
}

.navtot {
  background-color: #00bed6;
}

.active1 {
  background-color: #00bed6;
  font-size: 4dvh;
}

li {
  font-size: 4dvh;
}

nav {
  font-family: Surial;
  text-align: center;
  background-color: #191919;
  padding: 20px 0px 20px;
  font-size: 2dvw;
  position: sticky;
  z-index: 2147483647;
  top: 0;
}

nav a {
  color: white;
  text-decoration: none;
  padding: 20px;
  font-size: 1.4dvw;
  font-family: Arial;
  font-weight: 100;
  margin: auto;
}

nav a:hover {
  text-decoration: none;
  background-repeat: repeat-x;
  background-size: 100% 20%;
  background-position: bottom;
  color: white;
  font-weight: 800;
}

nav ul {
  list-style-type: none;
  display: flex;
  margin: 0;
}

nav ul li {
  font-family: Helvetica;
  padding: 10px 12px;
}

nav ul li a,
nav ul li a:hover {
  color: #fff;
}

.wrapper {
  position: relative;
  height: 40vh;
}

.topper {
  padding: 20px;
}

.links {
  height: 100%;
  width: 100%;
}

.columns {
  color: black;
  font-family: Corpid Regular;
  padding-bottom: 10%;
  font-size: 2rem;
}

.columns a {
  font-size: 2rem;
}

.content,
.content1 {
  padding: 20px;
}

#e a:hover {
  font-weight: 900;
}

/* ========================================
     MEDIA QUERIES
     ======================================== */
@media (max-width: 768px) {
  .caption_text {
    font-size: 26px;
  }

  .title_text,
  .title_text4 {
    font-size: 28px;
  }

  .title_text1 {
    font-weight: 100;
    font-size: 21px;
  }

  .title_text2 {
    font-size: 30px;
  }

  .title_text5 {
    font-size: 24px;
  }

  .column p {
    font-size: 20px;
  }

  .hole {
    height: 50px;
    width: 50px;
    border-radius: 100px;
    background-image: url("img/background/hole.svg");
  }

  .mole {
    background-size: 50px;
    background-image: url("img/background/Tory Mole.svg");
  }

  #wrapper {
    columns: 1;
  }
}

@media all and (max-width: 768px) {
  #galleries {
    width: 500px;
    margin: auto;
  }
}

/* ========================================
     SPECIAL OVERRIDES & LEGACY
     ======================================== */
p #p1 {
  color: black;
  font-family: Eliot Lord;
  font-size: 2dvh;
}

footer p {
  font-size: 3dvh;
}

footer .row {
  float: left;
  clear: both;
  width: 100%;
  border-bottom: #1e4cad;
}

footer .row a {
  width: 50%;
  display: inline-block;
  text-align: center;
  color: #ffffff;
  font-size: 3dvh;
  font-weight: normal;
}

footer .row a span {
  display: inline-block;
}

header img a:hover {
  text-decoration: none;
}

.caption_text a:hover {
  color: #115da8;
}

.column a:hover {
  color: #ffffff;
  text-decoration: underline;
}

#llama,
.responsive .column,
.socialsa {
  background-color: #ec1801;
}

#llama .logo,
hr,
nav ul li a,
nav ul li a:hover {
  color: #fff;
}

.mirrorf a:hover {
  color: white;
}

a[href^="Home"]a {
  color: rgb(255, 120, 2);
}

.contrarynavigationbar a:hover {
  background-image: url(img/background/Underline%20White.svg);
  background-repeat: repeat-x;
  background-size: 100% 20%;
  background-position: bottom;
  font-size: 2.6dvw;
  font-weight: 1000;
  cursor: url(img/background/Pointer.svg);
}

.topnavright {
  top: 100%;
  float: right;
  color: white;
}

.topnavright a {
  -webkit-text-fill-color: white;
}

.topnavright a:hover {
  -webkit-text-fill-color: yellow;
}

.box a {
  padding-right: 2%;
}

.topfoot a:hover {
  text-decoration: none;
}

.topfoot .Mail a:hover {
  color: red;
}

.topfoot h1 a {
  padding-right: 0%;
}

#preheader #date {
  background-color: #ffffff;
  height: 50px;
  float: right;
}

#preheader #date a {
  color: white;
  text-emphasis-color: white;
}

.MailLogo {
  margin-left: 0;
}

.FailPlus {
  margin-right: 0;
}

/* ========================================
     END OF RATIONALIZED CSS
     ======================================== */