@font-face { font-family: sinistre; src: url(fonts/Sinistre-StCaroline.woff), url(fonts/Sinistre-StCaroline.otf); } @font-face { font-family: jolybolditalic; src: url(fonts/JolyDisplay-BoldDisplayItalic.woff), url(fonts/JolyDisplay-BoldDisplayItalic.otf); } @font-face { font-family: jolyregularitalic; src: url(fonts/JolyDisplay-RegularDisplayItalic.woff), url(fonts/JolyDisplay-RegularDisplayItalic.otf); } @font-face { font-family: jolyregular; src: url(fonts/JolyDisplay-RegularDisplay.woff), url(fonts/JolyDisplay-RegularDisplay.otf); } @font-face { font-family: jolyheavyitalic; src: url(fonts/JolyDisplay-HeavyDisplayItalic.woff), url(fonts/JolyDisplay-HeavyDisplayItalic.otf); } ::-moz-selection { /* Code for Firefox */ color: black; background-color: #c94dff; } ::selection { color: black; background-color: #c94dff; } body{ font-size: 1.2vw; padding-left: 5%; padding-right: 5%; padding-bottom: 5%; margin:auto; font-family: jolyregular; max-width: 100%; height: 100%; /*overflow-x:hidden;*/ } .back{ position: fixed; color:#c94dff ; text-align: center; font-family: jolyregular; background-color: white; top:40%; bottom:43%; left:35%; right:35%; border: 1px solid #c94dff; -webkit-box-shadow: 10px 10px 0px 0px #c94dff; -moz-box-shadow: 10px 10px 0px 0px #c94dff; box-shadow: 10px 10px 0px 0px #c94dff; font-size: 1.25em; padding-top: 1.5em; z-index: 200; line-height: 1.5em; } .button_back{ font-size: 2.8vh; -webkit-appearance: none; background-color:transparent; border: 1px #c94dff solid; border-radius: 25em; color:#c94dff; cursor:pointer; font-family: jolybolditalic; padding-bottom:3px; } .button_back:hover{ border: 0.1em transparent solid; -webkit-box-shadow: 0px 0px 8px 1px #c94dff; -moz-box-shadow: 0px 0px 8px 1px #c94dff; box-shadow: 0px 0px 8px 1px #c94dff; } a{ color: #c94dff; } ul{ list-style-type:none; font-size: 1vw; } .intro{ position:fixed; left:5%; width: 25%; } .text_body{ position:absolute; display: block; max-width: 55%; padding: 2%; left: 38%; right: 10%; } .work_title{ margin-top: 80px; font-size: 3vw; font-family: jolybolditalic; margin-bottom: 0px; transform: rotate(-6deg); } .subtitle{ font-size: 1.5vw; transform: rotate(-6deg); } .name{ font-size: 1.2vw; transform: rotate(-6deg); margin-bottom: 40px; } .table_content{ /*border-top: solid 1px black;*/ /*border-bottom: solid 1px black;*/ bottom: 7%; position: fixed; width: 25%; } .info_button{ position: fixed; top: 6%; right: 5%; font-size: 4vw; color: #c94dff; z-index: 10; cursor: pointer; } img { max-width: 100%; display: block; margin: auto; } .footnote{ font-size: 1vw; } .image_cap1{ font-size: 1vw; font-family: jolybolditalic; } .image_cap2{ margin-top: 0px; font-size: 1vw; font-family: jolyregular; } .divider{ text-align: center; } h1{ font-family: jolyheavyitalic; text-decoration: solid underline 1px; font-size:1.8vw; } #info_text{ position: fixed; color:#c94dff ; font-family: jolyregular; background-color: white; bottom:7%; right:4%; left:35%; border:1px #c94dff solid; border-radius: 10px; z-index: 0; font-size: 20px; line-height: 22px; padding: 15px; z-index: 1; } #info_text:after { content: ''; position: absolute; display: block; width: 0; z-index: 1; border-style: solid; border-color: #ffffff transparent; border-width: 20px 15px 0; bottom: -20px; left: 90%; margin-left: -15px; } #info_text:before { content: ''; position: absolute; width: 0; z-index: 0; border-style: solid; border-color: #c94dff transparent; border-width: 21px 16px 0; bottom: -21.5px; left: 90%; margin-left: -16px; display: block; } .title{ font-family: jolybolditalic; }