:root {
    --1: rgb(251, 242, 225);
    --2: rgb(121, 19, 144);
    --3: rgb(126, 232, 234);
    --4: rgb(236, 136, 50);
    --5: rgb(236, 255, 166);
}

body {
    background-color: var(--1);
    color:var(--2);
}

* {
    text-align: center;
}

h1,h2 {
    background-color: inherit;
    font-family:Impact, fantasy, 'Arial Narrow Bold', sans-serif;
    font-weight:100;
}

p {
    font-size:1.1rem;
    font-family:'Courier New', Courier, monospace;
    font-weight:bold;
    font-size: minmax(10px, 20px);
}

em {
    font-size:0.9rem;
}

.body {
    padding-top:60px;
    margin-right:min(50px, 2vw);
    margin-left:min(500px, 45vw);
}

.body .text {
    background-color: var(--3);
    padding:20px;
    border-radius:30px;
}

.sidebar {
    top:50%;
    transform: translate(0, -50%);
    left:min(200px, 8vw);
    height:600px;
    width:min(300px, 30vw);
    position:fixed;
    background-color: var(--2);
    color: var(--1);
    border-radius:30px;

    display:flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

}

.sidebar h1 {
    background-color: inherit;
}

.sidebar p {
    font-size: 0.9rem;
}

.image-wrapper {
    width:150px;
    background-color: inherit;
}

img {
    width:100%;
    background-color: inherit;
}

.skills {
    background-color: var(--5);
    border-radius:30px;
    padding:20px;
    display:flex;
    align-items: center;
    margin-top:60px;
    gap:20px;
}

.skills-wrapper {
    display:flex;
    justify-content: space-around;
    width:100%;

}
    
.fam, 
.prof {
    background-color: var(--4);
    padding:10px;
    border-radius:30px;
    width:max(250px, 25%);
}

.fam p,
.prof p {
    margin:20px;
}

.exp h1,
.skills h1 {
    font-size: clamp(2rem, 5rem, 5rem);
    width:auto;

}

.skills h1 {
    padding:20px;
    padding-bottom:0px;
}

.skills h2 {
    color: var(--5);
}

.skills-wrapper p {
    text-align: left;
    color: var(--5);
}

.exp {
    margin-top: 60px;
    border-radius:30px;
    background-color: var(--5);
    display:flex;
    flex-direction:column;
    justify-content: flex-start;
    align-items:center;
}

.box-wrapper {
    flex-wrap:wrap;
    margin:20px;
    display:flex;
    justify-content: space-around;
    align-items: center;
    width:100%;
    gap:20px;

}

.box {
    background-color: var(--3);
    border-radius:30px;
    width:max(250px, 40%);
    height:400px;
    padding:20px;
}

.buttons {
    display:flex;
    flex-direction: column;
    gap:20px;
    height:100px;
    
}
.button {
    background-color: var(--4);
    border-radius:30px;
    gap:40px;
    border:none;
    padding:10px;
    width:60%;
    
    color:var(--1);
    font-size:0.9rem;
    font-family:'Courier New', Courier, monospace;
    font-weight:bold;
    font-size: minmax(10px, 20px);

    cursor:pointer;

}

.button:hover {
    background-color: var(--2);
}

.icons {
    display:flex;
    align-items: center;
    justify-content: space-around;

}
#github {
    height:50px;
    width:auto;
}

#linkedin {
    width: 65px;
}

#instagram {
    width: 50px;
}

.resume button {
    margin-top:20px;
    width:40%;
}

@media (max-width: 1200px) {
    .sidebar {
        position:relative;
        left:auto;
        right:auto;
        transform:none;
        width:100%;
        margin:0 auto 20px auto;

    }
    .body {
        margin-left: auto;
        margin-right: auto;
        padding-left: 20px; 
        padding-right: 20px;
    }
    .skills {
        flex-direction: column;
        align-items: stretch;
        gap:0px;
        margin:0px;
        margin-top:60px;
    }

    .skills-wrapper {
        flex-direction: column;
        align-items: center;
        width:100%;
        gap:10px;
    }

    .fam, 
    .prof {
        margin:0px;
        width:100%;
    }
    .box-wrapper {
        flex-direction: column;
        gap:20px;
    }

    .box {
        width:80%;
        height:auto;
    }
}