/* ****^^^^ Styles for Diary ^^^^**** */
/*            March 2024              */


@font-face {
	font-family: Montserrat;
	src: url(fonts/static/Montserrat-Regular.ttf);
}
@font-face {
	font-family: Open_Sans;
	src: url(fonts/Open_Sans/OpenSans-VariableFont_wdth,wght.ttf);
}
body, textarea {
    font-size: 14px;
    font-family: "Open_Sans", Montserrat, Perpetua, Georgia, Arial, Garamond, Sans-serif;
    text-align: justify;
}

/* COLOUR */

.links p {
   background-color: #00D2FF;
}
.clr-main {
  color: #00D2FF;
}
.btn-main {
  background-color:#00D2FF;
  color: white;
}
h3, label {
  color: #606060;
}
.btn-main:hover {
  background-color: FFF;
  color:#00D2FF;
  border-color: #00D2FF;
  border-width: 2px;
  font-weight: bold;
}
.links p, .links a {
  color:#FFF;
  text-decoration: none;
}

/* MAIN */

.main { /* contains all rows and columns */
  padding:0 .5vw;
}
.main p{
    border: solid lightGray 1px;
    padding: .5vw;
    font-size: 13px;
}
.columns { 
  padding:0 .15vw;
  cursor: pointer;
}
.main .portrait {
    border-radius:50%;
}
.portraits {  /* Hide the top protrait bar unless screen is wide */
    display: none;
}
.portraits img, .noShow img {
  border-radius: 50%;
}
 
.reading { /* reading box on index.php */
  height: 3.5rem;
  overflow:auto;
}
.showreading {  /* reading list on reading.php */
  font-size: 16px;
}

.pointer {
  cursor: pointer;
}
/* Login Form */
.form-label {
    font-size: 22px;
}

/* NAV BAR */
.links .col-1{
  text-align: center;
  margin: 0 .5vw;
}
.links p{ /* changes at 1200px */
  border-radius: 50%;
  width: 8vw;
  height: 8vw;
  font-size: 2vw;
  padding-top: 2vw;
} 
.noShow {  /* Hide the column included portraits unless columns are stacked */
    display:none;
}
/* ^^^ Image on login page ^^^ */

.bruce {
  min-width:100%;
}
/* ^^ 1200px and more ^^ */
@media only screen and (min-width: 1200px) {
  .portraits {
    display:block;
  }  
  .col-xxl-2 {
    width: 20%;
  }
  .entry {
    height: 600px;
    overflow:auto;
    padding-right: 6px;
  } 
  .links p, .links a p{
    width: 5vw;
    height: 5vw;
    font-size: 1.25vw;
    padding-top: 1.5vw;
  }
  .links .col-1{
    margin: 0 0;
  }
}
/* ^^ 992px and more ^^ */
@media only screen and (min-width: 992px){
  .form-group {
    max-width: 50%;
  }
}
/* ^^ 1200px and less^^ */

@media only screen and (max-width: 1200px){
    .noShow {
        display: block;
        margin-bottom: 2vw;
    }
    .main {
      padding: 0 1vw;
    }
    .main p {
      font-size: 16px;
    }
    .reading {
      height: 4rem;
    }
}


/* ^^^ SEARCH ^^^ */
#result {
  display:none;
}
#search_results {
  font-size: 16px;
}