@import "colors.css";
@import "fonts.css";
@import "animations.css";

body {
    margin: 0;
    overflow-x: hidden;
    width: 100vw;
    height: 100vh;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    inset: 0;
    z-index: -1;
}

* {
    scrollbar-width: thin;
    scrollbar-color: var(--navbar-red) black;
}

body.home {
    background-image: linear-gradient(to bottom, #ff6b21, #b8643b);
}

body.about,
body.projects,
body.ppc {
    background-color: black;
}

body.endexp {
    background-image: linear-gradient(to bottom, #88FEE0, #1FDB73);
}

.main-container {
    width: 100%;
    height: 100vh;
    overflow-x: hidden;
}

.navbar {
    width: 100%;
    height: 70px;
    justify-content: flex-end;
    position: fixed;
    background-image: linear-gradient(to bottom, #000000d8, #0000006d);
    backdrop-filter: blur(1rem);
    border-bottom: 3px solid var(--navbar-red);
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    z-index: 99999;
    display: flex;
    align-items: stretch;
    animation: slideInFromTop 0.5s ease-out forwards;
}

.navbar ul {
    list-style-type: none;
    background-color: transparent;
    padding: 0;
    margin: 0;
    overflow: hidden;
    display: flex;
}

.navbar a {
    color: white;
    text-decoration: none;
    padding: 0 1em;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-grow: 1;
    font-size: max(16px, min(1vw, 22px));
    font-weight: 700;
    font-family: "Roboto", sans-serif;
    font-style: normal;
    transition: background-color 0.3s ease;
}

.navbar a.selected,
.navbar a:active {
    background-color: rgb(176, 1, 1);
}

.navbar a:hover,
.navbar a.selected:hover {
    background-color: rgb(215, 0, 0);
}

.navbar img {
    width: auto;
    display: flex;
    left: 0;
}

.navbar li {
    display: flex;
    margin-right: auto;
}

@media (max-width: 420px) {
    .navbar img {
        display: none;
    }
}

.textbox.container {
    width: 25%;
    margin-top: 100px;
    position: absolute;
    display: flex;
    flex-direction: column;
    padding-right: 20px;
    margin-left: 2%;
    margin-right: 2%;
}

@media (max-width: 1024px) {
    .textbox-wrapper {
        flex-direction: row;
    }
    .main-slide {
        min-height: 120%;
    }
    .textbox.container {
        width: 45%;
    }
}

@media (max-width: 600px) {
    .textbox-wrapper {
        flex-direction: column;
    }
    .main-slide {
        min-height: 100%;
    }
    .textbox.container {
        width: 100%;
        padding: 0;
        position: relative; 
        margin: 0;
    }
}

.main-textbox {
    position: relative;
    border: 8px solid var(--textbox-gray-border); 
    background-color: var(--textbox-gray);
    box-sizing: border-box; 
    font-family: Arial, sans-serif; 
    overflow-y: hidden; 
    overflow-x: hidden;
    font-size: max(14px, min(1.5vw, 20px));
    text-align: left;
    padding: 5px;
    color: white;
    box-shadow: 15px 15px 0px rgba(0, 0, 0, 0.5); 
    opacity: 0;
    margin-bottom: 40px; 
    display: flex;
}

.textbox-content { 
    overflow-x: auto;
}

.textbox-wrapper {
    display: inline-block;
    width: 100%; 
    height: 100%;
    position: relative; 
}

.main-textbox h1 {
    font-family: "Univers47";
    margin: 0;
    letter-spacing: 1px;
}

.main-imagebox {
    position: relative;
    border: 8px solid var(--textbox-gray-border); 
    background-color: var(--textbox-gray); 
    box-sizing: border-box;
    overflow-y: hidden;
    padding: 5px;
    box-shadow: 15px 15px 0px rgba(0, 0, 0, 0.5);
    width: fill-content;
    opacity: 0;
}

.main-slide {
    width: 100%;
    position: relative;
    min-height: 80rem;
    display: flex;
    flex-direction: column;
}

.footer-index,
footer {
    background-color: black;
    text-align: center;
    font-family: "Univers47";
    width: 100%;
    font-size: max(18px, min(2vw, 24px));
    color: white;    
}

.footer-index {
    bottom: 0;
    position: absolute;
}

footer p {
    padding: 0;
}

.main-textbox.in-view {
    animation: slideInFromRight 0.5s ease-out forwards;
    animation-fill-mode: both;
    animation-delay: 0.5s;
}

.main-imagebox.in-view {
    animation: slideInFromRight 0.5s ease-out forwards;
    animation-fill-mode: both;
    animation-delay: 0.5s;
}

.main-textbox.left.in-view {
    animation: slideInFromLeft 0.5s ease-out forwards;
    animation-fill-mode: both;
    animation-delay: 0.5s;
}

.main-imagebox.left.in-view {
    animation: slideInFromLeft 0.5s ease-out forwards;
    animation-fill-mode: both;
    animation-delay: 0.5s;
}

.projects-logobox {
    display: inline-block;
    position: relative;
    background-color: transparent;
    box-sizing: border-box;
    overflow-y: auto;
    animation: fadeIn 0.75s ease-out forwards;
    animation-fill-mode: both;
    animation-delay: 1s;
}

.projects-logobox img {
    display: block;
    width: 100%;
    height: auto;
}

.main-imagebox.button {
    transition: transform 0.3s ease-in-out;
}

.main-imagebox.button:hover {
    transform: scale(1.05);
}

.textbox.projects.container {
    width: 40%;
    margin-top: 100px;
    position: absolute;
    display: flex;
    flex-direction: column;
    padding-right: 20px;
    margin-left: 2%;
    margin-right: 2%;
}

.textbox-wrapper.projects {
    margin-bottom: 2%;
}

@media (max-width: 1024px) {
    .textbox.projects.container {
        width: 80%;
        padding: 0;
        position: relative;
        margin-left: 10%;
    }
    .textbox-wrapper.projects {
        flex-direction: column;
    }
}

@media (max-width: 600px) {
    .textbox.projects.container {
        width: 100%;
        padding: 0;
        margin: 0;
        position: relative;
    }
}

.endexp-head-image {
    margin-top: 5%;
}

.endexp-head-image img {
    width: 70%;
    display: block;
    margin: 0 auto;
    box-shadow: 15px 15px 0px rgba(0, 0, 0, 0.5);
    animation: fadeIn 1s ease-out forwards;
}

.endexp-head-image h1 {
    text-align: center;
    font-family: "Univers47";
    letter-spacing: 1px;
    font-style: normal;
    color: white;
    background-color: var(--textbox-gray);
    width: 100%;
    margin-top: 40px;
    animation: fadeIn 1s ease-out forwards;
    animation-fill-mode: both;
    animation-delay: 0.5s;
}

.endexp-container {
    width: 40%;
    margin-top: 10%;
    position: absolute;
    display: flex;
    flex-direction: column;
    padding-right: 20px;
    margin-left: 2%;
    margin-right: 2%;
}

.textbox-wrapper.endexp {
    height: 210%;
}

@media (max-width: 1024px) {
    .textbox-wrapper.endexp {
        flex-direction: row;
    }
    .main-slide {
        padding-top: 20vw;
    }
    .endexp-head-image {
        margin-top: 10%;
    }
}

@media (max-width: 600px) {
    .textbox-wrapper.endexp {
        flex-direction: column;
    }
    .endexp-container {
        width: 100%;
        padding: 0;
        position: relative;
        margin: 0;
    }
    .endexp-head-image {
        margin-top: 20%;
    }
    .endexp-head-image img {
        width: 90%;
    }
}

@media (max-width: 420px) {
    .main-slide {
        padding-top: 30vw;
    }
}

.comingsoontext {
    text-align: center;
    font-family: "Univers47";
    letter-spacing: 1px;
    font-style: normal;
    color: white;
    width: 30em;
    font-size: 500%;
    animation: fadeIn 1s linear;
}

.comingsoon-wrapper {
    width: 100%;
    overflow: hidden;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

@media (max-width: 1024px) {
    .textbox.container.index {
        margin-top: 0px;
    }
}

@media (max-width: 600px) {
    .textbox.container.index {
        padding-top: 20vw;
    }
}

@media (max-width: 420px) {
    .textbox.container.index {
        padding-top: 30vw;
    }
}