/* base */
@import url('https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@100..900&display=swap');
body {font-family: "Roboto Slab", serif;font-optical-styling: auto; font-weight: 200; font-style:normal;}

/* front page */
.text-shadow {text-shadow: 0 0 6px rgba(0,0,0,0.8);}
.tris {min-height:600px;padding:0 !important;}
.tris a {display:block;background:rgba(0,0,0,0.3);height:100%;text-decoration:none;}
.tris a:hover {background:none;}
.tris h1.display-1 {padding-top:40%;font-weight: 600;}

.col-cakes {background:url('/media/img/cakemenu.webp') no-repeat 25% bottom;background-size:cover;}
.col-minis {background:url('/media/img/minisbackground.jpg') no-repeat;background-size:cover;}
.col-treats {background:url('/media/img/treatsbackground.jpg') bottom right no-repeat;background-size:cover;}

/* innards */
ul li {font-size: 1.1em;padding-bottom: 1em;}
header h3 {font-size:1.4em; letter-spacing: 0.3em;}
h3 a, nav a, .orderbutton a {text-decoration:none;color:black !important;}
nav a.active, nav a:hover {color: orange !important;}
main {margin:2em 0;width:100%;background: url('/media/img/cakemenu.webp') no-repeat;background-size:cover;}
body#minicakes main {background:url('/media/img/minisbackground.jpg');}
body#treats main {background:url('/media/img/treatsbackground.jpg');}



main h1.display-1, #fronthero h1.display-1 {font-weight:600 !important;padding:1.2em 0;color:white;text-shadow: 0 0 6px rgba(0,0,0,0.8);}
#fronthero h1 {padding:25% 0 !important;}
#fronthero h1 a  {text-decoration:none;color:white;display:block;}
.frontbody p {padding:3em 0;font-size:1.2em;line-height:1.9em;}
.carousel-item img {width:33.3%}
.front-container {color:white;background:black url('/media/img/cakeback1.jpg');background-size:cover;overflow: hidden;}
.frontbody p {padding:0.5em 0;font-size:1.2em;line-height:1.9em;}

/* exceptions for mobile */
@media screen and (max-device-width: 640px) {
    .tris {min-height:200px !important; margin-bottom:6px;}
    .tris h1.display-1 {padding-top:20%;font-weight: 600;}
    body#minicakes main {background-size:cover;}
    body#treats main {background-size:cover;}
}