@import url('https://fonts.googleapis.com/css2?family=Work+Sans:ital,wght@0,100..900;1,100..900&display=swap');
/* font-family: "Work Sans", sans-serif; */
body {
    position: relative;
    margin: 0;
    padding: 0;
    background-color: var(--bg-1);
    overflow-x: hidden;
    z-index: -2;
}
main {
    margin: 0;
    padding: 0;
    background-color: var(--bg-1);
    transition: 0.2s;
}
.main-header {
    position: sticky;
    top: 0;
    padding: 1em;
    background-color: var(--bg-2);
    border-radius: 0 0 1em 1em;
    font-family: "Work Sans", sans-serif;
    color: var(--text-bg-1);
    z-index: 1;
    filter: drop-shadow(0 1em 1em rgb(128, 128, 128, 0.8));
}


/* Main Image */
.main-image {
    margin-top: 1em;
    position: relative;
    width: 80%;
    max-width: 50em;
    transform: translate(-50%, 0);
    left: 50%;
}
.main-image img {
    width: 100%;
    filter: brightness(80%) blur(2px);
    border-radius: 0.5em;
}
#animation-block > * {
    animation: animation-move 12s infinite ease-in-out;
    position: absolute;
    top: 100%;
    left: 0;
}
#animation-block > *:nth-child(1) {animation-delay: 0s}
#animation-block > *:nth-child(2) {animation-delay: 4s}
#animation-block > *:nth-child(3) {animation-delay: 8s}

.animation-block-class {
    position: absolute;
    overflow: hidden;
    width: 80%;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    height: min-content;
    margin: 0 auto;
    padding: 1em;
    border-radius: 1em;
    z-index: 1;
}
.animation-block-class > * {
    width: 100%;
}
.animation-block-class h1, .animation-block p {
    width: 80%;
    height: max-content;
    position: relative;
    margin: 0 auto;
    color: rebeccapurple;
}
/* Main Image */


.logo-container {
    display: grid;
    grid-template-columns: max-content 1fr;
    grid-gap: 1em;
}


/* Menu */
nav {
    background-color: var(--bg-2);
}
#menu-toggle {
    display: none;
}
.menu-label {
    position: fixed;
    right: 1em;
    width: max-content;
    border-radius: 3px;
    padding: 0px;
    z-index: 10;
    color: var(--text-bg-1);
    font-size: 3em;
}
.menu-label:hover {
    cursor: pointer;
}
#menu-toggle:checked ~ main {
    transform: translate(-7em, 0);
    transition: 0.2s;
    filter: brightness(60%) grayscale(25%);
}
.top-menu {
    background-color: var(--bg-4);
    position: fixed;
    width: max-content;
    height: 100%;
    top: 0;
    right: 0;
    transition: 0.2s;
    padding: 0 1em;
    z-index: -1;
}
.top-menu p {
    width: 100%;
    text-align: end;
}
.top-menu p a {
    color: var(--bg-1);
    text-decoration: none;
}
.menu-items {
    width: max-content;
    display: flex;
    flex-flow: column;
    margin-top: 5em;
    margin-right: auto; 
}
.menu-items img {
    width: 1em;
    justify-self: center;
    align-self: center;
}
/* Menu */


.icon-logo-container {
    display: inline-block;
    width: 100%;
    height: max-content;
    align-self: center;
    color: var(--text-bg-1);
}
.icon-peace-logo {
    display: inline-block;
    margin-left: 0%;
    align-self: center;
    color: var(--text-bg-1);
    animation: logo-animation 5s 3s 3;
}

/* Cruise image */
.cruise-image {
    margin: 1em;
}
.cruise-image img {
    border-radius: 0.5em;
    width: 100%;
}
.cruise-image h1 {
    position: absolute;
    margin: 0;
    padding: 0;
    transform: translate(5%, 25%);
    width: 80%;
}
/* Cruise image */


.main-section {
    font-family: "Work Sans", sans-serif;
    color: var(--text-bg-1);
}

.first-section {
    display: grid;
    grid-template-columns: 1fr;
}


/* Second Section */
.second-section {
    display: grid;
    grid-template-columns: 1fr;
}
.paragraph-info {
    display: flex;
    flex-flow: column;
}
.paragraph-info h1 {
    margin: auto;
}
.paragraph-info p {
    margin-top: auto;
}
.paragraph-info img {
    display: block;
    margin-top: auto;
    width: 100%;
    border-radius: 0.5em;
}
/* Second Section */


/* Third Section */
.picture-header {
    position: sticky;
    top: 0;
    padding: 1em;
    background-color: var(--bg-2);
    border-radius: 0 0 1em 1em;
    font-family: "Work Sans", sans-serif;
    color: var(--text-bg-1);
    z-index: 1;
    filter: drop-shadow(0 1em 1em rgb(128, 128, 128, 0.8));
}
.third-section {
    display: grid;
    grid-template-columns: 1fr;
    text-align: center;
}
.third-section img {
    width: 100%;
    border-radius: 1em;
}
/* Third Section */


.background-border {
    margin: 1em;
    padding: 1em;
    background-color: var(--bg-2);
    border-radius: 0.5em;
    font-family: "Work Sans", sans-serif;
    color: var(--text-bg-1);
}


