@charset "UTF-8";

/* =============== Profile wide styling =============== */
/* Border box override - makes the maths for layouts simpler. */
html {
  box-sizing:border-box;
}

*,:before,:after {
  box-sizing:inherit;
}

/* TODO: does MFC already implement this? */
/* =============== Importing Fonts =============== */
/* MFC will not allow  in the CSS (probably because it's not at the start of the file they create) ... */
/* ... so manually importing these - but they might break in the future given the versions in the URLs. */
/* Fonts apparently imported for the last profile were:
 *   Dynalight - https://fonts.google.com/specimen/Dynalight
 *   Dancing   - https://fonts.google.com/specimen/Dancing+Script
 *   Pacifico  - https://fonts.google.com/specimen/Pacifico
 *   Niconne   - https://fonts.google.com/specimen/Niconne
 */
/* vietnamese */
@font-face {
  font-family:'Dancing Script';
  font-style:normal;
  font-weight:400;
  src:local('Dancing Script Regular'),local(DancingScript-Regular),url(https://fonts.gstatic.com/s/dancingscript/v9/DK0eTGXiZjN6yA8zAEyM2fRMc6C39aem-aUPzsV2c2w.woff2) format("woff2");
  unicode-range:U+0102-0103,U+0110-0111,U+1EA0-1EF9,U+20AB;
}

/* latin-ext */
@font-face {
  font-family:'Dancing Script';
  font-style:normal;
  font-weight:400;
  src:local('Dancing Script Regular'),local(DancingScript-Regular),url(https://fonts.gstatic.com/s/dancingscript/v9/DK0eTGXiZjN6yA8zAEyM2e87R-l0-Xx_7cYc0ZX1ifE.woff2) format("woff2");
  unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+20A0-20AB,U+20AD-20CF,U+2C60-2C7F,U+A720-A7FF;
}

/* latin */
@font-face {
  font-family:'Dancing Script';
  font-style:normal;
  font-weight:400;
  src:local('Dancing Script Regular'),local(DancingScript-Regular),url(https://fonts.gstatic.com/s/dancingscript/v9/DK0eTGXiZjN6yA8zAEyM2Ud0sm1ffa_JvZxsF_BEwQk.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2212,U+2215;
}

/* =============== Override MFC styling =============== */
body,.profile_section_content {
  padding:0;
  margin:0;
  color:#660066;
  font-family:'Dancing Script',cursive;
}

.container {
  display:block;
  margin:0;
  position:relative;
  width:100%;
}

/* =============== Main layout =============== */
/* TODO: add responsive alternatives via media selectors. */
/* Top left navbar. Will move to top on mobile.*/
#navbar {
  position:fixed;
  top:10px;
  top:-webkit-calc(50% - 315px);
  top:calc(50% - 315px);
  left:10px;
}

/* Main content area, full right side of the page. */
#page-content {
  position:absolute;
  top:0;
  left:220px;
  right:10px;
  text-align:center;
  z-index:-1;
}

/* Align images centrally in the content, while also ensuring each is on it's own line without br tags. */
/* Class .img-row allows a block element (div) to override this and have multiple images on the same line. */
#page-content img,#page-content .img-row {
  display:block;
  margin:auto;
  max-width:100%;
}

#page-content .img-row img {
  display:inline;
  margin:0;
  max-width:100%;
}

/* =============== iFrame embedding =============== */
.fluidFrame {
  position:relative;
  padding-bottom:56.25%;
/* proportion value to aspect ratio 16:9 (9 / 16 = 0.5625 or 56.25%) */
  padding-top:30px;
  height:0;
  overflow:hidden;
}

/* Only (currently) used for embedding MFC share. */
.fluidFrame iframe {
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
}

/* =============== Layout within the page =============== */
/* See also h1 element below */
h1 {
  font-size:36pt;
  margin-bottom:0;
}

.leafvine {
  padding-bottom:20px;
}

.separator {
  padding-top:25px;
  padding-bottom:25px;
}

/* =============== Navbar links and popup submenus =============== */
.nav-button {
  background:rgba(128,0,128,0);
  color:#660066;
  font-size:18px;
  font-weight:bold;
  text-decoration:none;
/* Remove default link styling. */
  min-width:190px;
/* Change to min-width and buttons will scale to match image width. */
  padding:8px;
  margin-bottom:2px;
  border:#660066 dashed 1px;
  border-radius:10px;
  transition:background .5s ease,color .5s ease,opacity .5s ease;
}

div.nav-button {
  cursor:defaul;
}

/* Change the display of the button when hovered or when hovering over the submenu. */
.nav-button:hover,.nav-submenu:hover .nav-button {
  background:#660066;
  color:white;
  opacity:.6;
}

.nav-submenu-content {
  background:white;
  min-width:149px;
/* Allows 3 horizontal images at 25x25px */
  border:#660066 solid 1px;
  border-radius:10px;
  text-decoration:none;
  z-index:10;
}

/* Links inside the submenu */
.nav-submenu-content a {
  color:#660066;
  padding:6px 12px;
  border-radius:10px;
  font-size:12pt;
  text-decoration:none;
  transition:background .5s ease,color .5s ease,opacity .5s ease;
}

.nav-submenu-content a:hover {
  background:#660066;
  color:white;
  opacity:.6;
}

/* Text lines inside the submenu */
.nav-submenu-content p {
  color:#660066;
  font-family:serif;
  font-size:10pt;
  padding:0 12px;
  margin:0 0 12px;
  border-radius:10px;
  cursor:default;
}

/* Images in the submenu */
.submenu-image {
  border-radius:50%;
  height:auto;
  width:auto;
  max-height:25px;
  max-width:25px;
}

