/*================ MASTER =================*/

::selection {
background-color: silver;
}

body {
font-family: Helvetica, sans-serif;
font-size: 14.6px;
line-height: 1.2;
scroll-behavior: smooth;
background-color: white;
margin-bottom: 60px;
}

img {
width: 100%;
touch-action: manipulation;
-webkit-tap-highlight-color: transparent;
-webkit-user-drag: none;
-khtml-user-drag: none;
-moz-user-drag: none;
-o-user-drag: none;
user-drag: none;
margin: 0px;
}

.home {
display: block;
top: 20px;
left: 10px;
width: 20vw;
margin: 0;
padding: 0;
cursor: pointer;
}

.drawing {
display: inline-block;
width: 136px;
}

.icon {
display: inline-block;
width: 36px;
}

.logo {
margin-right: 30px;
width: 73px;
}

.logo:hover {
background-color: silver;
}

.blog {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-gap: 1.0rem 1.0rem;
}

#blog1 {
grid-column: 1;
}

#blog2 {
grid-column: 2;
}

#blog3 {
grid-column: 3;
}

#blog4 {
grid-column: 4;
}

.window {
margin: 100vh 20vh 20vh 20vh;
display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: 1.0rem 1.0rem;
}

.open {
display: block;
transform: rotate(180deg);
}	

.spin {
transform: rotate(0deg);
}

.open, .spin, .logo {
cursor: pointer;
}

.ground {
margin-top: 50vh;
bottom: 0px;
}

p {
margin: 0px;
}

a {
color: blue;
text-decoration: none;
cursor: pointer;
touch-action: manipulation;
-webkit-tap-highlight-color: transparent;
transition: all 200ms ease-in-out;
}

a:hover {
color: silver;
}

.blog img:hover {
filter: opacity(70%);
}

#active {
cursor: pointer;
}

#active:hover {
background-color: silver;
}

#mark {
background-color: silver;
}

#hex {
opacity: 0.3;
}

hr {
border-top: 1px dotted black;
border-bottom: none;
}

.expandable-text {
  position: relative;
  cursor: pointer; /* change cursor on click */
}

.initial-text {
  display: inline-block;
}

.hidden-text {
  display: none;
  font-size: inherit; /* inherit font size from parent */
  color: inherit; /* inherit text color from parent */
}

.slideshow-container {
    position: relative;
    width: 100%;
    max-width: 600px;
    margin: auto;
    padding-bottom: 20px;
}

.slideshow-image {
    display: none;
    width: 100%;
    cursor: pointer;
}

/*================ X =================*/

.slideshow-image:hover {
filter: opacity(70%);
}

.slideshow-image.active {
    display: block;
}

.text-content {
max-width: 600px;
margin: auto;
padding-bottom: 100px;
}

/*================ X =================*/


@media screen and (max-width: 820px) {

.slideshow-container, .text-content {
	max-width: 90vw;
}

.drawing {
width: 116px;
}

.blog, .window {
grid-template-columns: 1fr;
}

.window {
margin: 56vh 0vh 20vh 0vh;
}

#blog2, #blog3, #blog4 {
grid-column: 1;
}

}