style.css

body{
    margin:0;
    padding:0;
    font-family: Arial, Helvetica, sans-serif;
}

header{
    background: linear-gradient(90deg,#2563eb,#1e40af);
    color:white;
    padding:30px;
    text-align:center;
    font-size:32px;
    font-weight:bold;
    letter-spacing:1px;
    box-shadow:0px 3px 10px rgba(0,0,0,0.2);
}
/* flex-elementy vedla seba*/
.kontajner{
    display:flex;
    min-height:83vh;
}

nav{
    width:240px;
    min-width:240px;
    background:#0f172a;
    display:flex;
    flex-direction:column;
    padding-top:30px;
    box-shadow:2px 0px 10px rgba(0,0,0,0.1);
}
/*column-pod sebou*/
/*padding-top- priestor od vrchu*/

nav a{
    color:white;
    text-decoration:none;
    padding:18px 25px;
    font-size:18px;
    transition:0.3s;
    border-left:4px solid transparent;
}
/*zmena vzhľadu elementu keď naň ideš myšou*/
nav a:hover{
    background:#1e293b;
    border-left:4px solid #3b82f6;
    padding-left:35px;
}
/* padding- priestor medzi okrajom a textom*/
main{
    flex-grow:1;
    padding:40px;
}

section{
    background:white;
    padding:30px;
    border-radius:15px;
    box-shadow:0px 4px 15px rgba(0,0,0,0.08);
}
/*border radius-zaoblene rohy*/
h1{
    color:#2563eb;
    margin-top:0;
}

h2{
    color:#2563eb;
    margin-top:0;
}

p{
    line-height:1.8;
    font-size:17px;
}

footer{
    background:#0f172a;
    color:white;
    text-align:center;
    padding:18px;
}
/*ak je okno  pre mobil, nav a main budu pod sebou*/
@media(max-width:768px){
/*column- ide zhora nadol */
.kontajner{
    flex-direction:column;
}

nav{
    width:100vw;
    flex-direction:row;
    justify-content:center;
    flex-wrap:wrap;
    padding:10px 0;
}

nav a{
    padding:12px 18px;
}

nav a:hover{
    padding-left:18px;
}

main{
    padding:20px;
}
}

table,td,th{border:1px rgb(20, 1, 1) solid;
            border-collapse: collapse;
        }
table{margin:auto;
      padding: auto;}  
th,td {width: 22vw;
       height: 9vh;}
thead{background: linear-gradient(81deg,rgb(219, 133, 3) 0%, rgba(9, 6, 206, 0.425) 28%, rgb(3, 109, 9) 61%, rgba(250, 250, 2, 1) 100%);}
table{background-image: url('https://tipsmake.com/data/images/100-beautiful-background-png-picture-30-oANs4bDa0.png');}
caption{text-shadow: 0.8px 1px rgb(255, 136, 0);
     text-transform: uppercase;
     font-weight: 800;}