*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:"Jersey 20", sans-serif;
}

html {
    scroll-behavior: smooth;
}

body{

background: linear-gradient(to bottom, #F06BE9, #24C3EF);
background-attachment: fixed; 
color:white;

}

header{
    position:fixed;
    top:0;
    left:0;
    width:100%;

    display:flex;
    justify-content:space-between;
    align-items:center;

    padding:25px 60px;

    background:#ffffff45;
    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);

    transition:
        background .4s ease,
        padding .4s ease,
        box-shadow .4s ease;

    z-index:999;
}

.logo{

width: 30px;
height: auto;

}

nav{

display:flex;

gap:35px;

}

nav a{

color:white;

text-decoration:none;

transition:.3s;

font-size:30px;

}

nav a:hover{

background-image: linear-gradient(to bottom, #24C3EF, #FFE9B7);

background-clip: text;
-webkit-background-clip: text;

color: transparent;

}

.search-nav-button {

color:white;

text-decoration:none;

transition:.3s;

font-size:60px;

}

.search-nav-button:hover{

background-image: linear-gradient(to bottom, #24C3EF, #FFE9B7);

background-clip: text;
-webkit-background-clip: text;

color: transparent;

}

h1, h2, h3, p{
    font-family: "DM Sans", sans-serif;
    color: black;
}

body.home-page {
    background-color: white;
    color: black;
}

.main-container {
    width: 100%;

    flex: 1;

    display: flex;
    justify-content: center;

    padding: 110px 50px 50px;
}

.iframe-wrapper {
    width: 100%;
    max-width: 1400px;

    height: 700px;

    background: white;

    border-radius: 25px;

    overflow: hidden;

    position: relative;

    box-shadow:
        0 20px 60px rgba(0, 0, 0, 0.25);

    opacity: 1;

    transition:
        opacity 0.35s ease,
        transform 0.35s ease;
}

#pageFrame {
    width: 100%;
    height: 100%;

    border: none;

    display: block;

    background: white;
}

.iframe-wrapper.fade-out {
    opacity: 0;
    transform: translateY(8px);
}

.site-footer {
    width: 100%;

    padding: 25px 50px;

    text-align: center;

    font-size: 13px;

    opacity: 0.6;
}

@media (max-width: 768px) {

    .site-header {
        padding: 20px;
        flex-direction: column;
        gap: 20px;
    }

    .main-nav {
        gap: 20px;
        flex-wrap: wrap;
        justify-content: center;
    }

    .main-container {
        padding: 10px 15px 30px;
    }

    .iframe-wrapper {
        height: 650px;
	border-radius: 18px;
    }

    .site-footer {
        padding: 20px;
    }

    .logo {
        width: 15px; 
    }
}

.login-button {
    border: none;

    background: #f5f5f5;
    color: #555555;

    border-radius: 100px;

    padding: 9px 16px;

    font-size: 13px;

    cursor: pointer;

    text-decoration: none;

    white-space: nowrap;

        transition:
        background 0.25s ease,
        color 0.25s ease,
        transform 0.25s ease;
}

.login-button:hover {
    transform: translateY(-1px);
    background: #ededed;
}

.header-profile-picture {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    object-fit: cover;
    vertical-align: middle;
    margin-right: 7px;
}

.account-wrapper {
    position: relative;
}

.account-button {
    display: flex;
    align-items: center;
    gap: 9px;

    border: none;
    background: transparent;

    color: white;

    cursor: pointer;

    font-family: inherit;
    font-size: 14px;
}

.account-button img {
    width: 34px;
    height: 34px;

    border-radius: 50%;

    object-fit: cover;
}

.account-arrow {
    font-size: 12px;

    transition:
        transform 0.25s ease;
}

.account-dropdown {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;

    width: 220px;

    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);

    border-radius: 16px;

    padding: 8px;

    box-shadow:
        0 10px 40px rgba(0, 0, 0, 0.15);

    display: none;

    z-index: 9999;
}

.account-dropdown.open {
    display: block;
}

.account-dropdown a,
.account-dropdown button {
    display: block;

    width: 100%;

    padding: 12px 14px;

    border: none;
    background: transparent;

    text-align: left;

    text-decoration: none;

    font: inherit;

    color: #111;

    border-radius: 10px;

    cursor: pointer;

    box-sizing: border-box;
}

.account-dropdown a:hover,
.account-dropdown button:hover {
    background: rgba(0, 0, 0, 0.06);
}

.account-dropdown-divider {
    height: 1px;

    background: rgba(0, 0, 0, 0.1);

    margin: 6px 4px;
}

.account-container {
    position: relative;
}