@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;700&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    --main-color: black;
    --second-color: white;
    --accent-color: green;
}

body {
    font-family: 'Manrope', sans-serif;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 3rem;
}

body::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-image: url("data:image/svg+xml,<svg id='patternId' width='100%' height='100%' xmlns='http://www.w3.org/2000/svg'><defs><pattern id='a' patternUnits='userSpaceOnUse' width='70' height='70' patternTransform='scale(2) rotate(0)'><rect x='0' y='0' width='100%' height='100%' fill='%23ffffffff'/><path d='M-4.8 4.44L4 16.59 16.14 7.8M32 30.54l-13.23 7.07 7.06 13.23M-9 38.04l-3.81 14.5 14.5 3.81M65.22 4.44L74 16.59 86.15 7.8M61 38.04l-3.81 14.5 14.5 3.81'  stroke-linecap='square' stroke-width='1' stroke='%23000000ff' fill='none'/><path d='M59.71 62.88v3h3M4.84 25.54L2.87 27.8l2.26 1.97m7.65 16.4l-2.21-2.03-2.03 2.21m29.26 7.13l.56 2.95 2.95-.55'  stroke-linecap='square' stroke-width='1' stroke='%23780606ff' fill='none'/><path d='M58.98 27.57l-2.35-10.74-10.75 2.36M31.98-4.87l2.74 10.65 10.65-2.73M31.98 65.13l2.74 10.66 10.65-2.74'  stroke-linecap='square' stroke-width='1' stroke='%23095228ff' fill='none'/><path d='M8.42 62.57l6.4 2.82 2.82-6.41m33.13-15.24l-4.86-5.03-5.03 4.86m-14-19.64l4.84-5.06-5.06-4.84'  stroke-linecap='square' stroke-width='1' stroke='%235981d4ff' fill='none'/></pattern></defs><rect width='800%' height='800%' transform='translate(0,0)' fill='url(%23a)'/></svg>");
}   

nav {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 3rem;
}

nav #overlay-button {
    display: none;
    flex-direction: column;
    justify-content: space-around;
    width: 30px;
    height: 24px;
    cursor: pointer;
    z-index: 101;
    background: transparent;
    padding: 0;
    border: none;
}

nav #overlay-button div {
    width: 30px;
    height: 3px;
    background-color: var(--main-color);
    border-radius: 3px;
    transition: transform 0.5s ease;
}

nav #overlay-button.active div {
    width: 30px;
    height: 3px;
    background-color: var(--second-color);
    border-radius: 3px;
}

nav #overlay-button.active div:nth-child(1) {
    transform: rotate(45deg);
}

nav #overlay-button.active div:nth-child(2) {
    display: none;
}

nav #overlay-button.active div:nth-child(3) {
    transform-origin: top left;
    transform: rotate(-45deg) translate(3px, 1.5px);
}

#logo {
    color: var(--main-color);
    display: flex;
    font-size: 2rem;
}

#logo span:nth-child(1) {
    font-weight: 450;
}

#logo span:nth-child(2) {
    font-weight: 900;
}

#overlay {
    position: fixed;
    top: 0; 
    left: 0; 
    right: 0; 
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.9);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 4rem;
    z-index: 100;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

#overlay .custom-list {
    flex-direction: column;
    gap: 1rem;
} 

#overlay.active {
    opacity: 1;
    pointer-events: auto;
}

.custom-list {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.card {
    backdrop-filter: blur(3px);
    border-radius: 25px;
    overflow: hidden;
    padding: 2rem;
    box-shadow: 0 0 30px rgba(0,0,0,0.25);
    position: relative;
}

#main-card {
    background: rgba(249, 249, 249, 0.85);
    max-width: 1200px;
    width: 100%;
    z-index: 1;
}

main {
    display: flex;
    align-items: center;
    justify-content: space-around;
    margin-bottom: 1.5rem;
    margin-top: 1.5rem;
    min-height: 220px;
}

.custom-button {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    padding: 6px;
    height: 44px;
    min-width: 44px;
    font-weight: bold;
    font-size: 1rem;
    text-decoration: none;
    cursor: pointer;
    outline: none;
    background-color: transparent;
    border: solid 2px transparent;
    transition: all 0.3s ease;
}

