/*  * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
    *                                                                                 *
    *  Welcome to the ancient css ruins of my old website, uglyluck.com, circa 02019. *
    *  I decided to revisit these inscriptions and build atop them as I reincorporate *
    *  various relics into my current home. If anything is broken or confusing, blame *
    *  my past selves ;^)                                                             *
    *                                                                                 *
    * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *   */

html {
	display: block;
}

@font-face {
  font-family: "SourceCodeProRegular";
  src: url("./fonts/SourceCodePro-Regular.eot") format("embedded-opentype"), url("./fonts/SourceCodePro-Regular.eot?#iefix") format("embedded-opentype"), url("./fonts/SourceCodePro-Regular.woff") format("woff"), 
  url("./fonts/SourceCodePro-Regular.ttf")  format("truetype");
}

@font-face {
  font-family: "SourceCodeProBold";
  src: url("./fonts/SourceCodePro-Bold.eot") format("embedded-opentype"), url("./fonts/SourceCodePro-Bold.eot?#iefix") format("embedded-opentype"), url("./fonts/SourceCodePro-Bold.woff") format("woff"), 
  url("./fonts/SourceCodePro-Bold.ttf")  format("truetype");
}

@font-face {
  font-family: "SourceCodeProItalics";
  src: url("./fonts/SourceCodePro-It.eot") format("embedded-opentype"), url("./fonts/SourceCodePro-It.eot?#iefix") format("embedded-opentype"), url("./fonts/SourceCodePro-It.woff") format("woff"), 
  url("./fonts/SourceCodePro-It.ttf")  format("truetype");
}

@font-face {
  font-family: "SourceCodeProMedium";
  src: url("./fonts/SourceCodePro-Medium.eot") format("embedded-opentype"), url("./fonts/SourceCodePro-Medium.eot?#iefix") format("embedded-opentype"), url("./fonts/SourceCodePro-Medium.woff") format("woff"), 
  url("./fonts/SourceCodePro-Medium.ttf")  format("truetype");
}

@font-face {
  font-family: "EmojiSymbolsRegular";
  src: url("./fonts/EmojiSymbols-Regular.woff") format("woff");
}

body {
  font-family: 'SourceCodeProRegular', monospace;
  font-size: 14px;
  letter-spacing: 0.1px;
	margin: 0;
  background-color: rgb(225, 219, 219, 0.1);
}

.box {
  width: 320px;
  height: 313px;
  padding: 3 40 0 25;
  text-align: left;
  }
    
.boxbottom {
  width: 458;
  height: 10;
    
}
    
.boxtoc {
  width: 600;
  height: 333;
  padding: 7 35 0 27;
  text-align: left;
  }

.centered {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
}

.compartment1 {
  float: left;
}

.compartment2 {
  float: right;
}
    
.container {
  width: 990px;
  margin: auto;
  padding-top: 30px;
}

#left {
  width: 484px;
  float: left;
  height: 363px;
}
#right {
  width: 484px;
  float: right;
  height: 363px;
}

#footer {
  clear: both;
  width: 990px;
  padding-top: 20px;
}

a {
	text-decoration: none;
	}

a:link, a:active, a:visited {
	color: rgb(51, 42, 23);
	}

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

a.q {
	color: #000;
	text-decoration: none;
	border-bottom: 0;
}

a.q:hover {
	color: rgb(51, 42, 23);
	text-decoration: none;
	border-bottom: 0;
}

.bold {
    font-family: 'SourceCodeProBold', monospace;
}

.dead {
    font-family: 'SourceCodeProRegular', monospace; 
	color: rgb(51, 42, 23, 0.4);
    line-height: 2.2;
}

.dead a {
	color: rgb(51, 42, 23, 0.4);
}

.dusty {
    font-family: 'SourceCodeProRegular', monospace; 
	color: rgb(51, 42, 23, 0.7);
    line-height: 2.2;
}

.dusty a {
	color: rgb(51, 42, 23, 0.7);
}

.i {
    font-family: 'SourceCodeProItalics', monospace; 
    text-align: center;
}


iframe {
    border: dashed;
    border-width: thin;
    overflow: hidden;
    width: 484px;
    height: 363px;
}

.medium {
    font-family: 'SourceCodeProMedium', monospace;
    font-size: 1em;
}

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

  @media only screen
    and (min-device-width : 300px)
    and (max-device-width : 480px){ 
      .mobile {display: inline;}
      body {font-size: 2em;}
      img { width: 100%}
  }
  
.unfriendly { display: inline; }

  @media only screen
    and (min-device-width : 320px)
    and (max-device-width : 480px){
     .unfriendly { display: none;}
  }

.note {
    font-family: 'SourceCodeProRegular', monospace; 
	color: rgb(51, 42, 23, 0.5);
    line-height: 1.5;
}

.off {
    font-family: 'SourceCodeProRegular', monospace; 
	color: rgb(51, 42, 23, 0.5);
    line-height: 2.2;
}

.off a {
	color: rgb(51, 42, 23, 0.6);
}

.link-in-profile {
    line-height: 0;
}

a.link-in-profile {
    color: rgb(51, 42, 23, 0.8);
}

.links {
    font-family: 'SourceCodeProMedium', monospace;
    font-weight: 500;
    line-height: 1.7;
}

p {
    font-family: 'SourceCodeProRegular', monospace;
    font-size: 1em;
}

sup {
    font-size: .7em;
}

.list {
    font-family: 'SourceCodeProRegular', monospace;
    font-size: 1em;
    line-height: 1.8;
}

.unicode {
    font-family: 'EmojiSymbolsRegular';
    font-size: 1.188em;
}

.writing {
	display: inline-block;
	font-size: 0.938em;
  letter-spacing: 0.43px;
	font-family: 'SourceCodeProRegular', monospace;
	font-style: normal;
	font-weight: 400;
	color: rgb(15,15,15);
	color: rgba(15, 15, 15, 1);
	 text-align: left;
}

.writing-plain {
  line-height: 1.5;
}