portfolio/css/style.css

183 lines
3.2 KiB
CSS

@import url(messina-stylesheet.css);
@import url(basis-stylesheet.css);
@font-face {
font-family: "CamptonBook";
src:
url("../fonts/CamptonBook.otf") format("opentype");
}
@font-face {
font-family: "VoyageReg";
src:
url('..fonts/VoyageReg.eot?#iefix') format('embedded-opentype'),
url("../fonts/VoyageReg.otf") format("opentype"),
url('../fonts/VoyageReg.svg#VoyagerReg') format('svg');
}
@font-face {
font-family: "MaisonNeueMono";
src:
url('../fonts/MaisonNeueMono.ttf') format('truetype');
}
@font-face {
font-family: "GT-Flexa";
src: url("../fonts/GT-Flexa/GT-Flexa-Medium-Trial.otf") format("opentype");
}
@media (max-width: 900px) {
html { font-size: 15px; }
}
@media (max-width: 400px) {
html { font-size: 13px; }
}
::selection {
background: #3c40c6; /* WebKit/Blink Browsers */
}
::-moz-selection {
background: #3c40c6; /* Gecko Browsers */
}
/* width */
::-webkit-scrollbar {
width: 3px;
}
/* Track */
::-webkit-scrollbar-track {
background: transparent;
}
/* Handle */
::-webkit-scrollbar-thumb {
background: #4d463c;
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
background: #999999;
}
.floating_message::-webkit-scrollbar {
width: 3px;
}
/* Track */
.floating_message::-webkit-scrollbar-track {
background: rgba(0, 0, 0, 0.3);
}
/* Handle */
.floating_message::-webkit-scrollbar-thumb {
background: #000;
}
/* Handle on hover */
.floating_message::-webkit-scrollbar-thumb:hover {
background: #484848;
}
html, body {
height: 100%;
width: 100%;
background-color: #fffef8;
margin: auto;
overflow: hidden;
font-size: 17px;
-webkit-font-smoothing: antialiased;
}
ul, li {
list-style-type: none;
margin: 0;
padding: 0;
}
p {
margin: 0;
}
input, textarea {
outline: none;
}
.interactive_button {
transition: background-color 280ms cubic-bezier(0.37, 0, 0.63, 1) 70ms;
transition: color 200ms cubic-bezier(0.37, 0, 0.63, 1) 50ms;
}
#right_section{
width:55%;
height: 100%;
background-image: url("../images/gutenberg.png");
background-size: auto 100%;
background-position-x: center;
background-repeat: no-repeat;
}
#left_section{
width:45%;
height: 100%;
overflow-y: scroll;
overflow-x: hidden;
}
.flex_container{
display: inline-flex;
flex-direction: row;
}
.flex_container_item{
padding: 10px;
width: 100%;
display: block;
}
.fci_title{
font-family: Messina Sans Mono;
font-size: 1vw;
color: black;
}
.fci_text{
font-family: Messina Sans Mono SemiBold;
font-size: 2vw;
color: black;
}
/* Loading cover */
.loading_cover {
width: 100%;
height: 100%;
z-index: 3;
background-color: #141312;
display: flex;
bottom:0;
right: 0;
position: absolute;
transition: bottom 350ms cubic-bezier(0.37, 0, 0.63, 1) 70ms;
}
.loading_cover.loaded {
bottom: -100%;
}
.loading_cover_inner {
width: auto;
height: auto;
display: inline-flex;
margin: auto;
animation: fadeInOut 700ms cubic-bezier(0.37, 0, 0.63, 1) 100ms infinite;
}