body{
     background-image: url(/ASSETS/bg.gif);
     background-attachment: fixed;
}

@font-face {
  font-family: 'pixeloperator';
  font-style: normal;
  font-stretch: normal;
  font-weight: normal;
  src: url('ASSETS/fonts/pixel_operator/PixelOperatorMono.ttf') format('truetype');
  font-display: fallback;
}

.layout_container{ /* Englobes the whole page */
    
    margin-left:10px;
    margin-right:10px;
    display:flex;
    justify-content:center;
    width:55vw;
    margin-inline:auto;
}

/* --------------------------------------------------------------------------------- */
/* common part for every page */

.center_container{ /* You know what center means */
    background-color: #462925;
    width:35vw;
    margin-inline:auto;
    padding:15px;
    background-image: url(/ASSETS/bg_2.png);
    border-style:solid;
    border-color: #462925;
    border-width:5px;
    border-right-width: 0px;
    min-width: 35vw;
    
}



.header{
    background-color: transparent;
    display:flex;
    flex-direction:column;
    justify-content:center;
    margin-inline:auto;
    
}

.title_text{
    font-family:'Roboto Mono', monospace;
    color:#fff;
    font-size:8vw;
    margin-inline:auto;
    margin-bottom:0px;
}

.small_text{
    font-size: small;
    color:#dda125;
    margin-inline:auto;
    font-family:'pixeloperator', monospace;
    font-size:11px;
    margin-top:0px;
}

.main_container{
    background-color:transparent;
}

.main_content{

}

.intro{
    
    font-size:15px;
}

.intro_text{
    color: #d4b48d;
    font-family: 'pixeloperator', monospace;
}

.intro_text_alt{
    color:#dda125;
    font-family:'pixeloperator', monospace;
}

.footer_container{

    background-color:#151d1E;
    position: relative;
    left: 0;
    bottom: 0;
    width: 100%;
    margin-top:35px;
}

.footer_text{
    color:#d4b48d;
    font-family:'pixeloperator', monospace;
    font-size:12px;
}

.deviled_bentlet{
    width:40px;
    margin-left:20px;
    margin-top:10px;
    
}

.deviled_text {
  visibility: hidden;
  padding: 5px;
  background-color: #455145;
  border-style:solid;
  color: #a08838;
  text-align: center;
  white-space: nowrap;
  
  position: absolute;
  top:15px;
  left:90px;
  transition-property: visibility;
  transition-delay: 0s;
}

.very_small_text{
    font-size:x-small;
    font-family:'Roboto Mono', monospace;
}

.deviled_bentlet:hover {
  transform: scale(1.5);
}

.adoptable_container:hover .deviled_text {
  visibility: visible;
}

a {
  color: #d37229;
  font-weight: bold;
  text-decoration-style: dotted;

}

a:hover{
    color:#fff;
}

.page_title{
    font-family: 'pixeloperator', monospace;
    color:#d4b48d;
}

/* --------------------------------------------------------------------------------- */
/* common part for every page, specifically the rightside container/menu bar */

.rightside_container{
    background-color:#7c7433;
    background-image: url(/ASSETS/bg_3.png);
    width:50vw;
    display:inline-block;
    padding:5px;
    border-style:solid;
    border-color:#7c7433;
    border-width: 5px;

}

.rightside_title_text{
    margin-left:5px;
    font-family:'pixeloperator', monospace;
    font-size:20px;

}

.updates_page{
    width:24vw;
    height: 80vw;
    scrollbar-color: transparent transparent;
    border-width: 1px;
    border-color:transparent;
    
}

.first_section{
    
}

.album_div{
    display:flex;
    flex-wrap:wrap;
    justify-content: center;
    
}

.album_cover{
    width:20vw;
}

.audio_player{
    margin-top:10px;
    width:20vw;
    height:25px;
    
    
}

.album_title{
    margin-top:2px;
    margin-bottom: 2px;
    font-size:1.5vw;
    font-family:'pixeloperator', monospace;
    font-weight: bold;
    color:#151d1E;
    
}

.album_separator{
    display: block;
    height: 1px;
    border: 0;
    border-top: 2px solid #7c7433;
    margin: 1em 0;
    padding: 0;

    
}

.rightside_h2_text{
    font-family:'pixeloperator', monospace;
    font-size:25px;
}

.navigation_container{
    background-color:#455145;
    margin:5px;
    padding:7px;
    margin-top:30px;
    border-style:solid;
    border-color: #151d1E;
    border-width:5px
}

.navigation_content{
    display:flex;
    flex-direction:column;
    margin-left:5px;

}

.links_text{
    font-family:'pixeloperator', Courier, monospace;
    margin-left:10px;
    color:#dda125;
    padding:5px;
}
.links_text:hover{
    scale:120%;
    transition-duration: 0.3s;
}


.updates_container{
    margin-left:5px;
    margin-right:5px; 
    background-color:#455145;
    padding:7px; 
    margin-top:25px;
    border-style:solid;
    border-color: #151d1E;
    border-width:5px
}

.update{
    background-color:#151d1E;
    padding:10px;
    background-image: url(/ASSETS/bg_4.png);
    border-style:solid;
    border-color: #151d1E;
    border-width:5px;
    border-bottom: 0px;
}
.updates_text{
    font-family:'pixeloperator', monospace;
    color: #dda125;
    font-size:12px;
    
}

