.body, html {
    height: 100%;
    background-color: black;
    background-position: center;
    background-size: cover;
    font-family: 'Oswald', sans-serif;
    letter-spacing: 1.5px;
    word-spacing: 2.5px;
    font-stretch: condensed;
    font-size: 14px;
    font-kerning: normal;
    font-weight: 100;
}

.wrapper {
    display: grid;
    position: center;
    grid-template-columns: 100px minmax(520px,1080px) 100px;
    grid-template-rows: 50px 50px;
    justify-content: center;
    margin: auto;
    margin-bottom: -80%%;
    grid-column-gap: 0%;
    grid-row-gap: 0%;
}

.topimage {
    width: auto;
    height: auto;
    grid-column-start: 1;
    grid-column-end: 4;
    grid-row-start: 1;
    grid-row-end: 4;
    font-size: 6vw;
}

.topimage p {
    color: #f2f2f2;
    font-family: 'Oswald', sans-serif;
    font-style: normal;
    font-weight: 100;
    font-size: 4vw;
}

.topimage h1 {
    color: #f2f2f2;
    font-family: 'Oswald', sans-serif;
    font-style: normal;
    font-weight: 100;
    font-size: 6vw;
}

/* Add a black background color to the top navigation */
.topnav {
    grid-column-start: 1;
    grid-column-end: 4;
    z-index: 1;
    text-shadow: 2px 2px 3px black;
    outline-style: solid;
    outline-color: black;
    outline-width: 1px;
    margin-bottom: 1px;
    background-image: url(nav2.webp);
    background-size: cover;
    text-align: center;
    align-self: auto;
    position: relative;
    background-color: #333;
    overflow: auto;
    box-shadow:
    0px 0px 10px 0px black,
    inset 0 0 10px 0px black;
}

.topnav div {
    position: inherit;
    display: inline-block;
    color: #f2f2f2;
    text-align: center;
    object-position: center;
    text-decoration: none;
    font-size: 12px;
    font-weight: 100;
    letter-spacing: 3px;
    text-transform: uppercase;
}

/* Style the links inside the navigation bar */
.topnav a {
    position: inherit;
    z-index: 3;
    display: inline-block;
    color: #f2f2f2;
    text-align: center;
    object-position: center;
    text-decoration: none;
    font-size: 12px;
    font-weight: 100;
    letter-spacing: 3px;
    text-transform: uppercase;
    transition: 0.6s;
}

/* Change the color of links on hover */
.topnav a:hover {
    background-color: rgba(196, 196, 196, 0.226);
    opacity: 1;
    z-index: 3;
    background-blend-mode: lighten;
    width: auto;
    text-shadow: 0 0 10px 5px black;
    animation-name: navhi;
    animation-duration: 0.2s;
    animation-direction: alternate;
    animation-iteration-count: 2;
    color: rgb(148, 148, 148);
}

.topnav a.vertline{
padding: 0px 0px;
z-index: 2;
position: relative;
top: 8px;
border-left: 1px solid white;
width: 1px;
height: 25px;
padding: 0px 0px;
margin-top: 0px;
box-shadow: 0 0 10px 2px black;
}

.topnav a.tab {
    padding: 10px 10px;
}

.topnav a.tab:hover {
    background-size: cover;
    background-image: (to right,  rgba(0,0,0,0) 0%,rgba(147,147,147,1) 50%,rgba(0,0,0,0) 100%);
    animation-name: navhi;
    animation-duration: 0.15s;
    animation-direction: alternate;
    animation-iteration-count: 2;
}

/* Add a color to the active/current link */
.topnav a.active {
    background-image: -webkit-linear-gradient(center, rgba(0, 0, 0, 0) 20%,rgba(221, 221, 221, 0.3) 50%);
    color: white;
    background-blend-mode: lighten;
    padding: 10px 10px;
}

.maintext {
background-size: 1280px;
padding: 20px;    
text-align: auto;
padding-left: 2%;
padding-right: 2%;
background-color: #1f1f1f;
color: white;
grid-column-start: 1;
grid-column-end: 4;
text-shadow: 2px 2px 3px black;
outline-style: solid;
outline-color: black;
outline-width: 1px;
--box-shadow-color: rgb(0, 0, 0);
box-shadow: 0px 0px 10px 0px var(--box-shadow-color),
inset 0 0 10px 0px var(--box-shadow-color);
border-radius: 10px;
}

.maintext p {
line-height: 21px;
font-family: 'Oswald', sans-serif;
font-weight: 100;
margin: 10px 0px;
text-indent: 14px;
font-size: medium;
}

.maintext ul li {
line-height: 21px;
font-family: 'Oswald', sans-serif;
font-weight: 100;
margin: 10px 0px;
text-indent: 14px;
font-size: medium;
}

