@import url("var.css");
@font-face {
    font-family: Roboto-Flex;
    src: url(RobotoFlex-VariableFont_GRAD,XOPQ,XTRA,YOPQ,YTAS,YTDE,YTFI,YTLC,YTUC,opsz,slnt,wdth,wght.ttf);
    font-display: fallback;
}
@view-transition {
   navigation: auto;
}
:root{
    --header-background: rgb(188, 188, 188);
    --bg-page: #f0f2f5;        
    --bg-section: white;     
    --text-primary: #2c3e50;   
    --text-secondary: #555;    

    --color-primary: color(srgb 0.0941 0.7373 0.6118);
    --color-primary-dark: color(srgb 0.0824 0.6471 0.5373);
    --color-header: color(srgb 0.2039 0.2863 0.3686);   

    --color-primary-hover: color-mix(in srgb, var(--color-primary) 80%, black 20%);
    --char-count-color: #555;
    --error-color: #c00;
} 

[data-theme="dark"] {
  --bg-page: #1e1e1e;
  --bg-section: #2e2e2e;
  --text-primary: #e0e0e0;
  --header-bg: #222222;
  --char-count-color: #e0e0e0;
  --text-secondary: #e0e0e0;
}

*{
    box-sizing: border-box;
    padding: 0;
    margin: 0;
    font-size: 1.2rem;
}

