:root {
    --primary-color: #D096FE;
    --accent-color: #D096FE;
    --ltest-color: #CBFB05;
    --dkest-color:#050505;
    --secondary-color:#2F4858;
    --dk-color: #050505;
}
html, body {
    margin:0;
    padding-top:25px;
    padding:0;
    height:auto;
    font-family:'Monaco';
    font-size:18px;
    background-attachment: fixed;
    background-color: whitesmoke;
    height:1200px;
    color: var(--dkest-color); 
    padding:1px;
}
img{
    width: 300px;
}
#fridge{
    display: flex;
    align-content: center;
    margin: 10px;
}
.img{
  width:300px;
  height: 400px;
}
.light-text{
    color: var(--ltest-color);
}
body a {
    color:var(--accent-color);
    font-weight:normal;
}
ul.list li {
    padding-bottom:5px;
}
#container {
    max-width:1200px;
    margin:0 auto;
    height:auto;
    background-color:transparent;
    margin-top:15px;
}
h1{
  color:var(--dkest-color);
  text-align:center;
  font-family: "American Typewriter";
  text-shadow: 1px 1px var(--primary-color);
}
h3, h5 {
    color:var(--dkest-color);
    text-align: center;
}
h2, h4, h6 {
    color:var(--ltest-color);
    text-align: center;
}
hr {
    border: 1px solid var(--secondary-color);
    margin:auto;
    width:75%;
    display:block;
}
#header {
    max-width:1920px;
    color:var(--ltest-color);
    height:auto;
    margin:0 auto;
    text-shadow:3px 3px var(--dkest-color);
}
.navbar li a {
    text-decoration:none;
    color: var(--dk-color);
}
.navbar ul {
    list-style-type:none;
}
.navbar {
    background-color:#CBFB05;
    max-width:1920px;
    border:2px solid var(--dkest-color);
    border-left: none;
    border-right: none;
    padding-top:5px;
    padding-bottom:5px;
    text-align:center;
    box-shadow: 0px 5px;
    position: -webkit-sticky;
    position: sticky;
    top: 0;
}
.title {
    font-size:35px;
    text-align:center;
    text-shadow: 2px;
    font-style:italic;
    font-family: 'Trattatello';
    color:var(--ltest-color);
}
.section-title {
    text-align:center;
    font-weight:bold;
    padding-top:5px;
    padding-bottom:5px;
    background-color:var(--dkest-color);
    color:var(--primary-color);
    font-size:16px;
    border-bottom:1px solid var(--dkest-color);
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
}
.blog-section-title {
    text-align:center;
    font-weight:bold;
    padding-top:5px;
    padding-bottom:5px;
    background-color:var(--dkest-color);
    color:var(--ltest-color);
    font-size:16px;
    border-radius: 10px;
    border:2px solid var(--secondary-color);
    margin-bottom: 10px;
    box-shadow: 5px 5px var(--dkest-color);
}
.blog-pic {
    width:50%;
    margin-left:25%;
    margin-right:25%;
}
.wrapper {
    display:flex;
    flex-wrap:wrap;
    height:auto;
    width:100%;
}
#left-sidebar {
    width:25%;
    border:2px solid var(--secondary-color);
    border-radius: 10px;
    height:100%;
    background-color:var(--primary-color);
    margin-top: 5px;
    text-align: center;
    box-shadow: 5px 5px var(--dkest-color);
}
.content {
    padding:10px;
}
.main-content {
    margin-top: 5px;
    margin-left: 1%;
    margin-right: 1%;
    background-color: var(--primary-color);
    text-align:left;
    border-radius: 10px;
    border: 2px solid var(--secondary-color);
    box-shadow: 5px 5px var(--dkest-color);
    width:70%;
    height: 100%;
}
.center-column {
    margin-top: 5px;
    margin-left: 1%;
    margin-right: 1%;
    width:55%;
}
p a {
    color:var(--dk-color);
    font-weight:normal;
}
.button {
    color: var(--ltest-color);
    font-style: italic;
    text-decoration: none;
    background-color: var(--accent-color);
    border:none;
    box-shadow: 5px 5px var(--dk-color);
    border-radius: 5px;
    padding:10px;
    width:50%;
    text-align: center;
    margin:auto;
    margin-top: 5px;
    margin-bottom:25px;
    display:block;
}
.scroll::-webkit-scrollbar-track {
    background-color: var(--dkest-color);
}
.scroll::-webkit-scrollbar {
    width: 10px;
    background-color: (var(--dkest-color));
}
.scroll::-webkit-scrollbar-thumb {
    background-color: var(--accent-color);
}
.navbar li {
    position: relative;
    display:inline-block;
}
.navbar a {
    text-decoration:none;
    display:block;
    color:var(--secondary-color);
    margin-right:15px;
    transition:0.2s all linear;
    font-weight:bold;
    font-size:18px;
    margin-right:40px;
}
.navbar a:hover{
    background:var(--primary-color);
    color:var(--dkest-color);
    transition:0.2s all linear;
}
.navbar li > ul {
    background:var(--primary-color);
    display:none;
    position:absolute;
    margin-left:0;
    border:1px solid var(--dkest-color);
}
.navbar li > ul a {
    padding-left:0;
    padding-right:0;
    padding-top:5px;
    padding-bottom:5px;
}
.navbar li > ul li{
    display:block;
}
.navbar li:hover > ul{
    display:block;
}
.navbar ul ul ul {
    position:absolute;
    left:100%;
    top:0;
}
#container {
    max-width:1200px;
    text-align: left;
}
#map{
    height:400px;
}
@media only screen and (max-width: 1200px) {
    #left-sidebar {
        order:1;
        width:100%;
   }
    .main-content {
        order:2;
        width:100%;
   }
   .center-column{
        width:100%;
        order:2;
   }
    .navbar a {
        padding-bottom:10px;
   }
    #container {
        max-width:100%;
   }
}