/*
Just as with HTML, I've never learned CSS formally, and am no doubt violating lots of 
standards and design principles in the styles below. But that's okay! I think that 
messiness, mistakes, and inefficiency are important parts of creativity and life in general. 
In my view, the push toward hyperefficiency and 'seamless' design are too mechanical and 
end up feeling very cold to me. Anyway, I've had some fun here and hope you get a chuckle 
or two out of some of my decisions (or transgressions) ;^P

p.s. Here's a great web zine about CSS: https://curly-braces.neocities.org/
*/

body {
    image: pretty-positive;
    background-color: #E1DBDB4C;
    background-color: rgb(225, 219, 219, 0.3);
    color: #000;
    font-family: Palatino, "Palatino Linotype", "Book Antiqua", Georgia, serif;
    font-size: 1.2em;
    -webkit-font-smoothing: antialiased; /* https://szafranek.net/blog/2009/02/22/font-smoothing-explained/ */
    -moz-osx-font-smoothing: grayscale;
    -webkit-text-size-adjust: auto;
    text-size-adjust: auto;
    -webkit-padding-start: 16px;
    -webkit-padding-end: 16px;
    -moz-padding-start: 16px;
    -moz-padding-end: 16px;
    margin: 40px auto;
}

.screen {
    material: liquid-crystals;
    width: 100%;
    text-align: center;
}

.definition {
    veracity: questionable;
    margin-left: 6%;
    color: #36251a;
}

.sean {
    species: human;
    hair-color: black, brown, blonde, white;
    age: old-soul;
    star-sign: Cetus /* (o,\__Y */ ;
    margin: auto;
    width: 80vw;
    max-width: 22em;
    text-align: center;
    padding-top: 20px;
}

.krow {
    species: crow;
    plumage: iridescent black;
    border-bottom: 0;
}
  
.skin {
    color: fallow?;
    texture: fairly-smooth;
    align-items: center;
    justify-content: center;
}

.flesh {
    feeling: squishy;
    padding-top: 5%;
    display: flex;
    margin: auto;
}

.bones {
    quantity: 200+;
    width: 29.813em;
    max-width: 586px;
    float: left;
    margin: auto;
}

.soul {
    good-or-evil: both, neither;
    text-align: center; 
}

figure {
    margin: 0px;
}

.sciian { 
    font-size: 1.1em; 
}

.falevavau {
    color: indescribable;
    style: impossible;
    size: inconceivable;
    border-bottom: 0;
}

a {
    color: #333;
    text-decoration: none;
    border-bottom: 1px dashed #ddd;
}

a:hover {
    color: black;
    color: rgb(0, 0, 0);
}

a.scii { 
    color: black;
    border-bottom: 1px dashed #ddd;
}

a.word {
    color: black;
    cursor: help;
    border-bottom: none;
}

p {
    line-height: 1.5;
}

h1 {
    font-size: 1.4em;
    text-align: center;
    padding-bottom: 10px;
}

.sygil {
    magical-properties: many;
    text-align:center;
    padding: 2%;
}

img {
    text-align: center;
    max-width: 100%;
    word-equivalent: 1000;
}

.caption {
    font-size: .9em;
    font-style: italic;
    line-height: 1.4;
    padding: 0% 0 3% 0;
    color: #333;
}

#profile {
    text-align: justify;
    why: self-validation;
}
  
details {
    width: 100%;
    volume: too-many;
}
  
summary {
    line-height: 1.8;
    text-align: center;
    text-indent: -2%;
    font-style: italic;
    font-size: 1em;
    list-style-image: url(island.svg);
}

summary::-webkit-details-marker {
  background: url(island.svg);
  color: transparent;
}

summary:hover {
    cursor: pointer;
}

pre {
    text-align: center;
    padding: 1% 0 1% 0;
}

.work {
    occupation: unprofessional;
    text-align: center;
    padding-top: 3%;
}

.description {
    padding: 5px;
}

.oxygen {
    outcome: life;
    padding: 2%;
}

#orbit {
    supercluster: Laniakea;
    galaxy: Milky Way;
    arm: Orion-Cygnus;
    interstellar-medium: Local Bubble;
    interstellar-cloud: Local Fluff;
    text-align: center;
    font-size: 1.1em;
}

