* {
  box-sizing:border-box;
  margin: 0;
  padding: 0;
}
/* nastavenie stranky, plati pre cele telo stranky*/
body {
  min-height: 100vh;
  max-width: 100vw;
  overflow-x:auto;
  display: flex;
  flex-direction: column;
 background-image:url("../images/wp.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
  font-family: 'Courier New', Courier, monospace;
  text-shadow: rgba(0, 0, 0, 0.8) 0.5px 0.5px;
  font-size: 13pt;
  justify-content: stretch;
  align-items: center;
  color: aliceblue;
  text-align: center;
}
/*Nastavnie hlavicky*/
header {

  width: 100%;
  align-items: center;
  padding: 0 0 0 0;
  margin-top: 0;
  background-color: #000000;
  background-size: 100%;
}
/*Vlastnosti kontajneru hlavicky*/
.container_h{
  display: flex;               
    justify-content: center;     
    align-items: center;
    gap: 2rem;       
    width: 100%;                     
    padding: 0;
}
/*Vlastnosti poloziek kontajneru hlavicky*/
.container_h li {
  display: inline;
}
#sustava_nadpis{
  text-align: center;
  margin-top:0;
  margin-bottom: 3rem;
}
#nazov {
  color: rgb(255, 255, 255);
  text-shadow: rgb(99, 215, 232) 2px 2px;
  text-align: center;
}
/*velkost loga*/
#logo {
  height: 5rem;
}
/*nastavenie navbaru*/
.topnav {
  width: 100vw;
  text-align: center;
  background-color: rgb(255, 255, 255, 0.75);
  margin-top: 0;
  padding-top: 15px;
  padding-bottom: 15px;
}
/*nastavenie poloziek navbaru aby boli vedla seba*/
.topnav li{
  display: inline;
}
/*nastavenie prvkov navbaru*/
#home,
#contact,
#planety,
#news,
#about {

  font-size: 20pt;
  color: rgb(0, 0, 0);
  text-transform: uppercase;
  background-color: transparent;
  font-family: sans-serif;
  padding: 10px 30px;
  border-radius: 10px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}
/*reakcia prvkov ak sa na nich nachadza kurzor*/
#planety:hover,
#home:hover,
#news:hover,
#contact:hover,
#about:hover {
  background-color: #555;
  color: #fff;
}
/*vlastnosti fotky supernova*/
#supernova {
  width: 50%;
  border-radius: 3rem;
  display: block;
  margin: auto;
}
/*vlastnosti textu na stranke*/
.text{
  text-align:justify;
   margin-left: 5vw;
   margin-right: 5vw;
}
.obsah {
  display: flex;
  justify-content: center;
  gap: 4rem;
  margin: 2rem;
}
.ss{
  list-style:none;
}
/*vlastnosti videa*/
.video{
  display: block;
   margin: auto;
   margin-top: 3rem;
   border-radius: 3rem;
}
/*nastavenie kontajneru pre galeriu*/
.container {
  position: relative;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}
/*nastavenie kariet pre galeriu*/
.container .card {
  width: 20%;
  position: relative;
  height: 20rem;
  background: #f0f0f0;
  display: flex;
  flex-direction: column;
  margin: 1rem;
  transition: 0.3s ease-in-out;
  margin-top: 5%;
  border-radius: 10px;
  overflow: hidden;
  display: inline;
  color: #000000;
}
/*nastavenie priestoru pre obrazky vramci kariet*/
.container .card .imgBx {
  background-color: #000000;
  width: 100%;
  height: 60%;
}

/*nastavenie obrazkov v priestore*/
.container .card .imgBx img {
  display: block;
  margin: auto;
  max-width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 10px 10px 0 0;
}
/*nastavenie obsahu kariet*/
.container .card .content {
  padding: 10px;
  flex: 1;
}
/*reakcia obrazkova na kurzor*/
.imgBx:hover img {
  transform: scale(1.2);
}


.container_g {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 4% 10% 0 10%;
}

