/* Posts homepage styling for cards */
.cardstyle{
box-shadow: 1px 1px 15px lightgray;
min-height:445px;
}
/* Button for Cards */
.clickable:hover{
background-color: deepskyblue !important;
}
/* Changes query loop formatting */
@media (max-width: 760px) {
.queryloop-limit{
grid-template-columns: 1fr !important;
}}
/* Changes query loop formatting */
@media (max-width: 1170px) and (min-width: 761px) {
.queryloop-limit{
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}}
/* highlights content boxes with animation 43B7FF*/
.highlight1 {
background: none;
border-style: solid;
border-width: 2px;
border-color: white;
transition: border-color 1s, box-shadow 1s;
}
.highlight1:hover {
background: none;
border-style: solid;
border-color: #1A8FD8;
border-width: 2px;
box-shadow: 0 0 5px #1A8FD8;
}

/* Post animation, DO NOT USE SAME CLASS ON SAME PAGE */
/* hide1 is inside of the specific p element to hide it until someone hovers over the specific content */
.hide1 {
overflow: hidden;
max-height: 0;
opacity: 0;
transition: max-height 7s ease-in-out, opacity 7s ease-in-out;
border-bottom: 4px solid #388ac9;
}
/* hide1 hover is used to keep it active while someone hovers over the popout content */
.hide1:hover {
max-height: 500px;
opacity: 1;
}
/* unhide is put into the content that is related to the hidden content */
.unhide1:hover + .hide1 {
max-height: 500px;
opacity: 1;
transition: max-height 1s ease-in-out, opacity 1s ease-in-out !important;
}
/* hide2 is inside of the specific p element to hide it until someone hovers over the specific content */
.hide2 {
overflow: hidden;
max-height: 0;
opacity: 0;
transition: max-height 7s ease-in-out, opacity 7s ease-in-out;
border-bottom: 4px solid #388ac9;
}
/* hide2 hover is used to keep it active while someone hovers over the popout content */
.hide2:hover {
max-height: 500px;
opacity: 1;
}
/* unhide is put into the content that is related to the hidden content */
.unhide2:hover + .hide2 {
max-height: 500px;
opacity: 1;
transition: max-height 1s ease-in-out, opacity 1s ease-in-out !important;
}
/* hide3 is inside of the specific p element to hide it until someone hovers over the specific content */
.hide3 {
overflow: hidden;
max-height: 0;
opacity: 0;
transition: max-height 7s ease-in-out, opacity 7s ease-in-out;
border-bottom: 4px solid #388ac9;
}
/* hide3 hover is used to keep it active while someone hovers over the popout content */
.hide3:hover {
max-height: 500px;
opacity: 1;
}
/* unhide is put into the content that is related to the hidden content */
.unhide3:hover + .hide3 {
max-height: 500px;
opacity: 3;
transition: max-height 1s ease-in-out, opacity 1s ease-in-out !important;
}
/* hide4 is inside of the specific p element to hide it until someone hovers over the specific content */
.hide4 {
overflow: hidden;
max-height: 0;
opacity: 0;
transition: max-height 7s ease-in-out, opacity 7s ease-in-out;
border-bottom: 4px solid #388ac9;
}
/* hide4 hover is used to keep it active while someone hovers over the popout content */
.hide4:hover {
max-height: 500px;
opacity: 1;
}
/* unhide is put into the content that is related to the hidden content */
.unhide4:hover + .hide4 {
max-height: 500px;
opacity: 1;
transition: max-height 1s ease-in-out, opacity 1s ease-in-out !important;
}