/* Full website stuff here */


:root {
    --dk-color:#e8c088;
    --mid-color:#E4E6C3;
    --lt-color:#F7F7F2;
    --dkest-color:#261C15;
    --accent:#4b7ed7;
    --bg-color:#366D4B;
    --hover-color: #ffeab9; 
 }

 @font-face {
  font-family: shellybu;
  src: url(/fonts/Shellybu.ttf);
}

.home_bar{
   width: 100%;
   margin: auto;
   height:30px;
   background-color: var(--lt-color);
}

.back_to_home{
	position: block;
   display: inline-block;
   margin: auto;
   margin-left: 5%;
	padding: 3px;
	border-radius: 4px;
	border: 2px solid var(--dk-color);
}

.back_to_home:hover{
	background: var(--hover-color);
}

h1{
    display: inline-block;
    text-align: center;
    font-family: shellybu;
    font-size: xxx-large;
    font-weight: 100;
}

.carmen_gif{
    image-rendering: optimizeSpeed;             /* STOP SMOOTHING, GIVE ME SPEED  */
    image-rendering: -moz-crisp-edges;          /* Firefox                        */
    image-rendering: -o-crisp-edges;            /* Opera                          */
    image-rendering: -webkit-optimize-contrast; /* Chrome (and eventually Safari) */
    image-rendering: pixelated;                 /* Universal support since 2021   */
    image-rendering: optimize-contrast;         /* CSS3 Proposed                  */
    -ms-interpolation-mode: nearest-neighbor;   /* IE8+                           */
    width: 63px;
    display: inline-block;
}

.container {
    width: 90%;
    margin: 5%;
    background-color:var(--lt-color);
    text-align: center;

}


header {
    width: 100%;
    height:auto;
    margin:0 auto;
   
}


#left-sidebar {
    width:15%;
    border:1px solid var(--dkest-color);
    background-color:var(--lt-color);
    padding: 5px;     
}

ul{
    list-style-position: outside;
    li{
        margin: 0px 0px 0px -20px;
    }
}

.icon{
   size:20px;
}

.content {
   padding:10px;
   
}

.main-content {
   border:1px solid var(--dkest-color);
   width:80%;
   height:auto;
   padding: 5px;
}


footer{
    text-align: center;
    font-size: 12px;
}


/* CARMEN-specific stuff here*/

.doll_img{
    vertical-align: middle;
    background: #ccc;
    margin: 3px;
    display: inline-block;
    max-width: 30%;
    border-radius: 15px;
    padding: 5px;

}


/* ☎️☎️📱📱 Mobile stuff here*/

@media only screen and (max-width: 720px) {
body{
    background-color: white;
}



#left-sidebar {
    width:100%;
    ul{
        margin-left: -35px;
        list-style: none;
        display: grid;
        grid-template-columns: auto auto auto auto;
        padding: none;
    }

    li{
        margin: 0px;
        text-align: left;
    }
}

.main-content {
   width:100%;
}

}