css.css

:root {
	--dutch-white: #f0e3c0;
	--dark-slate-gray: #17595b;
	--flax: #eed47c;
	--charcoal: rgb(46, 81, 102);
	--oxford-blue: #00132e;
	--eerie-black: rgb(18, 30, 20);
	--gunmetal: rgb(10, 39, 46);
}

body {
	background: var(--oxford-blue);
	line-height: normal !important;
}

.wp-block-query-title {
	display: none !important;
}

/* ----------Header---------- */

.headerparentdiv {
	border-radius: 20px;
	margin: 10px;
	background: var(--oxford-blue);
	display: flex;
	align-content: center;
	justify-content: center;
	align-items: center;
	flex-direction: column;
}

.headerlogoimagecont {
    margin-top: 10px;
}

.pagelinks {
	text-decoration: none;
	font-size: 20px;
}

.headerlogoimg {
	background-color: transparent;
}

.headertopcont {
	display: flex;
	align-content: center;
	justify-content: space-between;
	align-items: center;
	width: 100%;
	flex-wrap: nowrap;
	flex-direction: row;
}

/* Menu */
.menu {
	display: none;
	transition: all 300ms ease-in-out;
}

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

	/* Do this if window is width or less */
	.menu {
		margin: 10px;
        padding-left: 10px;
        padding-top: 50px;
        display: block;
        margin-right: auto;
        transition: all 300ms ease-in-out;
	}
}

.ham {
	user-select: none;
	border: 2px solid #e6d5a0;
	border-radius: 50%;
	transition: border-radius 300ms ease-in-out;
}

.hamRotate.active {
	transform: rotate(45deg);
}

.line {
	fill: none;
	transition: stroke-dasharray 400ms, stroke-dashoffset 400ms;
	stroke: #e6d5a0;
	stroke-width: 5.5;
	stroke-linecap: round;
}

.ham1 .top {
	stroke-dasharray: 40 139;
}

.ham1 .bottom {
	stroke-dasharray: 40 180;
}

.ham1.active .top {
	stroke-dashoffset: -98px;
}

.ham1.active .bottom {
	stroke-dashoffset: -138px;
}

.pagecontainer {
	display: flex;
	flex-direction: row;
	align-content: center;
	align-items: center;
	flex-wrap: nowrap;
	border-radius: 20px;
	background: var(--oxford-blue);
	width: 100%;
	justify-content: space-evenly;
	transition: all 300ms ease-in-out;
}

#pagecontainercontainer {
	background: var(--flax);
	border-radius: 20px;
	padding: 2px;
	width: 100%;
}

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

	/* Do this if window is width or less */
	.pagecontainer {
		display: none;
		transition: all 300ms ease-in-out;
	}
}

/* Register Button */
.regbtn {
	font-size: 20px;
	background-color: var(--dutch-white);
	color: var(--oxford-blue);
	padding: 10px;
	border-radius: 30px;
	margin: 10px;
}

.regbutton {
	margin-left: auto;
}

/* Sidebar */
.dispnone {
	width: 0 !important;
	left: -200px !important;
}

#sidebar {
	height: 100vh;
	width: 100vw;
	position: fixed;
	display: flex;
	z-index: 5;
	top: 0;
	left: 0;
	background-color: var(--dark-slate-gray);
	transition: all 1000ms ease-in-out;
	flex-direction: column;
	align-content: center;
	justify-content: flex-start;
	align-items: center;
}

.lineg {
	fill: none;
	transition: stroke-dasharray 400ms, stroke-dashoffset 400ms;
	stroke: #e6d5a0;
	stroke-width: 5.5;
	stroke-linecap: round;
}

.hamg {
	user-select: none;
	border: 2px solid #e6d5a0;
	border-radius: 50%;
	transition: border-radius 300ms ease-in-out;
}

.sblinks {
	color: #e6d5a0;
	font-size: 30px;
	text-decoration: none;
}

.sbcont {
	display: flex;
	flex-direction: column;
	height: 80%;
	align-content: center;
	align-items: center;
	justify-content: space-evenly;
}

/* ----------Footer---------- */

.footerparent {
	background: var(--oxford-blue);
	border-radius: 20px;
	padding: 10px;
}

.footerparentcontainer {
	background: var(--flax);
	border-radius: 20px;
	padding: 2px;
	width: 100%;
}

.site-footer {
	border-radius: 20px;
	margin: 10px;
	background: var(--oxford-blue);
	display: flex;
	align-content: center;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	padding-bottom: 20px;
}

.footerlink {
	text-decoration: none;
}

.footerlinkcont {
	display: flex;
	flex-direction: column;
	align-content: center;
	justify-content: center;
	align-items: center;
}

