/*************************************

Color Palette

Light Blue:	    #00aeef	rgb(0, 174, 239)
Dark Blue:	    #1c75bc	rgb(28, 117, 188)
Orange:	 		#f7941e	rgb(247, 148, 30)
Green:			#82c341	rgb(130,195,65)
Grey:			#666	rgb(102,102,102)

Fonts: 
	Anton
	Montserrat
	Fugaz One

**************************************/
/* Regular weight */
@font-face {
    font-family: 'Montserrat';
    src: url('../fonts/montserrat-regular.woff2') format('woff2');
    font-weight: 400;
    /* Normal */
    font-style: normal;
}

/* Bold weight */
@font-face {
    font-family: 'Montserrat';
    src: url('../fonts/montserrat-bold.woff2') format('woff2');
    font-weight: 700;
    /* Bold */
    font-style: normal;
}

/* Italic style */
@font-face {
    font-family: 'Montserrat';
    src: url('../fonts/montserrat-italic.woff2') format('woff2');
    font-weight: 400;
    font-style: italic;
}

/* Bold-italic weight and style */
@font-face {
    font-family: 'Montserrat';
    src: url('../fonts/montserrat-bold-italic.woff2') format('woff2');
    font-weight: 700;
    font-style: italic;
}

body {
    background: #F2F2F2;
    margin: 0 auto;
    padding: 0;
    font-family: Montserrat, arial, sans-serif;
    height: 100%;
    overflow-y: scroll;
}

.wave-header {
    display: flex;
    width: 100%;
    /* Adjust as needed */
    height: 300px;
    /* Adjust as needed */
    background-color: #00aeef;
    /* Example background color */
    position: relative;
    overflow: hidden;
    /* Important to clip the wave */
    background-image: url("/images/iceberg-halftone.png");
    background-size: cover;
}

.wave-header::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 50px;
    /* Adjust wave height */
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120" preserveAspectRatio="none"><path d="M0,56C481,116,751,1,1200,56L1200,120L0,120Z" style="fill:%231c75bc;"/></svg>') repeat-x;
    /* White wave, change fill color as needed */
    background-size: 1200px 50px;
    /* Match viewBox width and height */
}

/* Optional: Additional styling for header content */
.wave-header h1,
.wave-header p {
    text-align: center;
    color: white;
    position: relative;
    z-index: 1;
    margin: 0;
    padding: 10px;
}


#PPPLogo {
    height: 200px;
    margin-left: 30px;
    margin-top: 40px;
    background-color: white;
    padding: 5px;
    border-radius: 25%;
    transform: rotate(-7deg);
}

/* Create a single, more fluid floating keyframe */
@keyframes floating {

    0%,
    100% {
        transform: translate(var(--x-start, 0), var(--y-start, 0)) rotate(var(--r-start, 0deg));
    }

    50% {
        transform: translate(var(--x-mid, 0), var(--y-mid, 0)) rotate(var(--r-mid, 0deg));
    }
}

/* Base styles for all floating containers */
.floating-container {
    animation-name: floating;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
}

/* Customize each container using unique CSS variables */


.floating-about {
    --x-start: 0px;
    --y-start: 0px;
    --r-start: -3deg;
    --x-mid: 5px;
    --y-mid: 25px;
    --r-mid: 5deg;
    animation-duration: 5s;
    animation-delay: 1.2s;
    background: url("/images/about.png") no-repeat;
    margin-top: 50px;
    scale: .8;
}

.floating-works {
    --x-start: 0px;
    --y-start: 0px;
    --r-start: 3deg;
    --x-mid: 5px;
    --y-mid: 25px;
    --r-mid: -5deg;
    animation-duration: 4.5s;
    animation-delay: 2.1s;
    background: url("/images/works.png") no-repeat;
    margin-top: 60px;
    scale: .75;
}

.floating-blog {
    --x-start: 0px;
    --y-start: 0px;
    --r-start: 7deg;
    --x-mid: 5px;
    --y-mid: 25px;
    --r-mid: -3deg;
    animation-duration: 6s;
    animation-delay: 0.9s;
    background: url("/images/blog.png") no-repeat;
    margin-top: 40px;
    scale: .85;
}

.floating-contact {
    --x-start: 0px;
    --y-start: 0px;
    --x-mid: 5px;
    --y-mid: 5px;
    animation-duration: 5s;
    animation-delay: 1.5s;
    background: url("/images/contact.png") no-repeat;
    margin-top: 50px;
    scale: .77;
}

.floating-github {
    --x-start: 5px;
    --y-start: 25px;
    --r-start: -7deg;
    --x-mid: 0px;
    --y-mid: 0px;
    --r-mid: 5deg;
    animation-duration: 5.5s;
    animation-delay: 0.2s;
    background: url("/images/github.png") no-repeat;
    margin-top: 48px;
    scale: .79;
}

#cabinet {
    display: flex;
    width: 100%;
}

.drawers {
    padding: 80px 20px;
    text-align: center;
    display: flex;
    align-content: flex-start;
    list-style: none;
}

.drawer {
    height: 200px;
    width: 185px;
}

#main-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
    width: 100%;
    padding-bottom: 50px;
    background-color: #1c75bc;
    color: aliceblue;
}

.sub-container,
.contact-container {
    margin: 0 auto;
    max-width: 50%;
    padding: 50px;
}

.contact-container {
    padding-bottom: 50px;
    background: #00aeef;
    border-radius: 25px;
}

#pi-tasks {
    list-style: none;
}

#pi-tasks li {
    display: flex;
    align-items: center;
}

#pi-tasks input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    /* For Safari */
    width: 20px;
    height: 20px;
    border: 2px solid #ccc;
    border-radius: 4px;
    cursor: pointer;
    position: relative;
    /* For positioning checkmark */
    margin-right: 16px;
}

/* Custom checkmark when checked */
#pi-tasks input[type="checkbox"]:checked {
    background-color: none;
    /* Example checked background */
    border-color: white;
}

#pi-tasks input[type="checkbox"]:checked::after {
    content: '\2713';
    /* Unicode checkmark */
    color: white;
    font-size: 16px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* Focus style for accessibility */
#pi-tasks input[type="checkbox"]:focus {
    outline: 2px solid #007bff;
    outline-offset: 2px;
}

#pi-tasks a,
.pi-link {
    color: lavender;
}

#pi-tasks a:hover,
.pi-link:hover {
    color: white;
}

#main-container {
    display: flex;

}