/* colors of the site */
:root {
    --primary: #582C83;
    --second: #FFB81C;
    --dark: #000;
    --light: #fff;
    font-family: Times New Roman, serif;
    --font-line-content: 1.75;
    --font-line-normal: 1.5;
    --font-line-header: 1.25;
    --font-line-ui: 1;
    --font-size-largest: 3rem;
    --font-size-larger: 2rem;
    --font-size-large: 1.5rem;
    --font-size-medium: 1.25rem;
    --font-size-normal: 1rem;
    --font-size-small: 0.7rem;
    --font-size-smaller: 0.5rem;
    --font-weight-normal: 400;
    --font-weight-bold: 600;
}

*{
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}
body {
    margin:0;
    
}

header a{
    color: inherit;
    text-decoration:inherit;
}

#menu a{
    margin:0.5em;
    align-content: center;
    justify-content:right;
}

#logo,#menu{
    text-decoration:none;
    margin:0;
    text-shadow:var(--second) 1px 0 10px;
}

header{
    width: 100%;
    height: 5.5rem;
    background-color:var(--primary);
    color:var(--light);
    display:grid;
    grid-template-areas: "logoH . menu";
}

#logo{
    grid-area:logoH;
    display:infline-flex;
    font-size:var(--font-size-largest);
    text-align:center;
    padding: 1vh;
    height:100%;
    align-items: center;
    width:fit-content;
}


#menu{
    display: flex;
    grid-area: menu;
    font-size:var(--font-size-large);
    align-items: center;
    float: right;
    justify-content: right;
}

#form{
    grid-area:form;
    align-content: space-around;
}

#logo p{
    margin-top: 0;
    font-size-adjust: 0.545;
    font-size:var(--font-size-small);
}

@media (width > 480px) {
    footer{
        grid-template-areas:
            "logo logo"
            "tech tech"
            "form form"
            "c c ";
        grid-template-rows:1fr 0.5ffr 0.5fr 1fr;
        grid-template-columns: 1fr 3fr;
        grid-gap:7px;
    }

    #form{
        font-size:var(--font-size-small);
    }
}

@media (width > 640px) {
    footer{
        grid-template-areas:
            "logo tech"
            "logo form"
            "logo c ";
        grid-template-rows: 1fr .25fr min-content;
        grid-template-columns: 1fr 3fr;
    }

    #form{
        font-size:var(--font-size-small);
    }
    
}

@media (width > 1000px) {
    footer{
        grid-template-areas:
            "logo tech"
            "logo form"
            "logo c ";
        grid-template-rows: 1fr .5fr min-content;
        grid-template-columns: .5fr 2fr;
    }
    
    #form{
        font-size:var(--font-size-normal);
    }
    #logo p{
    margin-top: 0;
    font-size-adjust: 0.545;
    font-size:var(--font-size-small);
}
}

@media (width<640px){
    .brand{
        grid-template-columns: subgrid;
        grid-template-rows: subgrid;
    }
    
    #logo p{
        margin-top: 0;
        font-size-adjust: 0.545;
        font-size:var(--font-size-smaller);
    }
    
    
    #menu {
      1font-size:var(--font-size-medium);
    }
    
}


footer{
    padding: 0.5rem;
    width:100%;
    font-size:var(--font-size-normal);
    background-color:var(--second);
    display:grid;
}

.brand{
    font-size:var(--font-size-largest);
    font-weight:var(--font-weight-bold);
    grid-area:logo;
    padding:5px;
    color: var(--primary);
    text-decoration:none;
}

#tech{
    grid-area:tech;
    font-size: var(--font-size-large);
    font-weight: var(--font-weight-bold);
    align-content: space-around;
}

#disclaimer{
    grid-area:c;
    font-size:var(--font-size-small);
}

#form > a{
    display:contents;
}