/* ---------- Submenu mechanics ---------- */
/* These are the parts that make the submenu work (and not appear weird). */
/* Lists used for all the links in navbar. */
#navbar ul {
  list-style:none;
  position:relative;
  float:left;
  margin:0;
  padding:0;
}

#navbar ul a {
  display:block;
}

/* Addition*/
#navbar ul a.inline {
  display:block;
  float:left;
  clear:none;
}

#navbar ul li {
  position:relative;
  float:left;
  margin:0;
  padding:0;
}

#navbar ul ul {
  display:block;
  position:absolute;
  top:100%;
  left:0;
  padding:0;
}

#navbar ul ul li {
  float:none;
}

#navbar ul ul ul {
  display:none;
  top:0;
  left:100%;
}

#navbar ul li:hover > ul {
  display:block;
}

/* =============== Images and manipulations =============== */
/* Add background image to the page as a whole. */
/* Doing it this way (as opposed to just adding the background image to the body) allows use of opacity to fade it. */
/* (Also should note there other ways to obtain an equivalent effect.) */
body:after {
  content:'';
  display:block;
  position:fixed;
  left:0;
  top:0;
  width:100%;
  height:100%;
  z-index:-50;
  opacity:.5;
  background-image:url(https://i.postimg.cc/hcMvn7fX/pampas-ornamental-grass-natural-close-up-1.jpg);
  background-size:cover;
}

/* Used to shrink the larger terarrium image (on the clubs and main pages). */
/* Also used for the gifs at the bottom of each page. */
/* TODO: needs to change size at responsive breakpoints. */
.square150 {
  height:auto;
  width:auto;
  max-width:150px;
  max-height:150px;
}

/* Used for the image in the navbar. */
.square200 {
  height:auto;
  width:auto;
  max-width:200px;
  max-height:200px;
}

/* =============== Scrollbar changes =============== */
/* TODO: is there a way to get background to extend behind the scrollbar? */
/* TODO: if not, can we get a better colour for the top/bottom and track? */
::-webkit-scrollbar {
  width:8px;
}

::-webkit-scrollbar-track {
  background:white;
  border-radius:4px;
  margin:10px 0;
}

::-webkit-scrollbar-thumb {
  background:rgba(102,0,102,.75);
  border-radius:4px;
}

::-webkit-scrollbar-thumb:hover {
  background:rgba(102,0,102,.5);
}

/* =============== Pages implementation =============== */
/* Since we don't need to worry about the MFC galleries or other existing elements, we can use simple version. */
/* All pages start hidden, except the default page, which must also be the last page. */
/* If an element (div usually) with page class is a target (# links) that page should be displayed. */
/* When a page class is the target, any --separate-- element with the page-default class that comes later in the ... */
/* ... page will hidden. (Hence why the default must be last, so when it is selected it doesn't get hidden.) */
.page,.page:target ~ .page-default {
  display:none;
}

.page-default,.page:target {
  display:block;
  animation:fade-in .5s ease-in-out;
}

/* ######################### */
/* Delete this section when removing the galleries again. */
#profile_password_photo_galleries,#profile_photo_galleries,.photo_gallery {
  left:220px;
  text-align:center;
  z-index:-5;
  float:right;
  width:calc(100% - 230px);
  display:none;
}

#profile:target #profile_password_photo_galleries,#profile:target #profile_photo_galleries {
  display:block;
  animation:fade-in .5s ease-in-out;
}

#profile:target .page {
  display:none;
}

/* ######################### */
/* Manual animation, because changing from display none to block doesn't work with transition. */
/* Currently used specifically for the appearance of the new page. */
@keyframes fade-in {
  0% {
    display:none;
    opacity:0;
  }

  1% {
    display:block;
    opacity:0;
  }

  100% {
    opacity:1;
  }
}

/* =============== Fixing minor details =============== */
/* H1 tags are used at the top of each page section. Removing the margin prevents the page jumping or
/* scrolling if the page is scrolled to the top and the link for the same page is clicked. */
h1 {
  margin-top:0;
/* 10px padding puts this in line with the top of the navbar. */
/* Might need to add similar padding to the Highest Tip image if enabling this? */
/* TODO: was based upon previous font, does new font still need padding? (might be whitespace at the top?) */
/*padding-top: 10px;*/
}

/* The images at the top of each page don't have consistent gaps - only relevant when there isn't a H1 element. */
/* TODO: add padding and/or margins to the top of each of the first images as appropriate. */
/* TODO: double check this doesn't need modification for responsive pages. */
#highest.page > img:first-child {
}

#share.page > img:first-child {
}

#main.page > img:first-child {
}

/* =============== Hide unused MFC page elements =============== */
/* General page elements */
#fixed_background,#header_bar,#footer_bar,#profile_header,#profile_about_me .heading,.profile_section_background,/* Profile elements in same section as about me */
#username_container,#cam_score_container,#gender_container,#body_type_container,#ethnicity_container,#hair_container,#eyes_container,#weight_container,#height_container,#age_container,#city_container,#country_container,#sexual_preference_container,#smoke_container,#drink_container,#drugs_container,#marital_status_container,#occupation_container,#school_container,#favorite_food_container,#pets_container,#automobile_container,#about_me_label,#tags_container,/* Profile elements after about me */
#profile_friends,/* #profile_password_photo_galleries,*/
/* #profile_photo_galleries,*/
#profile_interests_content,#profile_schedule {
  display:none;
}

/* Start https://www.cursors-4u.com */
* {
  cursor:url(https://cur.cursors-4u.net/games/gam-10/gam952.ani),url(https://cur.cursors-4u.net/games/gam-10/gam952.png),auto!important;
}

/* End https://www.cursors-4u.com */