/* Sinu enda pealkirja stiilid */
.parameetriBlokk {
    border: 1px solid #555;
    padding: 10px;
    margin-bottom: 10px;
    border-radius: 5px;
}
.parameetriBlokk ul {
    margin: 5px 0 0 0;
    padding-left: 20px;
}

:root {
  --background-body: #202b38;
  --background: #161f27;
  --background-alt: #1a242f;
  --selection: #1c76c5;
  --text-main: #dbdbdb;
  --text-bright: #fff;
  --text-muted: #a9b1ba;
  --links: #41adff;
  --focus: #0096bfab;
  --border: #526980;
  --code: #ffbe85;
  --variable: #d941e2;
  --highlight: #efdb43;
  --select-arrow: url("data:image/svg+xml;charset=utf-8,%3C?xml version='1.0' encoding='utf-8'?%3E %3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' height='62.5' width='116.9' fill='%23efefef'%3E %3Cpath d='M115.3,1.6 C113.7,0 111.1,0 109.5,1.6 L58.5,52.7 L7.4,1.6 C5.8,0 3.2,0 1.6,1.6 C0,3.2 0,5.8 1.6,7.4 L55.5,61.3 C56.3,62.1 57.3,62.5 58.4,62.5 C59.4,62.5 60.5,62.1 61.3,61.3 L115.2,7.4 C116.9,5.8 116.9,3.2 115.3,1.6Z'/%3E %3C/svg%3E");
}

h1 { 
    text-align: center;
    border: 2px solid Tomato;
}

h1:hover {
    background-color: #D6EEEE; 
}

/* Sinu enda loodud kastide stiilid */
.tabeliPaigutus {
    padding: 0px 120px;
}

.rohelineKast {
    border: 3px solid green;
    padding: 20px; /* Soovitan lisada sisu ja ääre vahele veidi õhku */
}

p {
    text-align: center; 
    font-size: 200%; 
}



/* Tee kõik lingid suuremaks, kirjutades Water.css üle */
a {
    display: inline-block;  /* 1. See on vajalik, et padding ja margin toimiksid korrektselt */
    padding: 10px 15px;     /* 2. SUURENDAB KLIKIALA (10px üleval/all, 15px külgedel) */
    margin: 5px;            /* 3. Lisab linkide ümber õhku, et nad kokku ei kleepuks */
    border-radius: 6px;     /* 4. Teeb nurgad kenasti ümaraks (nagu nuppudel) */
    font-size: 1.25em;      /* 5. Suurendame fonti mõistlikult, mitte liiga palju */
    text-align: center;
    text-decoration: none;  /* Eemaldab vaikimisi allajoone */
}

/* Lisame ka kerge taustaefekti hiirega peale minnes, et kasutaja näeks, et see on klikitav */
a:hover {
    background-color: rgba(255, 255, 255, 0.1); /* Läbipaistev valge taust */
    text-decoration: none; /* Hoiame allajoone ka siin ära */
}




/* ------------------------------------------- */
/* LAHENDUS flexboxi konfliktile Water.css-iga */
/* ------------------------------------------- */

.rida {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    /* !important pole enam vajalik, sest lahendame probleemi õigesti */
}

/* See reegel kirjutab üle Water.css-i 'display: block' reegli */
.rida > label,
.rida > input {
    width: auto; /* Laseb elemendil olla nii lai kui vaja, mitte 100% */
}

/* See on lisaboonus, et sisestusväljad täidaksid ilusti vaba ruumi */
.rida > input {
    flex-grow: 1;
}