.gsts:hover {
    color: #e97c43;
}

.celestial {
    manifestation: * *;
    height: 12px;
}

.sky {
    display: inline-block;
    word-spacing: 5px;
    color: peachpuff;
    composition: n2, o2, ar, co2, etc;
}

.desert:hover {
    color: #d54551;
}

.soil {
    substance: solid, liquid, gas;
    margin-bottom: 7%;
}

.dolmen:hover {
    color: #567776;
}

.lino:hover {
    color: #cc9963;
}

.piebasket:hover {
    color: #b17656;
}

.asciimation:hover {
    color: palegreen;
}

.leao:hover {
    color: #584e37;
}

.timeleap {
    mentor: Makoto Konno;
    text-align: center;
    font-size: .9em;
    padding: 2%;
}

a.life, a.death, a.portal {
    destination: unknown;
    border-bottom: 0;
}

.sphere {
    relevance: childhood-nostalgia;
    color: #536872;
    font-size: .9em;
    font-style: italic;
}

svg:hover {
    fill: red;
}

.rays {
    color: peachpuff;
    border-bottom: 0;
}

.rays:hover {
    color: #d35c5c;
}

.zach {
    relationship: scuttlefriend, smcc;
    border-bottom: 0;
    color: darkorange;
}

.zach:hover {
    color: rgb(115, 145, 200);
}

.mao {
    relationship: dear-old-friend;
    border-bottom: 0;
    color: palevioletred;
}

.mao:hover {
    color: crimson;
    filter: invert(27%) sepia(51%) saturate(2878%) hue-rotate(346deg) brightness(104%) contrast(97%);
}

.glyph {
    relationship: scuttlefriend;
    border-bottom: 0;
    font-size: .75em;
    color: rgb(255,99,0);
}

.glyph:hover {
    color: brown;
    filter: invert(27%) sepia(61%) saturate(2878%) hue-rotate(346deg) brightness(104%) contrast(97%);
}

.cora {
    relationship: dear-old-friend;
    border-bottom: 0;
    font-size: .9em;
    color: #72953d;
}

.cora:hover {
    color: rgba(205, 39, 37, 0.85);
    filter: invert(87%) sepia(51%) saturate(2878%) hue-rotate(6deg) brightness(94%) contrast(97%);
}

.kiki {
    relationship: japan-friend;
    border-bottom: 0;
    font-size: 1.2em;
    color: #879600;
}

.kiki:hover {
    color: #d7c3a2;
    filter: invert(57%) sepia(71%) saturate(1878%) hue-rotate(106deg) brightness(54%) contrast(97%);
}

.sun {
    relationship: partner, smcc;
    color: darkorange;
    border-bottom: 0;
}

.sun:hover {
    color: orange;
    filter: invert(67%) sepia(41%) saturate(1878%) hue-rotate(140deg) brightness(84%) contrast(97%);
}

.earth {
    relationship: scuttlefriend;
    border-bottom: 0;
    font-size: .7em;
    color: #999;
}

.earth:hover {
    color: black;
    filter: brightness(0%);
}

.moon {
    relationship: scuttlefriend;
    width: 1em;
    border-bottom: 0;
    color: rgb(28, 112, 108);
}

.moon:hover {
    color: gray;
    filter: saturate(20%) brightness(120%) contrast(10%);
}

.neptune {
    relationship: neocities-friend;
    border-bottom: 0;
    color: rgb(157, 129, 137);
    font-size: .9em;
    line-height: 1.4;
}

.neptune:hover {
    color: rgb(244, 174, 185);
    filter: invert(27%) sepia(71%) saturate(578%) hue-rotate(316deg) brightness(84%) contrast(77%);
}

.snufkin {
    relationship: neocities-friend, scuttlefriend;
    border-bottom: 0;
    color: #b8c1ec;
}

.snufkin:hover {
    color: #9566a1;
    filter: invert(27%) sepia(51%) saturate(1878%) hue-rotate(266deg) brightness(64%) contrast(97%);
}

