:root {
    --yellow: #ffde0f;
    --black: #1e191a;
    --smaller-side: min(1vw, var(--vh, 1vh));
    --logo-size: calc( 20 * var(--smaller-side) );
    --logo-width: min(  4.5em, var(--logo-size)  );
    --logo-height: min( 6.0em, calc(var(--logo-size) * 4 / 3));
    --central-height: 60;
    --button-size: min(var(--logo-height) / 3, 1cm);
}

body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh; /* Fallback for browsers that do not support Custom Properties */
    height: calc(var(--vh, 1vh) * 100);

    font-family: sans-serif;
}

a {
    background-color: var(--yellow);
    color: var(--black);
    padding-left: 0.2em;
    padding-right: 0.2em;
    border-radius: 0.2em;
}

.page {
    position: relative;

    width:  min(100%, 1200px);
    height: min(100%, 1000px);
    
    display: flex;
    flex-direction: column;
    gap: 1em; /* fallback */
    gap: calc( 0.2 *  var(--vh, 1vh) );
    
}

.content  {
    position: relative;

    display: flex;
    justify-content: center;
 
    padding:1em;

    flex-grow:   6; 

    min-width:  320px;
    min-height:  14em;

    min-height:  calc( min( var(--vh, 1vh) * var(--central-height), 600px) + 2.5em );
    max-height:  calc( min( var(--vh, 1vh) * (var(--central-height) - 20), 600px) + 4em );

    font-size: 80%;
}


#left, #right, #middle {
    margin: 1mm;
    padding: min(1vw, 5mm);
    
    border-radius: 5mm;
    border-style: solid;
    border-color: black;
    border-width: 5px;

    flex: 1 1 0px;
    overflow: auto;

    min-width:   20em;
    min-height:  12em;

    width: calc(100vw - 50px );
    height: min( var(--vh, 1vh) * var(--central-height), 600px); 
}

.yellow {
    background-color: var(--yellow);
}

#left {
    background-color: var(--yellow);
    position: absolute;

    left: 0;
    top: 0;
    z-index: 2;
}

#right {
    background-color: white;
    position: absolute;

    right: 0;
    bottom: 0;
    z-index: 1;
}

.toggle {
    position: absolute;
    right: 0;
    bottom: 0;
    margin: 0em;
}

#left .toggle {
    display: none;
}

dialog {

    position: fixed;
    
    max-width: 80vw;
    z-index: 2;
    box-shadow: 5px 5px 5px grey;

    background-color: var(--yellow);
    border-radius: 0.5em;
    border-width: 5px;
    border-color: var(--black);
    border-style: solid;

    display: none; /* flex; */
    flex-direction: column;
    justify-content: space-around;
    gap: 1em;

    padding: 0.5em;
}

dialog > div {
    padding: 1em;
    text-align: center;
}

dialog > button {
    background-color: var(--black);
    color: white;
    max-height: 2em;
}

.dialog-text {
    text-align: justify;
}

.complementar-info {
    display: none;
}

.title, .toggle {
    font-size: 150%;
    font-weight: bold;
    margin-bottom: 2mm;
    margin-right: 2mm;
    margin-left: 2mm;
}

.subtitle {
    font-size: 120%;
    font-weight: bold;
    margin: 3mm;
}

#telefoneNumber, #emailAddress {
    font-family: 'Courier New', Courier, monospace;
    font-weight: bold;
    text-align: center;

    margin-top: 5mm;
    margin-bottom: 5mm;

    background-color: var(--black);
    color: white;

    border-radius: 0.2em;
}

#telefoneNumber {
    font-size: min(10vw, 320%); 
    word-spacing: -0.4em;   
}

.ast {
    font-size: medium;
    position: relative;
    top: -0.5em;
}

#emailAddress {
    font-size: min(5vw, 150%);
}

.highlight {
    background-color: var(--yellow);
}


.sponsors {
    display: flex;
    justify-content: flex-end;
    gap: 1vw;
    
    background-color: var(--black);
    color: whitesmoke;

    font-size: 90%;

    padding: min(1vh,1em);
    margin-bottom: 1em;

    min-width: 330px;
}

.sponsors > a {
    background-color: transparent;
}

.loader {
    display: none;
    position: fixed;
    
    z-index: 3;

    border:         16px solid var(--black);
    border-radius: 50%;
    border-top:     16px solid var(--yellow);
    border-bottom:  16px solid var(--yellow);
    width: 120px;
    height: 120px;
    -webkit-animation: spin 2s linear infinite;
    animation: spin 2s linear infinite;
  }
  
  @-webkit-keyframes spin {
    0% { -webkit-transform: rotate(0deg); }
    100% { -webkit-transform: rotate(360deg); }
  }
  
  @keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}


.blink {
    animation: blink-animation 1s steps(5, start) infinite;
    -webkit-animation: blink-animation 1s steps(5, start) infinite;
  }
  @keyframes blink-animation {
    to {
      visibility: hidden;
    }
  }
  @-webkit-keyframes blink-animation {
    to {
      visibility: hidden;
    }
  }