.update_year_container{
    margin-bottom: 10px;
}

/* --------------------------------------------------------------------------------- */
/* index.html specific */

.banner_container{

}

.context_text{
    font-size:small;
}

.frame.img{
    height:200%;
    width: auto;
}
.intro_gif{
    display:flex;
    background-color: transparent;


}
.intro_gif_img{
    width:30vw;
    background-color: transparent;
    
    
}

.links_bar_div{
    display:flex;
    justify-content:space-between ;
    margin-right:10px;
    padding-top:10px;
}

.icons_bar:hover{
    transform: scale(1.2);
    transition-delay: 0.2s;
}

.cat_pic{
    width:10vw;
    padding:5px;
}

.cat_pic:hover{
    transform: scale(1.5);
    transition-delay: 0.2s;
}

.centered_div{
    display : flex;
    flex-direction: column;
    justify-content: center;
    margin-top:50px;
    height:25vw;
    
}

/* --------------------------------------------------------------------------------- */
/* journal.html & year journal specific */

.journal_container{

    position:relative;
    background-color: #462925;
    
    width:70vw;
    padding:30px;
    background-color: #462925;
    margin-inline:auto;
    padding:15px;
    background-image: url(/ASSETS/bg_2.png);
    border-style:solid;
    border-color: #462925;
    border-width:5px;
    display:flex;
    flex-direction: column;

}

.backlink_text{
    justify-self: center;
    background-color:#455145;
    padding:10px;
    border-style:solid;
    border-color:#7c7433;
    text-decoration: none;
}

.backlink_text:hover{
    border-color:#a08838;
    color:#dda125;
}

article{
    background-color: #151d1e;
    padding:10px;
    
}

.update_separator{
    margin-left:10px;
    margin-right:10px;
    margin-top:20px;
    margin-bottom:20px;
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #d4b48d;
    margin: 1em 0;
    padding: 0;
}
/* --------------------------------------------------------------------------------- */
/* gallery.html specific */

.center_container_alt{

    position:relative;
    background-color: transparent;
    
    width:50vw;
    padding:30px;
    background-color: #462925;
    margin-inline:auto;
    padding:15px;
    background-image: url(/ASSETS/bg_6.png);
    border-style:solid;
    border-color: #7c7433;
    border-width:5px;
    display:flex;
    flex-direction: column;

}

.gallery_container{
    background-color:aquamarine;
    margin-left:10px;
    margin-right:10px;
    margin-bottom:10px;
    margin-top:10px;
    height:60vw;
    display:flex;
    flex-direction:column;
}

.portfolio_container{
    
    padding:10px;
    display:flex;
    flex-direction:column;
}



.portfolio_button{
    margin:auto;
    background-color:#462925;
    padding:10px;
    background-image:url(ASSETS/bg_2.png);
    border-style: solid;
    border-width: 5px;
    border-color:#151d1E;
    margin-bottom:10px;

    color:#d4b48d;
    font-family:'pixeloperator', monospace;
}

.portfolio_button:hover{
    transform: scale(1.2);
    transition-delay: 0.2s;
    
}


/* --------------------------------------------------------------------------------- */
/* projects.html specific */

.project_item{
    background-color: #151d1E;
    margin-left:10px;
    margin-right:10px;
    margin-bottom:10px;
    margin-top:10px;
    display:flex;
    flex-direction:row;
    border-color:#462925;
    border-style:solid;
    border-width: 5px;
    padding:7px
}

.project_image{
    background-color:black;
    width:16vw;
    height:9vw;

    margin-left:5px;
    margin-right:5px;
    margin-bottom:5px;
    margin-top:5px;

}

.project_description{
    background-color:transparent;
    border-style:dotted;
    border-color:#455145;
    margin-left:5px;
    margin-right:5px;
    margin-bottom:5px;
    margin-top:5px;
    padding:5px
}

.project_title{
    color: #dda125;
    margin-left:5px;
    margin-right:5px;
    margin-bottom:5px;
    margin-top:5px;
    font-family: 'Roboto', monospace;
}

.project_text{
    font-family: 'Roboto', monospace;
    color: #d4b48d;

}

.link_div{
    display:flex;
    justify-content: right;
}

.learn_more_link{
    background-color:#7c7433;
    color:#151d1E;
    padding:5px;
    border-style:solid;
    border-color:#455145;
    text-decoration-line: none;
    
}

/* --------------------------------------------------------------------------------- */
/* contact.html specific */

.contact_img{
    width:128px;
}

.contact_div{
    background-color:#455145;
    border-style:solid;
    border-color:#a08838;
    border-radius:10px;
    display:flex;
    flex-direction: row;
    padding:5px;

}

.timezone_div{
    display:flex;
    flex-direction: row;
    overflow: hidden;
    background-color:#151d1E;
    padding:5px;


}

/* --------------------------------------------------------------------------------- */
/* gallerier.html specific */

.gallerier{
    width:50vw;
    height:95vw;
    border:solid transparent;
    
}

/* --------------------------------------------------------------------------------- */
/* about_me.html specific */

.about_me_card_div{
    display: inline-block;
    width:32vw;
    background-color:#455145;
    background-image:url(ASSETS/bg_4.png);
    border-style: solid;
    border-color:#151d1E;
    padding-left:10px;
    padding-bottom:10px;
}

.presentation_image{
    width:12vw;
}