h2 {
margin:3.7vh auto 1.7vh;
}

h4 {
text-shadow:0em -0.1em 0.3em #170737;
}

.row {
max-width:83vw;
max-height:69vh;
margin:auto;
display:flex;
}

.column {
position:relative;
float:left;
margin:3vh 1.7vh;
max-height:100%;
width:21vw;
border:0.47em #9D7B53;
font-size:1.3em;
overflow:hidden;
transition:border-color 0.7s,background-color 0.7s;
}

.column:hover {
border-color:#FEF1F0 !important;
}

.column img {
position:absolute;
top:0;
margin:0;
object-fit:cover;
max-height:100%;
visibility:visible;
opacity:1;
transition:visibility 0.49s,opacity 0.49s ease-out;
}

.column:hover img {
visibility:hidden;
opacity:0;
}

#diary {
border-radius:1.3em 2.1em 0.7em 2.1em;
border-style:inset;
border-color:#12B082;
}

#diary:hover {
background-color:#12B082;
}

#tunes {
border-radius:2.1em 0.7em 1.3em 0.7em;
border-style:ridge;
border-color:#31A1ED;
}

#tunes:hover {
background-color:#31A1ED;
}

#tales {
border-radius:0.7em 2.1em 0.7em 1.3em;
border-style:groove;
border-color:#FCDB3B;
}

#tales:hover {
background-color:#FCDB3B;
}

#rants {
border-radius:2.1em 1.3em 2.1em 0.7em;
border-style:outset;
border-color:#FF5E5E;
}

#rants:hover {
background-color:#FF5E5E;
}

h4 {
margin:0.9em auto;
background-color:#37074963;
padding:0.1em 2.3em 0.2em;
max-width:fit-content;
border-radius:.7em;
}

ul {
display:block;
position:relative;
max-width:99%;
}

a li {
color:#F3F1F0;
text-decoration:none;
}

li {
max-width:93%;
text-align:center;
list-style:none;
padding:0.3em 0 0.1em;
background-color:#37074963;
border-bottom:solid 0.07em;
transition:border-radius 0.3s ease-out,max-width 0.3s ease-in;
}

#diary li {
border-color:#0B6F52;
}

#tunes li {
border-color:#1F6595;
}

#tales li {
border-color:#9F8A25;
}

#rants li {
border-color:#A13B3B;
}

li:hover {
border-radius:0.7em 0 0 0.7em;
max-width:88%;
text-shadow:0 0 0.7em #070307;
}

@media only screen and (orientation:portrait) {

   h2 {
   max-width:73vw;
   margin:2.7vh auto 0;
   font-size:1.7em;
   }

   .row {
   flex-direction:column;
   max-height:100%;
   margin:2.3vh auto 2.3vh;
   }   

   .column {
   margin:1.3vh auto;
   width:53vw;
   }

   #diary {
   border-radius:2.1em 2.1em 0.7em 0.7em;
   }

   #tunes {
   border-radius:0.7em 0.7em 1.3em 1.3em;
   }

   #tales {
   border-radius:1.3em 1.3em 0.7em 0.7em;
   }

   #rants {
   border-radius:0.7em 0.7em 2.1em 2.1em;
   }
}