/* Book now button */
.book-now-button {
    display: block;
    width: 100%;
    height: 100%;
}
.book-now-button a {
    display: grid;
    margin: 0 2em;
    height: 2em;
    border-radius: 0.5em;
    background-color: var(--bg-4);
    color: wheat;
    text-align: center;
    text-decoration: none;
}
.book-now-button a:hover {
    background-color: var(--bg-5);
}
.book-now-button p {
    align-self: center;
    margin: 0;
    padding: 0;
}
/* Book now button */


/* Chatbox */
.chatbox-label {
    display: flex;
    position: fixed;
    background-color: var(--bg-7);
    width: 4em;
    height: 4em;
    border-radius: 1em;
    bottom: 0;
    right: 0;
    transform: translate(-25%, -25%);
    z-index: 2;
    filter: drop-shadow(0 0 1em green);
}
.chatbox-label p {
    display: inline-block;
    margin: 0;
    text-align: center;
    align-self: center;
    flex-grow: 1;
}
.chatbox-label:hover {
    cursor: pointer;
}
.chatbox-section {
    position: fixed;
    background-color: var(--bg-7);
    width: 80%;
    padding: 1em;
    font-family: "Work Sans", sans-serif;
    border-radius: 1em;
    right: 50%;
    bottom: 0;
    transform: translate(50%, 100%);
    transition: 0.5s;
    z-index: 3;
}
.chatbox-section h1 {
    text-align: center;
}
#chatbox-input:checked ~ .chatbox-section {
    transform: translate(50%, -25%);
}
#chatbox-input {
    display: none;
}
.chatbox-section form {
    border: 1px solid black;
    padding: 5vw;
    border-radius: 1em;
}
.chatbox-section form input {
    width: 100%;
    background-color: var(--bg-8);
    border-color: rgb(66, 66, 66);
    border-style: solid;
}
.message-box textarea {
    width: 100%;
    height: 5em;
    resize: none;
    border-color: rgb(66, 66, 66);
    border-style: solid;
    background-color: var(--bg-8);
}
.chatbox-submit {
    margin: auto;
    width: 50%;
}
/* Chatbox */
footer {
    background-color: var(--bg-2);
    padding: 1em;
    color: var(--text-bg-1);
    border-radius: 1em 1em 0 0;
    justify-self: center;
    font-family: "Work Sans", sans-serif;
}
@keyframes animation-move {
    0% {
        top: 100%;
    }
    4% {top: 0%;}
    33.33% {top: 0%;}
    37.33% {top: -100%;}
    100% {top: -100%;}
}
@media screen and (min-width:48rem) {
    .first-section {
        grid-template-columns: 1fr 1fr;
    }
    .second-section {
        grid-template-columns: 2fr 1fr;
    }
    .third-section {
        grid-template-columns: 1fr 1fr 1fr;
    }
    .chatbox-section {
        transform: translate(-30%, 100%);
        width: 20em;
        right: 0;
    }
    #chatbox-input:checked ~ .chatbox-section {
        transform: translate(-30%, -5%);
    }
    .chatbox-section form {
        padding: 1em;
    }
}
@keyframes logo-animation {
    0% {
        margin-left: 0%;
        transform: rotate(0deg);
    }
    25% {
        margin-left: 50%;
        transform: rotate(45deg);
    }
    50% {
        margin-left: 25%;
        transform: rotate(22.5deg);
    }
    75% {
        margin-left: 90%;
        transform: rotate(180deg);
    }
    100% {
        margin-left: 0%;
        transform: rotate(360deg);
    }
}
:root {
	/* Light theme */
	--text-bg-1: #000000;
	--text-bg-2: #1A1A1A;
    --text-bg-3: rgb(60, 60, 60);
	--bg-1: #FFFFFF;
	--bg-2: #dbdbdb;
	--bg-3: #bbbbbb;
    --bg-4: orange;
    --bg-5: rgb(255, 208, 0);
    --bg-6: rgb(207, 207, 251);
    --bg-7: rgb(46, 108, 63);
    --bg-8: rgb(223, 245, 255);

	/* Dark theme */
	--text-bg-1-dark: #ffffff;
	--text-bg-2-dark: #eeeeee;
	--text-bg-3-dark: #000000;
	--bg-1-dark: #111111;
	--bg-2-dark: #3b3b3b;
    --bg-3-dark: rgb(71, 71, 71);
    --bg-4-dark: rgb(183, 100, 0);
    --bg-5-dark: rgb(223, 179, 1);
    --bg-6-dark: rgb(112, 112, 243);
    --bg-7-dark: rgb(36, 73, 46);
    --bg-8-dark: white;
}
@media (prefers-color-scheme: dark) {
	:root {
		--text-bg-1: var(--text-bg-1-dark);
	    --text-bg-2: var(--text-bg-2-dark);
        --text-bg-3: var(--text-bg-3-dark);
        --bg-1: var(--bg-1-dark);
        --bg-2: var(--bg-2-dark);
        --bg-3: var(--bg-3-dark);
        --bg-4: var(--bg-4-dark);
        --bg-5: var(--bg-5-dark);
        --bg-6: var(--bg-6-dark);
        --bg-7: var(--bg-7-dark);
        --bg-8: var(--bg-8-dark);
	}
}