@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&family=VT323&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --color0: #ffffff;
    --color1: #f4e6ff;
    --color2: #cbaeff;
    --color3: #a5d9ff;
    --text-color: #2b2b2b;
    --p-text: 'VT323', monospace;
    --t-text: 'Press Start 2P', cursive;
}

html {
    scroll-behavior: smooth;
}

header {
    height: 100vh;
}

header h1{
    background-color: #140430;
    color: var(--color0);
    font-family: var(--t-text);
    font-size: 3rem;
    padding: 20px;
    text-align: center;
    text-shadow: 5px 5px 0 var(--color3);
}

.main-content {
    background-image: url(../assets/backgrounds/verticalCity.gif);
    background-repeat: repeat;
    display: flex;
    justify-content: space-around;
    color: var(--color0);
    height: 100%;
}

.container {
    width: 20vw;
    position: relative;
}

.btn {
    display: inline-block;
    color: var(--color0);
    font-family: var(--t-text);
    font-size: 1.2rem;
    padding: 20px;
    text-decoration: none;
    text-shadow: 2px 2px 0 var(--color2);
    background: linear-gradient(to bottom, var(--color2), var(--color3));
    border-radius: 12px;
    margin: 50px;
    box-shadow: 0 0 0 3px var(--color2), 0 0 0 6px var(--color3), 0 0 10px var(--color0);
    animation: popIn 0.3s ease-out;
}
.kawaii-window {
    font-family: var(--p-text);
    font-size: 1.2rem;
    color: var(--text-color);
    background-color: var(--color1);
    border-radius: 12px;
    margin: 50px;
    box-shadow: 0 0 0 3px var(--color2), 0 0 0 6px var(--color3), 0 0 10px var(--color0);
    width: 15vw;
    animation: popIn 0.3s ease-out;
}

@keyframes popIn {
    0% { transform: scale(0.9); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}

.window-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4px 8px;
    border-radius: 10px 10px 0 0;
    background: linear-gradient(to bottom, var(--color2), var(--color3));
    border-bottom: 2px solid var(--color1);
    box-shadow: inset -1px -1px 0px var(--color0), inset 1px 1px 0px var(--color1);
}

.window-header h3 {
    margin: 0;
    font-size: 1.1rem;
    color: var(--color0);
    display: flex;
    align-items: center;
    gap: 8px;
    text-shadow: 1px 1px #6e3ccf;
}
.window-controls {
    display: flex;
    flex-direction: row;
    gap: 3px;
}
.window-controls button {
    width: 16px;
    height: 16px;
    font-size: 0.8rem;
    background-color: var(--color0);
    border: 2px outset var(--color1);
    cursor: pointer;
    padding: 0;
    line-height: 1;
}
.window-content {
    padding: 10px 12px;
}

#projectsWindow {
    position: absolute;
    bottom: 10vh;
}

.showcase {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.showcase-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.showcase-content h2, .showcase-content a {
    font-family: var(--t-text);
}

.showcase-content p {
    font-family: var(--p-text);
    font-size: 1.2rem;
    margin: 20px;
}

.container-icon {
    width: 5vw;
    height: auto;
    margin: 10vh;
}

#moon {
    display: flex;
    justify-content: end;
    position: fixed;
    right: 0;
    z-index: 10;
    margin: 5vh;
}

#about {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-image: url(../assets/backgrounds/nature.gif);
    background-size: cover;
    background-position: initial;
    background-repeat: repeat;
    display: flex;
}

#about h2 {
    font-family: var(--t-text);
    color: var(--color0);
    font-size: 2.5rem;
    margin: 3.8vh 0;
}

.sect {
    display: flex;
    justify-content: space-around;
    color: var(--color0);
}

#likesWindow {
    width: 20vw;
    position: absolute;
    top: 1vh;
    right: 0;
    z-index: 0;
}

#likesWindow .window-content {
    margin-left: 1.5vw;
}

#skillsWindow {
    width: 15vw;
    position: absolute;
    top: 15vh;
    right: -9vw;
    z-index: 1;
}

#skillsWindow .window-content {
    margin-left: 1.5vw;
}

#duckWindow {
    width: 11vw;
    position: absolute;
    bottom: 10vh;
    right: -2vw;
    z-index: 1;
}

#duckWindow .window-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.duck-pixel {
    width: 10vw;
    height: auto;
}

.pixel-art {
    height: 83vh;
    width: auto;
    margin: 3vh 2vw;
    z-index: 11;
}

#profileWindow {
    width: 20vw;
}

#profileWindow .window-content {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 1vw;
}

.profile-photo img{
    width: 7vw;
    height: auto;
    border-radius: 12px;
    border: var(--color0) 2px solid;
}

.profile-info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.profile-info p:first-child {
    font-size: 1.5rem;
    margin-bottom: 1.5vh;
    color: rgb(12, 211, 12);
}

#spotifyWindow {
    width: 20vw;
    position: absolute;
    bottom: 41vh;
    right: 0;
    z-index: 10;
}

#basicWindow {
    width: 30vw;
    position: absolute;
    bottom: 25vh;
    right: -7vw;
    z-index: 10;
    margin: 5vh;
}

#carrusel {
    flex-direction: column;
}

#carrusel__content {
    height: 200px;
    width: 100%;
    overflow: hidden;
}

.carrusel__item {
    height: 100%;
    width: 80%;
    margin: 0 auto;
    position: relative;
}

.item__card {
    height: 96%;
    width: 80%;
    margin: 0 auto;
    border-radius: 5px;
    box-shadow: 0 0 5px var(--color-secundario);
    margin-top: 5px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.item__card i {
    margin: 35px;
    font-size: 1.3vw;
}

.item__card h4{
    font-size: 1.7vw;
}

.item__arrows {
    position: absolute;
    top: 0;
    height: 180px;
    width: 93%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 22px;
}

.item__arrows a {
    font-size: 2rem;
    text-decoration: none;
}

#carrusel__nav {
    display: flex;
    justify-content: center;
    column-gap: 1rem;
    margin: 1rem;
}

#carrusel__nav a {
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
    background-color: #909090;
}

#carrusel__nav a:hover {
    background-color: #282828;
}

footer, .separator {
    background-color: var(--color1);
    color: var(--text-color);
    font-family: var(--p-text);
    font-size: 1rem;
    padding: 10px;
    text-align: center;
    border-bottom: var(--color3) 10px solid;
}