@font-face {
    font-family: 'IndieFlower';
    src: url('fonts/IndieFlower-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: sway;
}

@font-face {
    font-family: 'Roundex';
    src: url('fonts/RoundexRegular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: sway;
}

@font-face {
    font-family: 'Borel';
    src: url('fonts/Borel-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: sway;
}

* {
    box-sizing: border-box;
}
body {
    margin: 0;
    padding: 0;
    height: 100dvh;
    width: 100dvw;
    font-family: 'IndieFlower', sans-serif;
}

button {
    font-family: inherit;
    font-size: 1rem;
}

.btn-effects {
    transition: all ease-in .1s;
    &:hover {
	transform: scale(1.06);
    }
    &:active {
	transform: scale(.96);
    }

}

.boxshadow-effects {
    transition: all ease-in .1s;
    box-shadow: 2px 2px 0px 0px #222;
	&:hover {
	    box-shadow: 2px 2px 0px 0px #111;
	}
	&:active {
	    box-shadow: 2px 2px 0px 0px black;
	}
    
}

.body-container {
    width: 100dvw;
    height: 100dvh;
    display: flex;
    flex-direction: column;
    background-color: #6495eda3;
}

.desktop-menubar {
    display: flex;
    flex-direction: row;
    justify-content: center;
    background-color: pink;
    border-bottom: 3px double black;
    padding: 0 1rem;
    .desktop-menubar-limit-width {
	display: flex;
	flex-direction: row;
	max-width: 40rem;
	width: 100%;
	justify-content: space-between;
    }
    .desktop-icon-group {
	display: flex;
	flex-direction: row;
    }
    #desktop-go-icon {
	font-size: 1.5rem;
	background-color: #a2ffa2;
	&:hover { background-color: mediumspringgreen;}
	&:active { background-color: springgreen;}
    }
    .desktop-icon {
	height: 2rem;
	width: 2rem;

	padding: .25rem;
	margin: .5rem;
	border: 1px solid black;
	background-color: #c9e8ff;
	cursor: pointer;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	box-shadow: 2px 2px 0px 0px #222;
	&:hover {
	    background-color: cornflowerblue;
	    box-shadow: 2px 2px 0px 0px #111;
	}
	&:active {
	    background-color: #307aff;
	    box-shadow: 2px 2px 0px 0px black;
	}
    }
}

.hide-me {
    transition: all ease-in-out .5s !important;
    transform: scale(0.0) !important;
    opacity: 0 !important;
}
.upsize-me {
    transition: all ease-in-out .2s;
    transform: scale(1.1);
}

.spin-me {
    animation-name: spin;
    animation-duration: 200ms;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

@keyframes spin {
    from {
      transform: rotate(0deg);
    }
    to {
      transform: rotate(360deg);
    }
  }

.skadoosh-left-a-little {
    transition: all ease .5s;
    transform: translateX(-20rem);
}

.skadoosh-right {
    transition: all ease 1s;
    transform: translateX(200rem);    
}

#main-content {
    padding: 2rem;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    overflow-y: scroll;
}

#welcome, .dialog {
    margin: .25rem;
    opacity: 1;
    position: relative;
    border: 2px solid black;
    max-width: 100%;
    width: 20rem;
    display: flex;
    flex-direction: column;
    flex-shrink: 1;
    background-color: white;
    box-shadow: 5px 5px 0px 0px #1E1E1E;
    transition: all ease-in-out .4s;
    .titlebar {
	/* position: absolute; */
	/* top: 0; */
	/* right: 0; */
	width: 100%;
	padding: .25rem;
	background-color: cornflowerblue;
	border-bottom: 2px outset black;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	padding-left: 1rem;
	align-items: center;
	.titlebar-title {
	    font-weight: bold;
	    font-family: IndieFlower, serif;
	}
	.titlebar-button {
	    width: 1.5rem;
	    height: 1.5rem;
	    background: lightpink;
	    border: 2px groove black;
	    cursor: pointer;
	    display: flex;
	    flex-direction: row;
	    align-items: center;
	    justify-content: center;
	    &:active, &:hover {
		background: hotpink;
	    }
	}
    }
    .dialog-content {
	font-family: Borel, serif;
	font-size: .8rem;
	line-height: .8rem;
    }
    #welcome-ok-container, .dialog-content-container {
	justify-content: space-between;
	align-items: flex-end;
	padding: 1rem;
    }
    #welcome-ok, .ok-button {
	font-family: IndieFlower, sans-serif;
	margin-left: 1rem;
	padding: .25rem .75rem;
	background-color: lightgoldenrodyellow;
	border-radius: 0px;
	border: 1px solid black;
	cursor: pointer;
	white-space: nowrap;
    }
    #welcome-ok:active, #welcome-ok:hover, .ok-button:active, .ok-button:hover {
	background-color: mediumspringgreen;
    }
}

.flex {
    display: flex;
    flex-direction: column;
}

.flex-row {
    display: flex;
    flex-direction: row;
}

.jc-space-between {
    justify-content: space-between;
}
.ai-flex-start {
    align-items: flex-start;
}