@import 'variables.css';

html {
    font-family: var(--fontfamily, 'Helvetica', sans-serif);
    color: var(--text_color, #afb0b1);

    body {
        height: 100%;
        margin: 0;
        padding: 0;
        display: flex;
        flex-direction: column;
        min-height: 100dvh;
        background-color: var(--profile_background_color, #1e1e1e);

        main {
            flex: 1;
        }

        .main_layout {
            display: flex;
            gap: 1rem;
            flex: 1;

            > .profile_container {
                display: flex;
                flex-direction: column;
                height: 100vh;

                #my_name {
                    font-size: 2rem;
                    font-weight: bold;
                    margin-top: 1rem;
                    margin-bottom: 0;
                    text-align: center;
                }

                > .demography {
                    text-align: center;
                }
            }

            > .main_container {
                background-color: var(--main_background_color, #1a1a1e);
            }
        }

        .main_container {
            display: flex;
            flex-direction: column;
            min-height: 100%;

            > .about_me h2,
              .about_me p {
                margin-top: 4rem;
                margin-left: 5rem;
                margin-right: 5rem;
            }

            > .skills,
            .tmi {
                margin-left: 2rem;
                margin-right: 2rem;
            }
        }

        .footer_container {
            text-align: center;
            padding: 1rem;
            margin-top: auto;
        }

        footer {
            padding: 1rem;
            text-align: center;
        }

        /* Nav Bar */
        .nav_bar {
            margin-top: 2rem;
            margin-right: 3rem;
            justify-content: right;
            display: flex;
            gap: 3rem;

            a {
                color: var(--text_color, #afb0b1);
                text-decoration: none;
                font-size: 2rem;
            }
        }

        /* Aside */
        .profile_picture {
            width: 12rem;
            height: auto;
            border-radius: 20%;
            margin-top: 2rem;
            margin-left: 3rem;
            margin-right: 3rem;
        }

        .social_container {
            display: flex;
            flex-direction: column;
        }

        .languages,
        .hobby,
        .social_container {
            margin-top: 0.5rem;
            padding: 0 1rem;
            border-top: 1px solid rgba(255, 255, 255, 0.1);

            h2 {
                font-size: 1rem;
            }

            p:first-child {
                font-size: 0.9rem;
                margin-bottom: 0.5rem;
            }

            p:not(:first-child) {
                margin: 0.3rem 0;
                font-size: 0.9rem;
            }
        }

        .toggle {
            margin-top: 0; 
            text-align: center;
            padding: 1rem 0;
        }
          
          .toggle button {
            background: none;
            color: #afb0b1;
            border: none;
            cursor: pointer;
            font-size: 1.5rem;
            margin-left: 0.5rem;
          }

        a,
        a:visited,
        a:hover,
        a:active {
            color: var(--text_color, #ffffff);
        }
    }
}

html[data-theme="light"] {
    --main_background_color: white;
    --profile_background_color: white;
    --container_color: white;
    --text_color: #000000;
}
  
html[data-theme="dark"] {
    --main_background_color: #1a1a1e;
    --profile_background_color: #1e1e1e;
    --text_color: #afb0b1;
}

/* Mobile */
@media (max-width: 600px) {
    .main_layout {
        flex-direction: column;
    }
  
    .profile_container {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        margin-bottom: 1.5rem;
    }
  
    .profile_picture {
        width: 8rem;
    }
  
    .main_container .about_me h2, p {
        margin: 1.5rem;
    }
  
    .nav_bar {
        justify-content: center !important;
        gap: 1rem !important;
        margin: 1rem 0 !important;
      }
    
      .nav_bar a {
        font-size: 1.2rem !important;
    }
}
  
/* Tablet */
@media (min-width: 601px) and (max-width: 1024px) {
    .main_layout {
        flex-direction: column;
    }
    
    .profile_container {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        padding: 1rem;
    }
    
    .profile_picture {
        width: 10rem;
    }
    
    .main_container .about_me p {
        margin: 2rem;
    }

    .nav_bar {
        align-items: center;
        gap: 1rem;
        justify-content: center !important;
        text-align: center;
    }
}