body{
    width: 90dvw;
    height: 100dvh;
    margin: 0 auto;
    font-family: Roboto-Flex, 'Open Sans', sans-serif;
    background: var(--bg-page, #f0f2f5);
    color: var(--text-primary);
    line-height: 1.5;
}
header {
    padding: 0 0.9rem;
    background-color: var(--color-header, #34495e);
    margin: 0.5rem 0;
    border-radius: 8px;
    display: flex;
    align-items: center;
    
    justify-content: space-between;
    
    
    h1 {
        color:#ecf0f1;
        font-size: 1.5rem;
    }
    
    nav{
        margin: 1rem;
        display: flex;
        justify-content: center;
        
        gap: 10px;

        ul {
            display: flex;
            flex-wrap: wrap;
            list-style:none;
            justify-content: center;
            
        }
        li a {
            display:block;
            background: var(--color-primary, #18bc9c); 
            padding: 10px;
            margin: 10px;
            border-radius: 4px;
            gap: 20px;
            text-decoration: none;
            color: white;
            transition: background 0.3s ease,
                        transform 0.2s ease;

        }
        li a:hover{
            background: var(--color-primary-hover, #15a589);
            transform: scale(1.05);
        }


    }
}
#button-container{
    text-align: right;
}
.theme-toggle {
    display: inline-block;
    margin-top: 0.5rem;      
    padding: 0.5rem 1rem;
    width: 100%; 
    background: var(--bg-section);
    color: var(--text-primary);
    border: 1px solid var(--text-primary);
    border-radius: 4px;
    cursor: pointer;
}

main{
    display: flex;
    gap: 1rem;
    align-items: stretch;
    flex-wrap: wrap;
    
    * {
        margin: 0.1rem 0;
    }

    section {
        background-color: var(--bg-section, white);
        border-radius: 8px;
        padding: 0.5rem 0.5rem;
        box-shadow: 0 2px 6px rgba(0,0,0,0.1);
        flex: 1 1 100%;

        * {
            text-align:start;
        }
        h2 {
            text-decoration: underline;
            margin-bottom: 1rem;
            text-align:  left;
            color: var(--color-primary, #18bc9c);
            padding-bottom: 0.2rem;
        }
        p, li {
            color: var(--text-secondary);
        }
        dl dt{
            font-weight: bold;
            text-decoration: underline;
        }
    }
    cred-entry{
        margin: 0 0 1rem 0 ;
        
    }
    picture, figure {
        background-color: var(--bg-section, white);
        border-radius: 8px;
        padding: 0.5rem 0.5rem;
        box-shadow: 0 2px 6px rgba(0,0,0,0.1);
        
    }
    #about-section{
        flex: 1 1 50%;

    }

    #hobbies-section ul, ol{
        list-style-position: inside;
        padding-left: 1.25rem;
    }

    #project-section aside{
        border-left: 4px solid var(--color-primary, #18bc9c);
        padding-left: 0.75rem;
        margin: 1rem 0;
        background: rgba(24, 188, 156, 0.1);
    }
    aside {
        border-left: 4px solid var(--color-primary, #18bc9c);
        
    }
    #education{
        flex: 1 1 50%;
    }
    
}
footer{
    display:flex;
    align-items: stretch;
    justify-content: center;
    padding-top: 1rem;
    gap: 1.5rem;
}
form {
    padding: 1rem;
    background: var(--bg-section);
    border-radius: 4px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
    flex: 1 1 50%;
    
    fieldset {
        border: none;
        padding: 0;

    }
    legend {
        font-size: 1.25rem;
        font-weight: bold;
        color: var(--color-primary, #18bc9c);
    }
    label {
        display: block;
        margin-bottom: 0.25rem;
        color: var(--text-primary, #2c3e50);
    }
    input,
    textarea {
        width: 100%;
        padding: 0.5rem;
        border: 1px solid black;
        border-radius: 4px;
        margin-bottom: 1rem;
        font-family: inherit;
    }
    span{
        font-size: 0.9em;
    }
    .error {
        display: none;
        color: var(--error-color);
    }

    #fullname-field:user-invalid ~ #name-error,
    #email-field:user-invalid ~  #email-error,
    #message-field:user-invalid ~ #message-error {
        display: block;
    }
    
   &:invalid #info::after {
        content: 'Error: at least one field is incorrect';
        color: var(--error-color);
    }


    &:valid #info::after {
        content: 'All fields correct!';
        color: #090;
    }

    
    button {
        background: var(--color-primary);
        color: white;
        border: none;
        padding: 0.75rem 1.5rem;
        border-radius: 4px;
        cursor: pointer;
        font-size: 1rem;
    }
    button:hover {
        animation-name: buttonAnimation;
        animation-duration: 0.5s;
        animation-fill-mode: forwards;
    }

    @keyframes buttonAnimation {
        from { background: var(--color-primary, #18bc9c);}
        to {background: var(--color-primary-hover, #15a589);
            transform: scale(1.05);}
    }
}

.char-count{
    color: var(--char-count-color);
}
.char-count.warning {
    color: var(--error-color);
}
@keyframes flash-outline {
  0%, 100% { box-shadow: 0 0 0 3px var(--error-color); }
  50%     { box-shadow: 0 0 0 0 var(--error-color); }
}

.flash {
  animation: flash-outline 0.3s ease-in-out;
}
footer:has(table){
    padding-bottom: 2rem;
}

footer table {
    flex: 1 1 50%;
    border-collapse: collapse;
    border-radius: 4px;
    background: var(--bg-section);
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

footer caption {
    background-color: var(--color-primary, #18bc9c);
    caption-side: top;
    font-size: 1.2rem;
    font-weight: bold;
    color: white;
}

footer th,
footer td {
    border: 1px solid #ddd;
    padding: 0.75rem;
    text-align: center;
}

footer th {
    background: var(--color-primary, #18bc9c);
    color: white;
    text-transform: uppercase;
    font-size: 0.9rem;
}

@media (max-width: 800px) {

    #about-section,
    main > picture,
    main > figure {
        flex: 1 1 100%;
    }
    main > picture {
        max-width: 270px;
    }

    header nav ul, footer table:not(#mobile-schedule) {
        display: none;
    }

    #nav-menu {
        display: block;
    }
    #nav-menu summary {
        list-style: none;
        background: var(--color-primary, #18bc9c);
        color: white;
        padding: 0.5rem 1rem;
        border-radius: 4px;
        cursor: pointer;
        margin: 0.25rem 0;
        overflow: hidden;
        
    }
    
    #nav-menu ul {
        display: block;
        list-style: none;              
    }

    #nav-menu::details-content{
        max-height: 0;               
        transform-origin: top;       
        transform: scaleY(0);       
        opacity: 0;                 
        overflow: hidden;            
        list-style: none;

        
        transition:
        max-height 1s ease,
        transform   1s ease,
        opacity     0.3s ease;
    } 
        
    #nav-menu:open::details-content {
        max-height: 1600px;           
        transform: scaleY(1);        
        opacity: 1;                  
    }

    #nav-menu ul li {
        margin: 0.25rem 0;
        
    }
    

    #nav-menu ul li a {
        display: block;
        padding: 0.5rem 1rem;
        background: var(--color-primary, #18bc9c);
        border-radius: 4px;
        color: white;
        text-decoration: none;
        
    }
    footer{
        display: block;

    }
    form{
        display: block;
        margin: 1rem 0;
        width: 100%;
    }
    table {
        display: table;
        width:100%
    }
    
   

}

@media (min-width: 801px) and (max-width: 1024px) {

    #about-section {
        flex: 1 1 60%;
    }
    main > picture,
    main> figure {
        flex: 1 1 35%;
    }
    
    #nav-menu{
        display: none;
    }
    #mobile-schedule {
        display:none
    }
    footer{
        flex-wrap: wrap;
        flex-direction: row;
    }
}

@media screen and (min-width: 1025px) {  
    #nav-menu{
        display: none;
    }
    #mobile-schedule {
        display:none
    }
}