@import url('https://fonts.googleapis.com/css2?family=Arapey:ital@0;1&family=Open+Sans&display=swap');




::-webkit-scrollbar {     width: 15px; } ::-webkit-scrollbar-thumb { background: rgb(44,41,88);  background: linear-gradient(180deg, rgba(44,41,88,1) 0%, rgba(55,57,118,1) 35%, rgba(89,101,185,1) 100%); }   ::-webkit-scrollbar-track {background: #000} 

body {
    background: url(../linedpaper.png);
    font-family: 'Open Sans', sans-serif;

    font-size: 18px;

    
}
 .sidebar {
    width: 40rem;
    background:url(../sideimg.jpg);
    background-size: cover;
    padding-top: 10%;
    background-position: center;
    position: fixed;
    top: 0; 
    height: 100%;
}
.container-fluid { margin-left: 41.5rem; margin-right: 1rem;} 
.container {max-width: 1400px;}
.box {background: #fff; border: 2px solid #5b67bb; border-radius: 10px; padding: 3rem 3rem 2rem 3rem;}
.nav-link { background: rgb(000, 000, 000, 0.2); display: inline-block; margin: 0.417rem; padding: 2px 7px; letter-spacing:2px; font-family:'Times New Roman', Times, serif; font-style: italic; color: #fff; font-family: 'Arapey', serif;
}
.nav-link:hover, .nav-link:focus {color: #fff; background: rgb(000, 000, 000, 0.4);}
h1.title {font-family: 'Arapey', serif; font-style: italic;   font-size: 2rem; letter-spacing:5px; color: #fff; text-shadow: 2px 2px 3px #000; font-weight: 600;}
main h1 {font-family: 'Arapey', serif; font-style: italic;    font-size: 3rem; letter-spacing:5px; font-weight: 600;  margin-bottom: -18px; margin-left: 15px;     text-shadow: 
    1px 1px 0px white, 
    2px 2px 0px white, 
    3px 3px 0px white, 
    4px 4px 0px white,
    4px 4px 0px white,
    5px 5px 0px white,
    6px 6px 0px #ccc,
    2px 2px 10px rgb(148, 148, 148);}
h1 span {background:#fff; padding: 0px 10px; }
main h2 {font-family: 'Arapey', serif; font-style: italic;    font-size: 1.5rem; letter-spacing:5px; font-weight: 600;}
a {
  color: #ca9bff;
  text-decoration: none;
}
.buttons img { background: #dce2ff; padding: 9px; border: 1px solid #5b67bb; margin: 8px; border-radius: 3px;}
.buttons img:hover { background:url(../btnhvr.jpg); box-shadow: 0 1rem 1rem rgba(0,0,0,.275)!important; padding: 10px; border: 0px solid #5b67bb;}
.show_owned_where_you_are, .show_joined_intro_list {display: none}
.show_joined_all_group_by_cats, .show_joined_where_you_are {font-family: 'Arapey', serif; font-style: italic; letter-spacing:5px; margin-top:2rem;}


.btn-primary {
  color: #fff;
  background-color: #5b67bb;
  border-color: #5b67bb;
  font-family: 'Arapey', serif;
}

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

@media screen and (max-width: 1100px) {
    .sidebar {
      width: 35rem;

    }
    div.container-fluid {margin-left: 35rem;}
}

@media screen and (max-width: 920px) {
    .sidebar {
      width: 20rem;

    }
    div.container-fluid {margin-left: 20rem;}
}

@media screen and (max-width: 720px) {
    .sidebar {
      width: 15rem;

    }
    div.container-fluid {margin-left: 15rem;}
}

@media screen and (max-width: 540px) {
    .sidebar {
      width: 100%;
      position: fixed;
      height: auto;
      padding-top: 3rem;
    }
    div.container-fluid {margin-left: 0rem; margin-top:180px; }
}