.maintext ul {
font-size: medium;
}

.maintext h1 {
margin: 0px 0px;
font-family: 'Tulpen One', cursive;
font-size: -webkit-xxx-large;
font-weight: 400;
letter-spacing: 3px;
word-spacing: 6px;
font-family: "Bebas Neue", sans-serif;
font-weight: 400;
font-style: normal;
text-transform: uppercase;
font-stretch: ultra-condensed;
text-shadow: 4px 4px 4px black;
}

.maintext h2 {
  font-size: xx-large;
  color: white;
}

.maintext h3 {
  font-size: x-large;
  color: white;
}

.maintext img {
    max-width: 100%;
    max-height: 100%;
    height: auto;
    width: auto;
    object-fit: contain;
    margin-inline: 0%;
    -ms-grid-column: auto;
}

.gallery img {
    max-width: 100%;
    max-height: 100%;
    height: auto;
    width: auto;
    object-fit: contain;
}

.aligncenter {
background-image: linear-gradient(to right,rgba(0, 0, 0, 0.404),white,rgba(0, 0, 0, 0.404));
filter: blur(0.5px);
box-shadow: 0 0 10px 1px black;
}

.dividerline1 {
background-color: white;
}

.sidebar button {
background-color: #333;
background-image: linear-gradient(rgba(221, 221, 221, 0.555), #333);
color: white;
--text-shadow-color: rgb(0, 0, 0);
text-shadow: 2px 2px 3px var(--text-shadow-color);
padding: 5px 14px;
border-radius: 4px;
border: 2px solid  -webkit-radial-gradient(circle, white, black)#ddd;
--box-shadow-color: rgb(0, 0, 0);
box-shadow: 1px 1px 10px 2px var(--box-shadow-color),
inset 0px 0px 2px 0px,
inset -1px -1px 5px 0px var(--box-shadow-color);
}

.sidebar button:hover {
background-color: rgba(221, 221, 221, 0.747);
color: white;
padding: 5px 14px;
border-radius: 4px;
border: 2px solid #ddd ;
}

.sidebar {
text-align: center;
padding-top: 10%;
background-color: #333;
background-size: 1280px;
color: #ddd;
text-shadow: 2px 2px 3px black;
outline-style: solid;
outline-color: black;
outline-width: 1px;
--box-shadow-color: rgb(0, 0, 0);
box-shadow: 0px 0px 10px var(--box-shadow-color),
inset 0 0 10px 0px var(--box-shadow-color);
}

.footer {
text-align: center;
background-color: black;
background-size: 1280px;
color: #ddd;
grid-column-start: 1;
grid-column-end: 4;
text-shadow: 2px 2px 3px black;
outline-style: solid;
outline-color: black;
outline-width: 1px;
--box-shadow-color: rgb(0, 0, 0);
box-shadow: 0px 0px 10px var(--box-shadow-color),
inset 0 0 10px 0px var(--box-shadow-color);
}

.dividerfoot {
text-align: center;
position: relative;
background-image: linear-gradient(to right,rgba(0, 0, 0, 0.404),white,rgba(0, 0, 0, 0.404));
filter: blur(0.5px);
box-shadow: 0 0 10px 1px black;
}

.spacer {
    padding-top: 5vh;
}

/* The Modal (background) */
.modal {
  display: none;
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgb(0,0,0);
  background-color: rgba(0,0,0,0.9);
}

/* Modal Content (image) */
.modal-content {
  position: absolute;
  top: 50%;
  left: 50%;
  display: block;
  width: auto;
  max-width: 105vw;
  max-height: 105vh;
  object-fit: contain;
}

/* Caption of Modal Image */
#caption {
  margin: auto;
  display: block;
  width: 80%;
  max-width: 700px;
  text-align: center;
  color: #ccc;
  padding: 10px 0;
  height: 150px;
}

.modal-content, #caption {  
  animation-name: zoom;
  animation-duration: 0.6s;
  animation-fill-mode: forwards;
}

/*  Dynamic zooming scale adjutment   */
:root {
  --zoom-scale: 1.8;
  --orientation-multiplier: 1;
}

/* Mobile device Scale  */
@media only screen and (max-width: 500px) {
	:root {
	    --zoom-scale: 1.25;
	}

}

/* Mobile device Scale  */
@media only screen and (max-width: 300px) {
  :root {
    --zoom-scale: 1.10;
  }
}

/* 4K monitor scale */
@media only screen and (min-width: 3840px) {
  :root {
    --zoom-scale: 2.0;
  }
}


@keyframes zoom {
  from {transform: translate(-50%, -50%) scale(0.1);}
  to {transform: translate(-50%, -50%) scale(var(--zoom-scale));}
}

