/* KEY IMPORTS */
@font-face {font-family: pixelfont; src: url(https://lavendermochagames.neocities.org/core/fonts/dogica.ttf);}
@font-face {font-family: headerfont; src: url('https://lavendermochagames.neocities.org/core/fonts/NunitoSans.ttf');}
@font-face {font-family: headerfont; src: url('https://lavendermochagames.neocities.org/core/fonts/NunitoSans-Italic.ttf'); font-style: italic;}
@font-face {font-family: mainfont; src: url('https://lavendermochagames.neocities.org/core/fonts/Nunito-Regular.ttf');}
@font-face {font-family: mainfont; src: url('https://lavendermochagames.neocities.org/core/fonts/Nunito-Bold.ttf'); font-weight: bold;}
@font-face {font-family: mainfont; src: url('https://lavendermochagames.neocities.org/core/fonts/Nunito-Italic.ttf'); font-style: italic;}
@font-face {font-family: mainfont; src: url('https://lavendermochagames.neocities.org/core/fonts/Nunito-BoldItalic.ttf'); font-style: italic; font-weight: bold;}
/* --------------- */


/* ----- BODY AND BASICS ----- */
* {box-sizing: border-box;}

body {
    background-color: #25170e; /* #372215; */
    color: #fff;
    margin: 0;
    font-family: mainfont;
}

button {font-family: mainfont;}

a {color: #945b38; font-weight: bold; text-decoration: none;}
a:hover {color: #945b38; text-decoration: underline;}
.purplelink a {color: #493894; font-weight: bold;}
.purplelink a:hover {color: #493894; text-decoration: underline;}

/* ALIGNMENTS */
.right {float: right; /* Float a link to the right */}
.center {display: block; margin: auto; text-align: center;}

/* HEADERS */
h1 {border-bottom: 3px solid #c4b0ff;}
h1, h2, h3, h4, h5 {font-family: headerfont;}
.noborder h1 {border: none;} /* turn off the underline for h1 */
.pixelheader {font-family: pixelfont; font-size: 0.9em;}
/* --------------- */


/* ----- BASIC TEXT FEATURES ----- */

/* IN-LINE IMAGES AND TEXT */
.imgtext {display: flex; justify-content: flex-start; align-items: center;}
.imgtext img {padding-right: 5px;}
.imgtext a {color: #7d6bc7;}
.imgtext a:hover {color: #7d6bc7; text-decoration: underline;}

/* DIVIDERS */
.divider1 {border-top: 3px solid #945b38; width: 80%; margin: auto;} /* basic brown divider used for sidenav */
.divider2 {border-top: 3px dotted #c4b0ff; width: 100%;} /* dotted purple divider used for blog */
.divider3 {border-top: 3px solid #b399ff; width: 80%; margin: auto;} /*purple divider used for game sidebars */
.divider4 {border-top: 3px dotted #b399ff; width: 35%; margin: 15px auto;} /*purple divider also used for game sidebars with badges*/
.divider5 {border-top: 3px dotted #d8ccff; width: 75%; margin: auto;} /* dotted purple divider used for recommendations */

/* INTERIOR BOX LABEL */
.boxlabel p {
    color: #000;
    font-weight: bold;
    margin-top: 0;
}

/* BUTTONS */
.lavender button {
    font-size: 1.01em;
    padding: 15px 32px;
    margin: 10px;
    background-color: #d8ccff;
    border: none;
    border-bottom: 3px solid  #b399ff;
    color: #000;
    outline: none;
    cursor: pointer;
}

.lavender button:hover {
    background-color: #c4b0ff;
    border: none;
    border-bottom: 3px solid  #a38fef;
}

.rec button {
    font-size: 1em;
    background-color: #d8ccff;
    border: none;
    border-bottom: 3px solid  #b399ff;
    color: #000;
    outline: none;
    cursor: pointer;
    padding: 15px 32px;
}

.rec button:hover {
    background-color: #c4b0ff;
    border: none;
    border-bottom: 3px solid  #a38fef;
}

/* --------------- */

/* ----- SIDEBAR ----- */
.sidebarimg {padding: 5px; border-bottom: 3px solid #dcb9a3;} /*brown sidebar*/
.sidebarimg:hover {border-bottom: 3px solid #6f442a; cursor: pointer;} /*brown sidebar*/
.sidebarimg-l {padding: 5px; border-bottom: 3px solid #ebe6ff;} /*purple sidebar*/
.sidebarimg-l:hover {border-bottom: 3px solid #7d6bc7; cursor: pointer;} /*purple sidebar*/

.sidenav {
    float: left;
    background-color: #dcb9a3;
    color: #000;
    width: 15%;
    border-right: 3px #945b38 solid;
    text-align: center;
}
  
.sidenav button {
    display: block;
    background-color: #dcb9a3;
    margin: 0;
    color: #000;
    padding-top: 20px; 
    padding-bottom: 20px;
    /* padding: 20px 0px 20px 60px; */
    width: 100%;
    border: none;
    outline: none;
    cursor: pointer;
}

.sidenav button:hover {background-color: #372215; color: #fff;}
.sidenav a, .sidenav a:hover {text-decoration: none;}

.sidenav.label {
    display: block;
    padding-top: 10px;
    padding-bottom: 10px;
    /* padding: 20px 0px 20px 40px; */
    width: 100%;
    border: none;
    outline: none;
    font-family: pixelfont;
    font-size: 0.7em;
}

.sidebarlinks a {
    color: #000;
    text-decoration: none;
    border-bottom: 2px solid #dcb9a3;
    font-weight: normal;
}

.sidebarlinks a:hover {
    color: #000;
    text-decoration: none;
    border-bottom: 2px solid #6f442a;
    font-weight: normal;
}

/* ----- TO-DO SIDEBAR ----- */
.todo h2 {font-family: pixelfont; font-size: 0.9em;}
ul.todo {list-style-type: none;}
li.todo {padding: 5px;}

.checkbox {
  display: block;
  position: relative;
  padding-left: 35px;
  margin-bottom: 12px;
  font-size: 1em;
}

/* Create a custom checkbox */
.checked, .unchecked {
  position: absolute;
  top: 0;
  left: 0;
  height: 25px;
  width: 25px;
  background-color: white;
  border: 1px solid #6f442a;
  border-radius: 5px;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checked:after {
  content: "";
  position: absolute;
  display: none;
  display: block;
}

/* Style the checkmark/indicator */
.checkbox .checked:after {
    left: 9px;
    top: 5px;
    width: 5px;
    height: 10px;
    border: solid #6f442a;
    border-width: 0 3px 3px 0;
    transform: rotate(45deg);
}

/* --------------- */


/* ----- ROWS AND COLUMNS ----- */
/* EXTERIOR ROWS AND COLUMNS */
.main100 {
    flex: 100%;
    background-color: #fff;
    color: #000;
    padding: 20px 75px 20px 75px;
}

.main85 {
    flex: 85%;
    background-color: #fff;
    color: #000;
    padding: 20px 200px 20px 75px;
}

.main65 {
    flex: 65%;
    background-color: #fff;
    color: #000;
    padding: 20px 75px 20px 75px;
}
  
.main60 {
    flex: 60%;
    background-color: #fff;
    color: #000;
    padding: 20px 60px 20px 60px;
}

.side35 {
    flex: 35%;
    background-color: #dcb9a3;
    color: #000;
    padding: 20px 75px 20px 75px;
}
  
.side25 {
    flex: 25%;
    background-color: #ebe6ff;
    color: #000;
    padding: 20px 50px 20px 50px;
}

.side25 a {color: #493894; font-weight: bold;}

/* INTERIOR ROWS AND COLUMNS */
.row {display: flex; flex-wrap: wrap;}
.minirow {display: flex; flex-wrap: wrap;}
.miniheader {padding: 0px; align-items: flex-start; display: inline-block;}
.minibutton {padding: 0px; align-items: flex-end;}
.minitext {padding: 0px; align-items: center;}

.rec60 {float: left; flex-direction: column; justify-content: flex-start; width: 60%;}
.rec40 {float: left; justify-content: flex-start; width: 40%;}
.stack {display: flex; flex-wrap: wrap;}

.col80 {float: left; width: 80%;}
.col70 {float: left; width: 70%;}
.col60 {float: left; width: 60%;}
.col50 {float: left; width: 50%;}
.col45 {float: left; width: 45%;}
.col40 {float: left; width: 40%;}
.col35 {float: left; width: 35%;}
.col30 {float: left; width: 30%;}
.col25 {float: left; width: 25%;}
.col20 {float: left; width: 20%;}
.col10 {float: left; width: 10%;}
.col05 {float: left; width: 5%;}
/* --------------- */

/* ----- HEADER AND FOOTER ----- */
.header {
    padding: 40px;
    text-align: center;
    color: white;
    background-image: linear-gradient(to bottom right,#b399ff,#c4b0ff,#fff)
}

.navbar {
    overflow: hidden;
    background-color: #372215;
}
  
.navbar a {
    float: left;
    display: block;
    color: #d8ccff;
    padding: 14px 30px;
    text-align: center;
    text-decoration: none;
    font-family: pixelfont;
    font-size: 0.75em;
    font-weight: normal;
}
    
.navbar a:hover {
    background-color: #b399ff;
    color: #25170e;
}
  
.footer {
    overflow: hidden;
    background-color: #25170e;
}

.footer a {
    float: right;
    display: block;
    color: #d8ccff;
    padding: 14px 30px;
    text-align: center;
    text-decoration: none;
    font-family: pixelfont;
    font-size: 0.75em;
    font-weight: normal;
}
  
.footer a:hover {
    background-color: #c4b0ff;
    color: #25170e;
}
/* --------------- */

/* ----- STATUS CAFE AND BLOG UPDATES ----- */
#statuscafe {
    padding: 10px;
    background-color: #ebe6ff;
    border: 2px solid #7d6bc7;
    margin-left: 5px;
    height: 175px;
}

#statuscafe-username {margin-bottom: .5em;}
#statuscafe-username a {color: #493894;}
#statuscafe-username a:hover {color: #000;text-decoration: underline;}
#statuscafe-content {margin: auto; /* 0 1em 0.5em 1em; */}

#blogbox {
    padding: 10px;
    background-color: #dcb9a3;
    border: 2px solid #6f442a;
    color: #000;
    margin-right: 5px;
    height: 175px;
    overflow: auto;
}

#blogbox a {color: #6f442a;}
#blogbox a:hover {color: #000; text-decoration: underline;}
/* --------------- */


/* ----- DROPDOWN ----- */
.dropdown {
    color: #000;
    cursor: pointer;
    border: none;
    transition: 0.4s;
    width: 100%;
    text-align: left;
    padding: 10px;
}

.dropdown:hover {background-color: #b5b5e3;}

.panel {
    padding: 0 18px;
    display: none;
    overflow: hidden;
  }
/* --------------- */


/* ----- MODAL ----- */
.modal {
    display: none;
    position: fixed;
    z-index: 1;
    padding-top: 30px;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: black;
}

.modal-content {
    position: relative;
    background-color: #fefefe;
    margin: auto;
    padding: 0;
    width: 90%;
    max-width: 640px;
    max-height: 480px;
}

.close {
    color: white;
    position: absolute;
    top: 10px;
    right: 25px;
    font-size: 35px;
    font-weight: bold;
}

.close:hover, .close:focus {
    color: #999;
    text-decoration: none;
    cursor: pointer;
}

.mySlides {display: none;}

.prev, .next {
    cursor: pointer;
    position: absolute;
    top: 50%;
    width: auto;
    padding: 16px;
    margin-top: -50px;
    color: white;
    font-weight: bold;
    font-size: 20px;
    transition: 0.6s ease;
    border-radius: 0 3px 3px 0;
    user-select: none;
    -webkit-user-select: none;
}

.next {right: 0; border-radius: 3px 0 0 3px;} /* Position the "next button" to the right */
.prev:hover, .next:hover {background-color: rgba(0, 0, 0, 0.8);} /* On hover, add a black background color with a little bit see-through */

.numbertext {
    color: #f2f2f2;
    font-size: 12px;
    padding: 8px 12px;
    position: absolute;
    top: 0;
}

.caption-container {
    text-align: center;
    background-color: black;
    padding: 2px 16px;
    color: white;
}

.modal-demo img {opacity: 0.6; width: 25%;}
.active, .modal-demo:hover {opacity: 1;}
.modal-img {transition: 0.3s; width: 100%; cursor: pointer;}
.modal-img:hover {box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);}
/* --------------- */


/* ----- GAMES ----- */
.games {display: flex; flex-wrap: wrap;}
.game {margin-right: 10px; border-bottom: 3px solid #fff;}
.game:hover {border-bottom: 3px solid #c4b0ff; cursor: pointer;}
.gametitle a {
    color: #000;
    text-align: center; 
    font-weight: normal; 
    text-decoration: none;
    font-size: 0.75em;
    font-family: pixelfont;
}
/* --------------- */


/* ----- MOBILE RESPONSIVE ----- */
@media (max-width: 1400px) {
    #statuscafe {height: auto;}
}

@media (max-width: 1200px) {
    .minirow {flex-direction: column;}
    #statuscafe, #blogbox, .col60, .col50, .col40, .col30 {width: 100%;}
    #statuscafe {margin: 10px auto 0px auto;}
    .games, .games:hover, .gametitle {
        flex-direction: column;
        width: 100%;
        margin: auto;
    }
}

@media (max-width: 700px) {
    .row, .minirow {flex-direction: column; margin: auto;}
    #header img {width: 100%;}
    .main100, .main85, .main65, .main60, .side35, .side25 {padding: 20px;}
    .col25, .col35 {width: 75%; margin: auto;}
    .game, .game:hover {border-bottom: #fff;}
    .modal-demo {display: none;}
    .modal-content {margin: auto;}
    .modal {z-index: 2;}
    .close {z-index: 1;}
    .sidenav {
      float: none;
      width: 100%; 
      border-right: none;
      border-bottom: 3px #945b38 solid;
    }
}
  
@media (max-width: 400px) {
    .navbar a, .footer a {float: none; width: 100%;}
}
/* --------------- */