div#social {
	display: flex;
	flex-direction: row;
	align-content: center;
	justify-content: center;
	align-items: center;
	margin: 10px;
}

.footerhead {
	text-decoration: underline;
}

.iframemap {
	border-radius: 200px;
}

.social {
	margin: 10px;
}

div#mapdiv {
	display: flex;
	align-content: center;
	justify-content: center;
	align-items: center;
	flex-direction: row;
	flex-wrap: wrap;
}

.maptext {
	margin: 20px;
}

/* ----------Divider---------- */


.divider {
	max-width: 20% !important;
}

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

	/* Do this if window is width or less */
	.divider {
		max-width: 40% !important;
	}
}

/* ----------Store---------- */

.wc-block-grid__products {
	align-content: center;
	justify-content: center;
	align-items: center;
}

/* ----------Under Construction---------- */

.uccont {
    display: none;
    align-content: center;
    justify-content: center;
    align-items: center;
    background: var(--oxford-blue);
    height: 100vh;
    z-index: 1000;
    width: 100vw;
    position: fixed;
    left: 0;
    top: 0;
    flex-direction: column;
}

.uctext {
	padding: 10px;
	text-align: center;
}

/* ----------Preloader---------- */


.preloader {
	top: 0;
	left: 0;
	position: fixed;
	background: var(--oxford-blue);
	height: 100vh;
	z-index: 99999;
	text-align: center;
	width: 100vw;
	justify-content: center;
}

.fadeout {
	animation: fo 1s ease 3.5s forwards;
}

@keyframes fo {
	0% {
		opacity: 100%;
	}

	100% {
		opacity: 0%;
		display: none;
	}
}

.container {
	display: inline-block;
	position: relative;
	top: 35vh;
	width: 120px;
	height: 100px;
	overflow: hidden;
}

.object {
	position: inherit;
	top: -246px;
	left: 30px;
	z-index: -10;
	transform: rotate(-5deg);
	animation: sail 2s infinite linear;
}

.boat {
	width: 50px;
	height: 40px;
	background-color: var(--flax);
	transform: perspective(50px) rotateX(-60deg);
}

.flag {
	background-color: var(--flax);
	width: 20px;
	height: 15px;
	transform: rotate(70deg) skew(45deg);
	position: relative;
	top: -43px;
	left: 13px;
}

.wave {
	position: relative;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	border: 4px solid transparent;
}

#wave1,
#wave3,
#wave5,
#wave7 {
	background-color: transparent;
	border-top: 4px solid #f0e3c0;
	animation: flow 1s infinite linear;
}

#wave2,
#wave4,
#wave6,
#wave8 {
	border-bottom: 4px solid #f0e3c0;
	animation: flow 1s infinite linear;
}

#wave1 {
	top: 76px;
	left: -22px;
}

#wave2 {
	z-index: 1;
	top: 12px;
}

#wave3 {
	top: 0px;
	left: 22px;
}

#wave4 {
	z-index: 2;
	top: -64px;
	left: 44px;
}

#wave5 {
	top: -76px;
	left: 66px;
}

#wave6 {
	z-index: 3;
	top: -140px;
	left: 88px;
}

#wave7 {
	top: -152px;
	left: 110px;
}

#wave8 {
	top: -216px;
	left: 132px;
}

@keyframes flow {
	0% {
		transform: translate(0px);
	}

	100% {
		transform: translate(-44px);
	}
}

@keyframes sail {
	0% {
		transform: rotate(-5deg);
	}

	50% {
		transform: rotate(5deg);
	}
}

/* ----------Definitions---------- */

.rfont {
	font-family: Randi Font;
}

.sdfont {
	font-family: Sailors Dairy;
}

.msrfont {
	font-family: Mason Sans Regular;
}

.normaltxt {
	font-size: 20px;
	margin: 5%;
	line-height: 35px;
}

.smoltxt {
	font-size: 15px;
	margin: 5%;
	line-height: 25px;
}

.hidden {
	visibility: hidden;
}

.textsize20 {
	font-size: 20px;
}

.textsize30 {
	font-size: 30px;
}

.textsize40 {
	font-size: 40px;
}

.textsize25 {
	font-size: 25px;
}

.textsize50 {
	font-size: 50px;
}

.textsize15 {
	font-size: 15px;
}

/* ----------Button Mods---------- */

.wp-element-button {
	border-radius: 30px;
	font-family: 'Sailors Dairy' !important;
	font-size: 20px !important;
}

/* ----------Checkout---------- */

.col2-set {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.col-2 {
	display: none;
}

/* ----------Demo Banner---------- */

p.demo_store {
    display: none !important;
}

/* ----------Other General Colors---------- */

h1 {
	color: var(--flax);
}