/* set up css variables */
:root {
    --logored:#c8102e;
    --logoblue:#0088aa;
    --logoprincipal:#00af59;
    --logoprincipaldarker:#269653;
    --logosecondary:#c8102e;
    --backgroundcolor:white;
    --footercolor:black;
    /* --infobackground:var(--logosecondary); */
    --infotext:lightgrey;
    --normaltextcolor:#4d4d4d;
    --urlbackground:antiquewhite;

    --buttoncy: var(--logosecondary);
    --buttonen: var(--logoprincipaldarker);
    --textcy: var(--logosecondary);
    --texten: var(--logoprincipaldarker);
    --infocy: var(--logosecondary);
    --infoen: var(--logoprincipaldarker);
    --footera: var(--logoprincipaldarker);
    --symbolcolor: var(--logosecondary);
    --buttonradius: 1.5rem;
    --buttonpadding: 0.5rem 1rem;
}
[data-theme="dark"] {
    --backgroundcolor:#1d2a35;
    --footercolor:azure;
    /* --infobackground:var(--logosecondary); */
    --infotext:white;
    --normaltextcolor:azure;
    --urlbackground:var(--backgroundcolor);

}
body {
    font-family: 'Red hat display', sans-serif;
    font-weight: 400;
    height:100dvh;
    margin:0px;
    background-color: var(--backgroundcolor);
    visibility:hidden;
}

h1 {
    font-size: min(1.5rem,5dvh);
    font-weight:400;
    margin:0px;
}
#contentboxerror h1 {
    padding:0 2rem;
    font-size: min(1.8rem, 7dvh);
}

p, input, button {
    font-size:min(2rem, 6dvh);  /*so leaves space to fit everything in if sideways on mobile*/
    margin:0 0 0.3em 0;
}
p.remember {
    /* padding-top:1.5rem; */
    font-size:1rem;
}
#rememberchoice {
    height:0.7rem;
    width:0.7rem;
    accent-color:var(--logored);
    cursor:pointer;
}
button {
    font-family:inherit;
    /* border:2px black solid; */
    border:none;
    border-radius:var(--buttonradius);
    padding:var(--buttonpadding);
    color:white;
    cursor:pointer;
}
button:hover {
    background-color: lightgrey;
}
#enbutton {
    background-color: var(--buttonen)
}
#cybutton {
    background-color: var(--buttoncy);
}
.entext {
    color:var(--texten);
}
.cytext {
    color:var(--textcy);
}
.infosymbol {   /*unicode symbols*/
    font-size:1.1em;
}

#cyinfo, #cyinfo a, #eninfo, #eninfo a {
    text-align:center;
    font-size:0.8rem;
    text-decoration:none;
}
#cyinfo a {
    color:var(--infocy);
}
#eninfo a {
    color:var(--infoen);
}
#infoboxcy, #infoboxen {
    display:none;
}
.infoboxurl {
    background-color: var(--urlbackground);
    border:1px var(--normaltextcolor) solid;
    border-radius: 0.2rem;
    padding:0.2rem 0.5rem 0.2rem 0.5rem;
    margin:0.5rem 0 0.5rem 0;
    display:inline-block;
    color: var(--normaltextcolor);
    max-width: min(55vw,350px);
    overflow:auto;
}
.infoboxblock {
    display:flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content:flex-start;
    gap:0.2rem;
    text-decoration:none;
}
.infoboxblock a {
    text-decoration:none;
    color: var(--normaltextcolor);
}
.infoboxblock:hover a {
    text-decoration:underline 2px solid var(--texten);
    text-underline-offset: 2px;
}

#contentdiv { 
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:space-between;
    height:100dvh;
}
#logodiv {
    display: flex;
    flex-direction: column;
    align-items: center;
    /* padding-bottom:min(13dvh,3.5rem); */
    /* padding-bottom:min(6dvh,3.5rem); */
    padding-bottom:min(8dvh, 3.5rem);
}
#logoimg { 
    /* max-height: min(4.5rem, 10dvh); */
    /* max-width: 12rem;
    max-height: min(6rem, 10dvh); */
    /* max-height: min(30rem, 20dvh);
    max-width: min(20rem, 50dvw); */
    /* max-height:min(25vmax, 15rem); */
    /* max-width:min(25vmax,15rem); */
} 

#spacerdiv {
    flex-grow:1.2;
}

#contentbox, #contentboxerror {
    display:flex;
    flex-direction:row;
    flex-wrap: wrap;
    align-items:center;
    justify-content: center;
    gap:7rem;
    row-gap:2em;
    text-align: center;
    flex-grow:0;
}

#contentboxerror {
    flex-direction:column;
}

#endiv, #cydiv {
    display: flex;
    flex-direction:column;
    justify-content: center;
}


#footertext {
    display:flex;
    flex-direction: column;
    justify-content: end;
    width:auto;
    font-size:min(0.9rem,3.5dvh);
    color:var(--footercolor);
    padding:0 0 2rem 0;
    text-align: center;
    flex-grow:1;
}
#footertext a {
    color:var(--footera);
    text-decoration: none;
    font-weight:400;
}
#footertext a:hover {
    text-decoration:underline 2px solid var(--texten);
    text-underline-offset: 2px;
}

#linkinfo {
    position:fixed;
    z-index: 10;
    border:1px grey solid;
    border-radius:0.5rem;
    padding:1rem;
    display:none;
    width:min(60vw,400px);
    height:auto;
    /* align-items:center; */
    text-align: left;
    top:35%;
    background-color: var(--backgroundcolor);
}
#linkinfo p{
    margin:0 0 0.5em 0;
    color:var(--normaltextcolor);
    font-size:1rem;
    text-align:left;

}
#infoclosebutton {
    text-align:right;
    position:absolute;
    top:-1rem;
    right:-1rem;
    background-color: var(--backgroundcolor);
    line-height:0; /*removes whitespace below character*/
    cursor:pointer;
    color:var(--symbolcolor);
}
#infoclosebutton a {
    color:var(--symbolcolor);
}
.symbol {
    color:var(--symbolcolor);
}