.teagan {
    relationship: penpal;
    border-bottom: 0;
    filter: brightness(0) saturate(100%) invert(69%) sepia(0%) saturate(2460%) hue-rotate(246deg) brightness(92%) contrast(105%);
}

.teagan:hover {
    relationship: penpal;
    border-bottom: 0;
    filter: brightness(0) saturate(100%) invert(34%) sepia(7%) saturate(664%) hue-rotate(337deg) brightness(90%) contrast(92%);
}

.angelica {
    relationship: scuttlefriend, smcc;
    border-bottom: 0;
    color: darkorange;
}

.angelica:hover {
    color: rgb(0, 100, 0);
}

.alia {
    type: drua;
    text-align: center;
    font-size: 1.2em;
    padding: 5%;
    color: #332A17CC;
    color: rgb(51, 42, 23, 0.8);
}

.bird {
    dinosaur-clade: theropods;
    display: inline-block;
    text-align: center;
    font-size: .5em;
    text-indent: 50px;
}

.gull {
    species: glaucous-winged;
    border-bottom: 0;
}

.scuttlebutt:hover {
    color: #865b4a;
}

.mirage {
    cause: refraction;
    border-bottom: none;
    color: inherit;
}

.mirage:hover {
    type: fata-morgana;
    border-bottom: none;
    color: seagreen;
}

.waves {
    type: wind-driven;
    color: cadetblue;
}

.sea {
    temperament: variable;
    padding: 10%;
    text-align: center;
}

.hermies {
    role: mascot;
    width: auto ;
}

.warp {
    mechanism: unknown;
    text-align: center;
    font-size: .9em;
    color: cadetblue;
    padding: 2%;
}

.chain {
    purpose: misdirection;
    color: #444;
}

.MAS:hover {
    color: #189e48;
}

.VicBC:hover {
    color: #c8631a;
}

.hummer:hover {
    color: #4e6306;
}

.gsts:hover {
    color: #e97c42;
}

.cal:hover {
    color: #0f85d0;
}

.SAP:hover {
    color: #189e48;
}

.arena:hover {
    color: #696969;
}

.sumday:hover {
    color: #0000EE;
}

.fish:hover {
    color: #ff3d00;
}

/*
I've always resisted making a 'mobile-friendly' website because I find it overly restrictive and tedious, 
but have finally given in - at least with this site. The styles below are my crude attempt at making this 
site look minimally chaotic on smaller screens. A work in progress to say the least...
*/

.mobile { display: none; width: 375px;}

  @media only screen
    and (min-device-width : 360px)
    and (max-device-width : 800px){ 
      body { padding: 20px; overflow-wrap: break-word; word-wrap: break-word;}
      img { max-width: 100% }
      .ascii { font-size: 2vw; }
      .sean { order:1; position: relative; padding-bottom: 10px; width: 80vw; }
      .flesh { justify-content: center; flex-wrap: wrap;}
      .bones { order:2; position: relative; word-break: break-word; padding-left: 0; }
      .soul { margin: auto; }
      .sygil { padding-bottom: 30px; }
      .work { max-width: 100%; }
      .caption { font-size: 3vw; }
      .timeleap { font-size: 4vw; }
      #orbit { padding-top: 3%; font-size: .9em; }
      .sphere { font-size: .9em; }
      .alia { font-size: 5vw; }
      .warp { font-size: 3vw; }
  }
  
  @media only screen
    and (min-device-width : 300px)
    and (max-device-width : 350px){ 
      body { padding: 30px; overflow-wrap: break-word; word-wrap: break-word;}
      img { max-width: 100% }
      .ascii { font-size: 2vw; }
      .sean { order:1; position: relative; padding-bottom: 10px; width: 80vw; }
      .flesh { justify-content: center; flex-wrap: wrap;}
      .bones { order:2; position: relative; word-break: break-word; padding-left: 0; }
      .soul { margin: auto; font-size: 1.2em; }
      .sygil { padding-bottom: 30px; }
      .work { max-width: 100%; }
      .caption { font-size: 3vw; }
      #orbit { padding-top: 3%; font-size: .9em; }
      .sphere { text-align: center; }
      .sky { word-spacing: 0px; }
      .alia { font-size: 5vw; }
      .warp { font-size: .6em; }
  }