/* queer.archive.work */ * { -moz-hyphens:none; -ms-hyphens:none; -webkit-hyphens: none; hyphens:none; } #site { overflow-x: hidden; } @font-face { font-family: "Arial Narrow"; src: local("Arial Narrow"); src: local("ArialNarrow"); src: local("Arial-Narrow"); src: url("/build/font/ArialNarrow.woff2") format("woff2"); src: url("/build/font/ArialNarrow.woff") format("woff"); src: url("/build/font/ArialNarrow.ttf") format("truetype"); font-weight: normal; font-style: normal; } html, body{ margin: auto; font-size: 15px; font-family: "Arial Narrow", ArialNarrow, Arial, sans-serif; max-width: 1350px; padding: 2vw; } .button { border: none; color: white; padding: 4vw; padding-left: 12vw; padding-right: 12vw; text-align: center; text-decoration: none; display: inline-block; font-family: "Arial Narrow", ArialNarrow, Arial, sans-serif; font-size: 3vw; margin: 4px 2px; transition-duration: 0.4s; cursor: pointer; } .button1 { background-color: white; color: hotpink; border: 4px solid hotpink; } .button1:hover { background-color: black; text-decoration: none; color: white; border: 4px solid black; } .row { display: -ms-flexbox; /* IE10 */ display: flex; -ms-flex-wrap: wrap; /* IE10 */ flex-wrap: wrap; padding: 0; } /* Create a 1:2 column structure; */ .column40 { -ms-flex: 40%; /* IE10 */ flex: 40%; max-width: 100%; padding: 0; } .column40 img { margin-top: 0; vertical-align: middle; width: 100%; } .column60 { -ms-flex: 60%; /* IE10 */ flex: 60%; max-width: 100%; padding: 0; } /* Responsive layout - makes the two UNEVEN columns stack on top of each other instead of next to each other */ @media screen and (max-width: 800px) { .column40 { -ms-flex: auto%; flex: auto; max-width: auto; margin: none; padding: none; } } @media screen and (max-width: 800px) { .column60 { -ms-flex: auto%; flex: auto; max-width: auto; margin: none; padding: none; } } /* Create two equal columns */ .column { flex: 45%; padding-right: 30px; } .column img { margin-top: 0; vertical-align: middle; width: 100%; } /* Clear floats after the columns */ .row:after { content: ""; display: table; clear: both; } /* Create three equal columns that float next to each other */ .column3 { -ms-flex: 33%; /* IE10 */ flex: 33%; max-width: 100%; padding: 0; } .column3 img { margin-top: 0; vertical-align: middle; width: 100%; } /* Create five equal columns that sits next to each other */ .column5 { -ms-flex: 20%; /* IE10 */ flex: 20%; max-width: 100%; padding: 0; } .column5 img { margin-top: 0; vertical-align: middle; width: 100%; } /* Create four equal columns that sits next to each other */ .column4 { -ms-flex: 25%; /* IE10 */ flex: 25%; max-width: 100%; padding: 0; } .column4 img { margin-top: 0; vertical-align: middle; width: 100%; } /* Create two equal columns that float next to each other */ .column2 { -ms-flex: 50%; /* IE10 */ flex: 50%; max-width: 100%; padding: 0; } /* Clear floats after the columns */ .row:after { content: ""; display: table; clear: both; } .column2 img { margin-top: 0; vertical-align: middle; width: 100%; } /* Responsive layout - makes a two column-layout instead of four columns */ @media screen and (max-width: 1000px) { .column4 { -ms-flex: 50%; flex: 50%; max-width: 50%; } /* Responsive layout - makes a two column-layout instead of five columns */ @media screen and (max-width: 1000px) { .column5 { -ms-flex: 50%; flex: 50%; max-width: 50%; } } } /* Responsive layout - makes the two columns stack on top of each other instead of next to each other */ @media screen and (max-width: 800px) { .column4 { -ms-flex: auto%; flex: auto; max-width: auto; margin: none; padding: none; } } @media screen and (max-width: 800px) { .column2 { -ms-flex: auto%; flex: auto; max-width: auto; margin: none; padding: none; } } /* Responsive layout - makes the three columns stack on top of each other instead of next to each other */ @media screen and (max-width: 600px) { .column3 { width: 100%; } .column3 img { width: 100%; } .column2 img { width: 100%; } } @media screen and (max-width: 900px) { .column3 { width: 100%; } } @media screen and (max-width: 900px) { .column3 img { width: 100%; padding-top: none; padding-bottom: none; } } a{ color: black; text-decoration: none; } a[href$=jpg] { background-color: none; text-decoration: none; border: 0 none; } a[href$=gif] { background-color: none; text-decoration: none; border: 0 none; } a:link { color: black; text-decoration: underline; } a:visited { color: black; text-decoration: underline; } a:hover { background-color: none; color: fuchsia; } a.none {color: none; text-decoration: none;} a.none:link {background-color: none; color: none; text-decoration: none;} a.none:hover {background-color: none; color: none; text-decoration: none;} a.white {color: black; text-decoration: underline;} a.white:link {background-color: white; color: black; text-decoration: underline;} a.white:hover {background-color: black; color: white; text-decoration: underline;} a.pink {color: black; text-decoration: underline;} a.pink:link {background-color: #FF1493; color: black; text-decoration: underline;} a.pink:hover {background-color: black; color: #FF1493; text-decoration: underline;} a.gold {color: black; text-decoration: underline;} a.gold:link {background-color: goldenrod; color: black; text-decoration: underline;} a.gold:hover {background-color: black; color: goldenrod; text-decoration: underline;} a.purp {color: black; text-decoration: underline;} a.purp:link {background-color: blueviolet; color: black; text-decoration: underline;} a.purp:hover {background-color: black; color: blueviolet; text-decoration: underline;} a.purp2 {color: #8000ff; text-decoration: underline;} a.purp2:link {background-color: black; color: #8000ff; text-decoration: underline;} a.purp2:hover {background-color: #8000ff; color: black; text-decoration: underline;} a.red {color: black; text-decoration: underline;} a.red:link {background-color: #ff3300; color: black; text-decoration: underline;} a.red:hover {background-color: black; color: #ff3300; text-decoration: underline;} a.red2 {color: black; text-decoration: underline;} a.red2:link {background-color: red; color: black; text-decoration: underline;} a.red2:hover {background-color: black; color: red; text-decoration: underline;} a.red3 {color: red; text-decoration: underline;} a.red3:link {background-color: none; color: red; text-decoration: underline;} a.red3:hover {background-color: red; color: black; text-decoration: underline;} a.darkred {color: darkred; text-decoration: underline;} a.darkred:link {background-color: none; color: darkred; text-decoration: underline;} a.darkred:hover {background-color: darkred; color: aqua; text-decoration: underline;} a.plum {color: black; text-decoration: underline;} a.plum:link {background-color: plum; color: black; text-decoration: underline;} a.plum:hover {background-color: black; color: plum; text-decoration: underline;} a.black {color: blueviolet; text-decoration: underline;} a.black:link {background-color: black; color: blueviolet; text-decoration: underline;} a.black:hover {background-color: blueviolet; color: black; text-decoration: underline;} a.black2 {color: white; text-decoration: underline;} a.black2:link {background-color: black; color: white; text-decoration: underline;} a.black2:hover {background-color: white; color: black; text-decoration: underline;} a.blue {color: black; text-decoration: underline;} a.blue:link {background-color: deepskyblue; color: black; text-decoration: underline;} a.blue:hover {background-color: black; color: deepskyblue; text-decoration: underline;} a.brown {color: black; text-decoration: underline;} a.brown:link {background-color: rosybrown; color: black; text-decoration: underline;} a.brown:hover {background-color: black; color: rosybrown; text-decoration: underline;} a.yellow {color: yellow; text-decoration: underline;} a.yellow:link {background-color: black; color: black; text-decoration: underline;} a.yellow:hover {background-color: yellow; color: black; text-decoration: underline;} SPAN.li {display: list-item; margin-left: 1em; margin-right: 3rem} .profile { margin: auto; padding-right: 1rem; border: 0px dashed #000000; -moz-hyphens:none; -ms-hyphens:none; -webkit-hyphens: none; hyphens:none; } .textblock { margin: auto; padding:2rem; border: 2px dotted black; -moz-hyphens:none; -ms-hyphens:none; -webkit-hyphens: none; hyphens:none; } .textblock2 { border: 0px; margin: auto; padding: 1.5rem; -moz-hyphens:none; -ms-hyphens:none; -webkit-hyphens: none; hyphens:none; } .colorblock { border: 0px; padding: 1.5rem; background-color: #ff3300; -moz-hyphens:none; -ms-hyphens:none; -webkit-hyphens: none; hyphens:none; } .colorblock2 { margin: auto; border: 0px; padding: 1rem; background-color: #000000; -moz-hyphens:none; -ms-hyphens:none; -webkit-hyphens: none; hyphens:none; } .colorblock3 { border: 0px; padding: 1rem; background-color: goldenrod; -moz-hyphens:none; -ms-hyphens:none; -webkit-hyphens: none; hyphens:none; } .colorblock4 { border: 0px; padding: 1rem; background-color: rosybrown; -moz-hyphens:none; -ms-hyphens:none; -webkit-hyphens: none; hyphens:none; } .colorblock5 { border: 0px; padding: 1rem; background-color: maroon; -moz-hyphens:none; -ms-hyphens:none; -webkit-hyphens: none; hyphens:none; } .colorblock6 { border: 0px; padding: 1rem; background-color: deepskyblue; -moz-hyphens:none; -ms-hyphens:none; -webkit-hyphens: none; hyphens:none; } .colorblockpink { border: 0px; padding: 1rem; background-color: pink; -moz-hyphens:none; -ms-hyphens:none; -webkit-hyphens: none; hyphens:none; } .colorblockhotpink { border: 0px; padding: 1rem; background-color: #FF1493; -moz-hyphens:none; -ms-hyphens:none; -webkit-hyphens: none; hyphens:none; } .colorblock7 { border: 0px; padding: 1rem; background-color: plum; -moz-hyphens:none; -ms-hyphens:none; -webkit-hyphens: none; hyphens:none; } .colorblock8 { margin: auto; border: 0px; padding: 1rem; background-color: white; -moz-hyphens:none; -ms-hyphens:none; -webkit-hyphens: none; hyphens:none; } .colorblock9 { margin: auto; border: 0px; padding: 1rem; background-color: blueviolet; -moz-hyphens:none; -ms-hyphens:none; -webkit-hyphens: none; hyphens:none; } .colorblock10 { margin: auto; border: 0px; padding: 1rem; background-color: grey; -moz-hyphens:none; -ms-hyphens:none; -webkit-hyphens: none; hyphens:none; } /* black on white */ .colorblock11 { margin: auto; border: 0px; padding: 1rem; background-color: white; color: black -moz-hyphens:none; -ms-hyphens:none; -webkit-hyphens: none; hyphens:none; } /* white on black */ .colorblock12 { margin: auto; border: 0px; padding: 1rem; background-color: black; color: white !important; -moz-hyphens:none; -ms-hyphens:none; -webkit-hyphens: none; hyphens:none; } /* black on rosybrown */ .colorblock13 { margin: auto; border: 0px; padding: 1rem; background-color: rosybrown; color: black; -moz-hyphens:none; -ms-hyphens:none; -webkit-hyphens: none; hyphens:none; } /* dark red on aqua */ .colorblock14 { margin: auto; border: 0px; padding: 1rem; background-color: aqua; color: darkred; -moz-hyphens:none; -ms-hyphens:none; -webkit-hyphens: none; hyphens:none; } /* black on yellow */ .colorblock15 { margin: auto; border: 0px; padding: 1rem; background-color: yellow; color: black; -moz-hyphens:none; -ms-hyphens:none; -webkit-hyphens: none; hyphens:none; } /* red on black with wide right margin */ .colorblock16 { margin-left: 12rem; margin-right: 12rem; font-size: 1.5rem; border: 0px; padding: 1rem; background-color: black; color: red; font-family: courier; -moz-hyphens:none; -ms-hyphens:none; -webkit-hyphens: none; hyphens:none; } /* yellow on black with wide right margin */ .colorblock17 { margin-left: 12rem; margin-right: 12rem; font-size: 1.5rem; border: 0px; padding: 1rem; background-color: black; color: yellow; font-family: courier; -moz-hyphens:none; -ms-hyphens:none; -webkit-hyphens: none; hyphens:none; } /* purple on black with wide right margin */ .colorblock18 { margin-left: 12rem; margin-right: 12rem; font-size: 1.5rem; border: 0px; padding: 1rem; background-color: black; color: #8000ff; font-family: courier; -moz-hyphens:none; -ms-hyphens:none; -webkit-hyphens: none; hyphens:none; } /* black on acid green */ .colorblock19 { margin: auto; border: 0px; padding: 1rem; background-color: #00FF00; color: black; -moz-hyphens:none; -ms-hyphens:none; -webkit-hyphens: none; hyphens:none; } /* white on fuschia */ .colorblock20 { margin: auto; border: 0px; padding: 1rem; background-color: fuchsia; color: white; -moz-hyphens:none; -ms-hyphens:none; -webkit-hyphens: none; hyphens:none; } .colorblock21 { margin: auto; border: 0px; padding: 1rem; background-color: deeppink; -moz-hyphens:none; -ms-hyphens:none; -webkit-hyphens: none; hyphens:none; } .colorblock22 { margin: auto; border: 0px; padding: 1rem; background-color: lightsalmon; -moz-hyphens:none; -ms-hyphens:none; -webkit-hyphens: none; hyphens:none; } .colorblock23 { margin: auto; border: 0px; padding: 1rem; background-color: lightskyblue; -moz-hyphens:none; -ms-hyphens:none; -webkit-hyphens: none; hyphens:none; } .colorblock24 { margin: auto; border: 0px; padding: 1rem; background-color: peachpuff; -moz-hyphens:none; -ms-hyphens:none; -webkit-hyphens: none; hyphens:none; } p{ padding: 1rem; margin: auto; } h1{ color: #000000; font-size: 5rem; line-height: 4.75rem; font-weight: normal; text-align: left; padding: 0; margin: 0; } h2{ color: #000000; font-size: 4vw; line-height: 4.75vw; font-weight: normal; text-align: center; padding: 0; margin: 0; } @media screen and (min-width: 1200px) { h2 { font-size: 3rem; line-height: 3.5rem; } } @media screen and (max-width: 600px) { h2 { font-size: 1.5rem; line-height: 1.75rem; } } h3{ display: block; position: relative; font-size: 2rem; line-height: 2.5rem; color: #000000; font-weight: normal; text-align: left; padding: 0; margin: 0; } h4{ display: block; position: relative; font-size: 1.5rem; line-height: 1.75rem; color: #000000; font-weight: normal; text-align: center; padding: 0; margin: 0; } h5{ display: block; position: relative; font-size: 4rem; line-height: 5rem; color: #000000; font-weight: normal; text-align: center; padding: 0; margin: 0; } h6{ display: block; position: relative; font-size: 3vw; line-height: 3vw; color: #000000; font-weight: normal; text-align: center; padding: 0; margin: 0; }