@font-face{
    font-family:"gooper7-black";
    src:url("fonts/Gooper7-Black-Trial.otf") format("opentype");
    font-weight:bolder;
    font-style:normal;
}

@import url("https://use.typekit.net/snx8vlz.css");

body{
    position:relative;
    font-family:bilo, sans-serif;
    font-weight:600;
    font-style:normal;
    font-size:1.5rem;
    text-align:left;
    line-height:1.25;
    word-break:keep-all;
    cursor:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='50' height='60' style='fill:black;font-size:30px;'><text y='50%'>🖌</text></svg>") 16 0, auto;
    height:100%;
    color:#105099;
    background-color:#fef0c5;
}

h1{
    font-family:"gooper7-black";
    font-size:6rem;
    margin:0.25em;
}

p{
    font-family: bilo, sans-serif;
    font-size:2rem;
    margin-left:0.5em;
    margin-right:0.5em;
    margin-bottom:1em;
}

.container{
    display:flex;
    flex-flow:row wrap;
    width:100%;
    height:100%;
    align-self:center;
    align-content:center;
    justify-content:space-evenly;
    margin:0;
    column-gap:0.5%;
    row-gap:0.5%;
}
  
.container-item{
    flex:49.5%;
    position:relative;
}

.container-item img.image-hover{
    position:absolute;
    top:0;
    right:0;
    left:0;
    bottom:0;
    object-fit:contain;
    opacity:0;
    transition:opacity .3s;
    /* border-radius:2em; */
}

.container-item:hover img.image-hover{
    opacity:1;
    /* border-radius:2em; */
}

img{
    width:100%;
    padding:0;
}

/* img:hover{
    border-radius:2em;
} */

::-moz-selection{
    background:#dcf0cf;
}
  
::selection{
    background:#dcf0cf;
}

a:link{
    text-decoration:none;
    color:inherit;
}

a:hover{
    color:#893232;
    text-decoration:underline;
    cursor:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='90' height='108' style='fill:black;font-size:54px;'><text y='50%'>🖌</text></svg>") 16 0, auto;
}
  
a:active{
    color:#893232;
}

a:visited{
    color:inherit;
}

/* original code: 3D Text (scss) - animated by Sarah Fossheim https://codepen.io/fossheim/pen/ExjdLRp */

.bounce span{
    position:relative;
    letter-spacing:-0.15em;
    color:#de1774;
    animation:scatter 1.75s infinite;
}
  
.bounce span:nth-child(2n){
    color:#105099;
    animation-delay:0.3s;
}
  
.bounce span:nth-child(3n){
    color:#ffd902;
    animation-delay:0.15s;
}
  
.bounce span:nth-child(5n){
    color:#17de81;
    animation-delay:0.4s;
}
  
.bounce span:nth-child(7n){
    color:#de8117;
    animation-delay:0.25s;
}
  
@keyframes scatter{
    0%{
      top:0;
    }
    50%{
      top:-25px;
    }
    100%{
      top:0;
    }
}

.popupwindow{
	position:fixed;
	z-index:1;
	top:7.5em;
	right:7.5em;
	bottom:7.5em;
	left:7.5em;
	background:#fef0c5;
	width:50%;
	height:max-content;
    transition:opacity .5s;
	visibility:hidden;
	opacity:0;
    border-radius:2em;
    padding:2em;
}

.popupwindow:target{
	visibility:visible;
	opacity:1;
}

.window-close{
    position:absolute;
    top:1rem;
    right:1rem;
    color:#893232;
    padding:1em;
}

.window-close:hover{
    text-decoration:none;
}

@media screen and (max-width: 800px){
    .container{
        flex:1;
        order:1;
        flex-direction:column;
    }
    h1{
        font-size:3rem;
    }
    p{
        font-size:1.25rem;
    }
    .popupwindow{
        top:5em;
        right:5em;
        bottom:5em;
        left:5em;
        width:50%;
        height:max-content;
    }
}