.custom-button svg {
    min-width: 32px;
    min-height: 32px;
    max-width: 32px;
    max-height: 32px;
    transition: all 0.3s ease;
}

.custom-button .label {
    width: 100%;
    margin: 0 0.5rem;
    transition: all 0.15s ease;
}

.custom-button.hidden .label {
    overflow: hidden;
    margin: 0;
    width: 0;
    transition: all 0.15s ease;
}

.custom-button.hidden:hover .label, .custom-button.hidden:focus .label {
    width: 100%;
    margin: 0 0.5rem;
}

.custom-button.style1 svg.filled *,
.custom-button.style2:hover svg.filled *,
.custom-button.style3 svg.filled * {
    fill: var(--main-color);
}

.custom-button.style2 svg.filled *,
.custom-button.style1:hover svg.filled *,
.custom-button.style3:hover svg.filled * {
    fill: var(--second-color);
}

.custom-button.style1 svg.outlined *,
.custom-button.style2:hover svg.outlined *,
.custom-button.style3 svg.outlined * {
    stroke: var(--main-color);
}

.custom-button.style2 svg.outlined *,
.custom-button.style1:hover svg.outlined *,
.custom-button.style3:hover svg.outlined * {
    stroke: var(--second-color);
}

.custom-button.style1 .label,
.custom-button.style2:hover .label,
.custom-button.style3 .label {
    color: var(--main-color);
}

.custom-button.style2 .label,
.custom-button.style1:hover .label,
.custom-button.style3:hover .label {
    color: var(--second-color);
}

.custom-button.style1:hover {
    background-color: var(--main-color);
}

.custom-button.style2:hover {
    background-color: var(--second-color);
}

.custom-button.style3 {
    background-color: var(--second-color);
}

.custom-button.style3:hover {
    background-color: transparent;
    border-color: var(--second-color);
}

h1 {
    font-size: 4rem;
    margin-bottom: 2rem;
    font-weight: 700;
    transition: all 0.3s ease;
}

h2 {
    font-size: 2rem;
    margin-bottom: 0.5rem;
    font-weight: 400;
    transition: all 0.3s ease;
}

form {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    width: 90%;
    align-items: flex-end;
}

form textarea {
    width: 100%;
    border-radius: 25px;
    resize: none;
    font-size: 1.25rem;
    padding: 10px;
    outline: solid 1px var(--main-color);
    border: solid 2.5px transparent;
    transition: all 0.3s ease;
}

form textarea:focus {
    border-color: var(--main-color);
}

form button[type=submit]  {
    background-color: var(--second-color);
    color: var(--main-color);
    border: none;
    outline: none;
    font-weight: bold;
    padding: 0.8rem 1.5rem;
    border-radius: 25px;
    font-size: 1.25rem;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    cursor: pointer;
    transition: all 0.3s ease;
}

form button[type=submit]:hover, form button[type=submit]:focus {
    background-color: var(--main-color);
    color: var(--second-color);
}

form p {
    width: 100%;
    font-size: 1.5rem;
    text-align: center;
    transition: all 0.3s ease;
}

form p.error {
    color: rgb(160, 41, 41);
}

form p.success {
    color: green;
}

form p.warning {
    color: rgb(160, 117, 37);
}

@media (max-width: 1200px) {
    main {
        flex-direction: column;
        gap: 1rem;
    }
    main h1, main h2 {
        text-align: center;
    }
    main > * {
        width: 90% !important;
    }
} 

@media (max-width: 900px) {
    nav .custom-list, nav .custom-button {
        display: none;
    }
    nav #overlay-button {
        display: flex;
    }
    main h1 {
        font-size: 3rem;
    }
    main h2 {
        font-size: 1.5rem;
    }
    form p {
        font-size: 1.25rem;
    }
    form button[type=submit], form textarea {
        font-size: 1rem;
    }
}

@media (min-width: 600px) {
    #overlay .custom-list {
        flex-direction: row;
        gap: auto;
    }
    #overlay .custom-button {
        height: 54px;
        min-width: 54px;
    }
    #overlay .custom-button svg {
        min-width: 42px;
        min-height: 42px;
        max-width: 42px;
        max-height: 42px;
    }
    #overlay .custom-button .label {
        font-size: 1.25rem;
    }
}

@media (max-width: 400px) {
    #logo span {
        font-size: 1.75rem;
    }
}