portfolio/css/style.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: white; 
  }
  
  /* 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: #fffaf3;
    margin: auto;
    overflow: hidden;
    font-size: 17px;
    -webkit-font-smoothing: antialiased;

  }

ul, li {

    list-style-type: none;
    margin: 0;
    padding: 0;

}

p {

    margin: 0;

}

.my_name{
    color:white !important;
    background-color:#3c40c6;
}

.date{
    color:#3c40c6 !important;
}

.banner_text{
    font-family: Messina Sans Mono SemiBold;
    font-size: 3vw;
    letter-spacing: -.1vw;
    color: black;
  
}

.banner_text span{
    color: #0be881;
}

.banner_text a{
    color: #000;
    text-decoration-style: dashed;

}

.banner_text a:hover{
    text-decoration: underline;
}

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;

}

#top_section{
    width:100%;
    height: auto;
}

.flex_container{
    display: flex;
    flex-direction: column;
    text-align: left;
}

.flex_container_item{
    padding: 10px;
    flex: 100%;
    border-bottom: 1px solid #000;
    
}

/* FOOTER */
#footer_banner{
    background-color: #000;
}

.footer_message_wrapper{
    padding: 10px;
    width: auto;
    border-bottom: 1px solid #000;
    height:auto;
}

.footer_message{
    color: #ffd32a !important;
    font-size: 1.5vw;
    word-break: unset;
    white-space: nowrap;
    text-transform: uppercase;
    margin-left: auto;
     /* animation properties */
    -moz-transform: translateX(100%);
    -webkit-transform: translateX(100%);
    transform: translateX(100%);
    -moz-animation: banner-slide 45s linear infinite;
    -webkit-animation: banner-slide 45s linear infinite;
    animation: banner-slide 45s linear infinite;
    &:hover {
        animation-play-state: paused;
    }
}

.footer_message a{
    color: #ffd32a;
}

/*FOOTER BANNER ANIMATION*/
/* for Firefox */
@-moz-keyframes banner-slide {
    from { -moz-transform: translateX(100%); }
    to { -moz-transform: translateX(-500%); }
  }
  
  /* for Chrome */
  @-webkit-keyframes banner-slide {
    from { -webkit-transform: translateX(100%); }
    to { -webkit-transform: translateX(-500%); }
  }
  
  @keyframes banner-slide {
    from {
      -moz-transform: translateX(100%);
      -webkit-transform: translateX(100%);
      transform: translateX(100%);
    }
    to {
      -moz-transform: translateX(-500%);
      -webkit-transform: translateX(-500%);
      transform: translateX(-500%);
    }
  }


.nav_item{
    font-size: 5vw;
    transition: 350ms cubic-bezier(0.37, 0, 0.63, 1) 7ms;
    &:hover{
        background-color: black;
        color: #ff3f34;
        cursor: pointer;
        padding-left: 5px;
    }
}

/* Loading cover */
.loading_cover {

    width: 100%;
    height: 100%;
    z-index: 3;
    background-color: black;
    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;
    
}

@keyframes fadeInOut {
    0% { opacity: 100%; }
    100% { opacity: 0%; }
  }