.close {
  position: absolute;
  top: 15px;
  right: 35px;
  color: #f1f1f1;
  font-size: 40px;
  font-weight: bold;
  transition: 0.3s;
}

.close:hover,
.close:focus {
  color: #bbb;
  text-decoration: none;
  cursor: pointer;
}

@media only screen and (max-width: 700px){
  .modal-content {
    width: 100%;
  }
}

.image-row {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: none;
    gap: 0px;
    margin: 20px 0;
    width: 100%;
}

.image-row img {
	-webkit-appearance: none;
    flex: 1;
    -webkit-flex: 1;
    max-width: 100%;
    max-height: 400px;
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: 10px;
}

@media (min-width: 768px) {
    .image-row img {
        max-height: 45
        0px;
    }
}

.image-row figure {
	-webkit-appearance: none;
     display: flex;
    flex-direction: column;
    align-items: center;
}

.image-row figcaption {
    text-align: center;
    color: #ccc;
    font-family: 'Oswald', sans-serif;
    font-size: medium;
    font-weight: 100;
    margin-top: 5px;
    max-width: 100%;
}

.image-row-dresser {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: none;
    gap: 00px;
    margin: 20px 0;
    width: 100%;
}

.image-row-dresser img {
    flex: 1;
    max-width: 100%;
    max-height: 400px;
    height: auto;
    width: auto;
    object-fit: contain;
    border-radius: 10px;
}

@media (min-width: 768px) {
    .image-row-dresser img {
        max-height: 45
        0px;
    }
}

.image-row-dresser figure {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1; 
}

.image-row-dresser figcaption {
    text-align: center;
    color: #ccc;
    font-family: 'Oswald', sans-serif;
    font-size: medium;
    font-weight: 100;
    margin-top: 5px;
    max-width: 100%;
}

.video-container {
    display: flex;
    object-fit: contain;
    justify-content: center;
    align-items: center;
    gap: 20px;
    margin: 20px 0;
    width: 100%;
}

.video-container video {
    max-width: 960px;
    min-width: 400px;
    height: auto;
}

.portrait {

}

.imRight { 
  float:right; 
  padding-left: 5px;
  padding-top: 5px;
  padding-bottom: 5px;
  margin-left: 10%;
  height: 40%;
  width: 20%;
  border-radius: 36px;
  -webkit-filter: drop-shadow(5px 5px 5px #000);
  filter: drop-shadow(5px 5px 5px #000);
}

@keyframes navhi {
	0%   {background-image: linear-gradient(rgba(0, 0, 0, 0) 100%,rgba(221, 221, 221, 0.3) 0%);
	}
	10%   {background-image: linear-gradient(rgba(0, 0, 0, 0) 95%, rgba(221, 221, 221, 0.3) 5%);
	}
	20%   {background-image: linear-gradient(rgba(0, 0, 0, 0) 90%, rgba(221, 221, 221, 0.3) 10%);
	}
	30%   {background-image: linear-gradient(rgba(0, 0, 0, 0) 85%, rgba(221, 221, 221, 0.3) 15%);
	}
	40%   {background-image: linear-gradient(rgba(0, 0, 0, 0) 80%, rgba(221, 221, 221, 0.3) 20%);
	}
	50%   {background-image: linear-gradient(rgba(0, 0, 0, 0) 75%, rgba(221, 221, 221, 0.3) 25%);
	}
	60%   {background-image: linear-gradient(rgba(0, 0, 0, 0) 70%, rgba(221, 221, 221, 0.3) 30%);
	}
	70%   {background-image: linear-gradient(rgba(0, 0, 0, 0) 65%, rgba(221, 221, 221, 0.3) 35%);
	}
	80%   {background-image: linear-gradient(rgba(0, 0, 0, 0) 60%, rgba(221, 221, 221, 0.3) 40%);
	}
	90%   {background-image: linear-gradient(rgba(0, 0, 0, 0) 55%, rgba(221, 221, 221, 0.3) 45%);
	}
	100%   {background-image: linear-gradient(rgba(0, 0, 0, 0) 50%, rgba(221, 221, 221, 0.3) 50%); filter: blur(3px);
	}
}


@keyframes navgi {
	0% {filter: blur(0px);}
	100% {filter: blur(10px);}
}

@font-face {
  font-family: 'Oswald';
  font-style: swap; /* was normal switched to swap  */
  font-weight: 200;
  src: url(Fonts/Oswald/Oswald-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Oswald';
  font-style: swap; /* was normal switched to swap  */
  font-weight: 200;
  src: url(Fonts/Oswald/Oswald-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Bebas Neue';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(Fonts/Babas_Neue/Babas_Neue-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Bebas Neue';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(Fonts/Babas_Neue/Babas_Neue-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}