.container_g .box {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.container_g .box .images {
  display: flex;
  flex-direction: column;
  width: 32.5%;
}

.container_g .box .images img {
  width: 100%;
  border-radius: 5px;
  margin-bottom: 10px;
  transition: all 0.4s ease 0s;
}

.container_g .box .images img:hover {
  box-shadow: 0 8px 16px 0 #4245f1;
  width: 102%;
  transition: all 0.4s ease 0s;
}

.h2_g {
  padding: 4.5% 5% 4.5% 5%;
  margin-bottom: 15px;
  width: 100%;
  font-size: 70px;
  color: rgb(255, 255, 255);
  background-color: rgba(2, 2, 2, 0.8);
  border-radius: 10px;
  text-decoration: none;
  transition: all 0.5s ease 0s;
  text-align: center;
  font-weight: normal;
}

.h2_g:hover {
  transition: all 0.5s ease 0s;
  box-shadow: 0 8px 16px 0 #513529;
}


/*nastavenie paty*/
#footer {
  color: aliceblue;
  background-color: #000000;
  padding: 1% 5% 3% 1%;
  margin-top: 5%;
  margin-bottom: 0;
  width: 100%;
  font-size: 17px;
  bottom: 0;
  height: 2.5rem;

}
/*vastnosti insta loga*/
#insta {
  text-shadow: none;
  background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 3rem;
}
/*vlastnosti facebook loga*/
#facebook{
  font-size:3rem;color:#4267B2
}
/*vlastnosti tlacidiel fb ig*/
#tlacidla{
  display: flex; 
  list-style: none; 
  justify-content: center;
}
/*valstnosti kotvy*/
.floating-icon {
  position: fixed;
  bottom: 20px; 
  right: 20px; 
  z-index: 1000;
  cursor: pointer;
  transition: transform 0.3s ease;
  font-size: 3rem;
  color: aliceblue;
}
/*reakcia kotvy na kurzor */
.floating-icon:hover {
  transform: translateY(-10px);

}
/*vlastnosti fotky float*/
.slnko{
  float:right;
   border-radius: 10px;
    margin-left: 30px;
  height: 100px;
  border: white;
  border: solid;
}
/*vlastnosti tabulky*/
table {
  width: 50%;
  border-collapse: collapse;

}
/*vlastnosti tabulky stlpce a riadky*/
th,
td {
  border: 1px solid rgb(255, 255, 255);
  padding: 10px;
  text-align: center;

}

th {
  background-color: #000000;
}
/*vlastnosti obrazkov na stranke planety*/
.foto {
  background-color: #000000;
}
/*vlastnosti obrazkov na stranke planety*/
.foto img{
  height: 8rem;
}
/*vlastnosti kontajneru na stranke news pre neusporiadany zoznam*/
.container_news ul{
  display: flex;
  list-style: none;
  padding: 0;
  margin: 0;
  align-items: center
}
/*vlastnosti obrazkov na stranke news pre neusporiadany zoznam*/
.container_news img{
  height: 15rem;
  margin-left: 3rem;
  margin-right: 3rem;
  border-radius: 1rem;
}
/*vlastnosti textu na stranke news pre neusporiadany zoznam*/
.container_news p{
  word-wrap: break-word;
  margin-left: 3rem;
  white-space: normal; 
  font-size: 15pt; 
  line-height: 1.5; 
  text-align: justify;
  max-width: 90%;
}

/*vlastnosti rozdelovacej ciary*/
.ciara{
  width: 4px;
  border-radius: 2px;
  height: 15rem; 
  background-color: rgb(255, 255, 255); 
  margin: 0 20px;
}
/*vlastnosti pridanej mapy*/
#iframe{
  border:0;
  border-radius: 2rem; 
  margin-right:5rem;
}

/*vlastnosti kontajneru na stranke contact*/
.container_kontakty{
  position: relative;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.kontakty_ul{
  display: flex;
  list-style: none;
}
/*vlastnosti rozdelovacej ciary*/
#ciara_kontakty{
  width: 4px;
  border-radius: 2px; 
  height: 350px; 
  background-color: rgb(255, 255, 255); 
  margin: 0 20px;
}
.zoznam{
  margin-left: 5rem; 
  list-style: none;
}

.nav-item{
  margin:0 10rem 0 10rem;
}
/*rozbalovacie tlacidlo*/
.dropbtn {
  font-size: 20pt;
  color: rgb(0, 0, 0);
  text-transform: uppercase;
  background-color: transparent;
  font-family: sans-serif;
  padding: 10px 30px;
  border-radius: 10px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}
/*rozbalenie*/
.dropdown {
  position: relative;
  display: inline-block;
}
/*obsah rozbalovacieho tlacidla*/
.dropdown-content {
  display: none;
  position: absolute;
  background-color: white;
  min-width: 180px;
  z-index: 1;
  border-radius: 1rem;
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  display: block;
}
/*reakcia na kurzor*/
.dropdown-content a:hover {
  background-color:#555;
}
/*reakcia na kurzor*/
.dropdown:hover .dropdown-content {
  display: block;
}
/*reakcia na kurzor*/
.dropdown:hover .dropbtn {  
  background-color: #555;
  color: #fff;
}
/*vlastnosti definicneho zoznamu*/
.container_dl{
  position: relative;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 3rem;

}

dd,dt{
  border: 2px solid rgb(255, 255, 255);
background-color: rgb(170, 170, 161,0.75);
  text-align: center;
  border-radius: 0.5rem;
}
dt{
  font-weight:bolder;
  color: rgb(138, 157, 176);
}
/*vlastnosti zvyraznovaca*/
.marker{
  background-color: red;
  border-radius: 2rem;
  padding: 10px;
}
.zoznam1{
  display: flex;
  align-items: center;
  gap: 20px;
  list-style: none;
  margin-right: 4rem;
}
.zoznam1 li img{ width: 180px; border-radius: 2rem;}
.zoznam1 li img:hover{transform: scale(2); transition:40ms;}