@import url('https://fonts.googleapis.com/css?family=Montserrat:300|Ubuntu:500'); html, div, span, h1, h2, h3, h4, h5, h6, p, a, em, img, small, strong, b, i, dl, dt, dd, ol, ul, li, form, label, table, tbody, tfoot, thead, tr, th, td, input { border: none; margin: 0; padding: 0; list-style-type: none; vertical-align: baseline; } body { background: #fff; font-size: 16px; color: #666; font-family: "Montserrat", sans-serif; font-style: normal; -webkit-font-smoothing: antialiased; -webkit-text-stroke-width: 0.2px; -moz-osx-font-smoothing: grayscale; } .icon { width: 1em; height: 1em; vertical-align: -0.15em; fill: currentColor; overflow: hidden; } /* */ #icon-email:hover { color: #1c5e78; } #icon-twitter:hover { color: #29a3ef; } #icon-instagram:hover { color: #ab3ba8; } #icon-wechat:hover { color: #25c488; } #icon-github:hover { color: #23282d; } #icon-xbox:hover { color: #1b7b17; } #icon-playstation:hover { color: #0b3a8e; } @media (min-width: 500px) { #head-container { width: 70vw; margin: 64px 15vw; clear: both; overflow: auto; } #head-start-wrap { width: 30%; float: left; } #head-start-wrap > img { width: 100%; } .contact-line { margin: 8px 0; word-wrap: break-word; } .contact-line > svg { margin-right: 8px; } #head-social { margin-top: 16px; } #head-social > ul { list-style-type: none; clear: both; } #head-social > ul > li { float: left; font-size: 2em; margin: 24px 16px 0 0; } #head-social > ul > li > a { color: #666; transition: 0.5s; } #head-social > ul > li > a:hover { transition: 0.5s; } #head-end-wrap { margin-left: 10%; width: 60%; float: left; } #head-end-wrap > article > h1 { font-family: "Ubuntu", sans-serif; font-size: 2em; margin: 0.5em 0; } #head-end-wrap > article > section { text-indent: 2em; line-height: 1.8em; font-size: 1em; margin-bottom: 0.5em; } } @media (max-width: 499px) { #head-container { width: 80vw; margin: 6vh 8vw 10vh 8vw; } #head-start-wrap {} #head-start-wrap > img { width: 100%; } .contact-line { margin: 8px 0; word-wrap: break-word; } .contact-line > svg { margin-right: 8px; } #head-social { margin-top: 16px; } #head-social > ul { list-style-type: none; clear: both; overflow: auto; } #head-social > ul > li { float: left; font-size: 2em; margin: 8px 16px 8px 0; } #head-social > ul > li > a { color: #666; } #head-end-wrap { margin: 32px 0; } #head-end-wrap > article > h1 { font-family: "Ubuntu", sans-serif; font-size: 2em; margin: 0.5em 0; } #head-end-wrap > article > section { text-indent: 2em; line-height: 1.8em; font-size: 1em; margin-bottom: 0.5em; } } /* */ /* */ #project-operator { background: #333; transition: 0.5s; } #project-operator span { color: white; } #project-shoppo { background: #de2b24; transition: 0.5s; } #project-shoppo span { color: white; } #project-0305 { background: #f8f8f8; transition: 0.5s; } #project-0305 span { color: black; } #project-yours { background: #fecb2f; transition: 0.5s; } #project-yours span { color: white; } #project-bolome { background: #d8413a; transition: 0.5s; } #project-bolome span { color: white; } @media (min-width: 500px) { #project-container { width: 70vw; margin: 64px 15vw; clear: both; overflow: auto; } #project-container > h1 { font-family: "Ubuntu", sans-serif; font-size: 2em; margin-bottom: 32px; } #project-wrap { overflow: auto; clear: both; } #project-wrap > li { float: left; width: 20vw; height: 12vw; margin: 0 3vw 3vw 0; position: relative; } #project-wrap > li > a { display: block; width: 100%; height: 100%; border-radius: 5px; } #project-wrap > li > a > img { position: absolute; max-width: 4vw; max-height: 4vw; transition: 0.5s; left: 0; right: 0; margin: 4vw auto; } #project-wrap > li > a:hover > img { transition: 0.5s ease-out; transform: translateY(-1.2vw); } #project-wrap > li > a > span { position: absolute; display: block; left: 0; right: 0; height: 2vw; font-size: 1.3em; text-align: center; bottom: 4vw; opacity: 0; transition: 0.5s; } #project-wrap > li > a:hover > span { transition: 0.5s ease-out; opacity: 1; transform: translateY(1.2vw); } } @media (max-width: 499px) { #project-container { width: 80vw; margin: 10vh 8vw; } #project-container > h1 { font-family: "Ubuntu", sans-serif; font-size: 2em; margin-bottom: 32px; } #project-wrap { overflow: auto; clear: both; } #project-wrap > li { float: left; width: 36vw; height: 36vw; margin: 0 3vw 3vw 0; position: relative; } #project-wrap > li > a { display: block; width: 100%; height: 100%; border-radius: 5px; } #project-wrap > li > a > img { position: absolute; max-width: 10vw; max-height: 10vw; transition: 0.5s; left: 0; right: 0; margin: 10vw auto; } #project-wrap > li > a > span { position: absolute; display: block; left: 0; right: 0; height: 2vw; font-size: 1em; text-align: center; bottom: 12vw; transition: 0.5s; } } /* */ /* */ @media (min-width: 500px) { #contribution-container { width: 70vw; margin: 48px 15vw; clear: both; overflow: auto; } #contribution-container > h1 { font-family: "Ubuntu", sans-serif; font-size: 2em; margin-bottom: 32px; } } @media (max-width: 499px) { #contribution-container { width: 80vw; margin: 10vh 8vw; } #contribution-container > h1 { font-family: "Ubuntu", sans-serif; font-size: 2em; margin-bottom: 32px; } } /* */ /* */ @media (min-width: 500px) { #more-container { width: 70vw; margin: 48px 15vw; clear: both; overflow: auto; } #more-container > h1 { font-family: "Ubuntu", sans-serif; font-size: 2em; margin-bottom: 32px; } } @media (max-width: 499px) { #more-container { width: 80vw; margin: 10vh 8vw; } #more-container > h1 { font-family: "Ubuntu", sans-serif; font-size: 2em; margin-bottom: 32px; } } /* */