/*fonts */


.bellefair-regular {
  font-family: "Bellefair", serif;
  font-weight: 400;
  font-style: normal;
}

.ballet-<uniquifier> {
  font-family: "Ballet", cursive;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}

 /*stuff */

body {
  background-color: #171a25;
  background-image: url('');
  background-repeat: no-repeat;
  background-attachment: fixed; 
  background-position: right ;
  background-size: 70%;
  color: #e3e6e0;
  font-family: 'Bellefair', serif;
}

 /*links */
a
  {color: #AE9F62;
   text-decoration: none;
    text-transform: uppercase;
  font-family: 'Bellefair', serif;
}

 /*headings */
h1
{color: #ddceae;
border-bottom: solid 0.5pt;
text-decoration: none;
text-transform: none;
font-family: 'Bellefair', serif;
}

h2
{color: #ddceae;
border-bottom: solid 0.5pt;
text-decoration: italic;
text-transform: none;
font-family: 'Bellefair', serif;
}


 /*hover */
    .card {
        
        position: relative;
        display: inline-block;
    }
    .card .img-top {
        display: none;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 99;
    }
    .card:hover .img-top {
        display: inline;}

 /*fade-in images */
.fade-in-image {
  animation: fadeIn 5s;
  -webkit-animation: fadeIn 5s;
  -moz-animation: fadeIn 5s;
  -o-animation: fadeIn 5s;
  -ms-animation: fadeIn 5s;
}

@keyframes fadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

@-moz-keyframes fadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

@-webkit-keyframes fadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

@-o-keyframes fadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

@-ms-keyframes fadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

 /*div nonsense */
.layout {
width: 100%;

  display: grid;
  grid:
    "sidebar body" 1fr
    / auto 1fr;
  gap: 8px;
}

.sidebar { grid-area: sidebar; 
 background: #1a1e27;
  padding: 10px;
  width: 100px;
  height: 500px;
  overflow-y: auto;
  position: fixed;
  scrollbar-color: #211815 transparent;}
  
.body { grid-area: body;
  background: #1a1e27;
  border-left: solid 0px;
  border-right: solid 0px;
  border-color: fff;
  padding: 10px;
  width: 800px;
  overflow-y: auto;
  margin-left: 120px;
  scrollbar-color: #211815 transparent;}


        


.star{
    position:absolute;
    overflow:hidden;
    left: 300px;
    top:0;
    filter: grayscale(100%);}
  
  
  .with_padding {
    	border: 1px solid red;

	padding: 30px 60px;
}
}