/* unvisited link */
a:link {
    color: #2196F3;
  }
  
  /* visited link */
  a:visited {
    color: green;
  }
  
  /* mouse over link */
  a:hover {
    color: hotpink;
  }
  
  /* selected link */
  a:active {
    color: blue;
  }
:root{
    --main-radius:5px;
    --main-padding:5px;
    --clr-primary: #651fff;
    --clr-gray: #37474f;
    --clr-gray-light: #b0bec5;
    }

.container {
    display: grid;
    height: auto;
    grid-template-columns: 1fr 2fr 2fr 1fr; 
    grid-template-rows: auto 1fr 1fr auto; 
    grid-template-areas:
        "nav nav nav nav"
        "sidebar content2 content2 ads"
        "content1 content2 content2 ads"
        "main main main main"
        "footer  footer    footer    footer";
    gap: 1rem; 
    font-size: 16px;
    font-weight: bold;
    background-image: url(../img/bg.jpg);
    color: #333; 
    padding: 1rem; 
    
}

/* Nav (Navigatsiya) */
.nav {
    grid-area: nav;
   
    background-color: #FFC107;
    text-align: center;
    padding: 1rem;
    border-radius: 8px; 
}

/* Sidebar */
.sidebar {
    grid-area: sidebar;
    background-color:#FFC107; 
    color: white;
    padding: 1rem;
    border-radius: 8px;
}

/* Main Content */
.main {
    grid-area: main;
    background-color: #FFC107;
    color: black;
    padding: 1rem;
    border-radius: 8px;
    border: 4px solid black;
}

/* Content 1 */
.content1 {
    grid-area: content1;
    background-color: #FFC107; 
    color: white;
    padding: 1rem;
    border-radius: 8px;
    justify-content: center;
}

/* Content 2 */
.content2 {
    grid-area: content2;
    justify-content: center;
   
    padding: 1rem;
    border-radius: 8px;
}

/* Content 3 */


/* Ads (Reklama) */
.ads  {
    grid-area: ads;
    justify-content: center;
    color: white;
    padding: 1rem;
    border-radius: 8px;
    background-color: #FFC107;
}

/* Footer */
.footer {
    grid-area: footer;
    background-color: #607D8B; 
    color: white;
    text-align: center;
    padding: 1rem;
    border-radius: 8px;
}
@media (max-width: 768px) {
    .container {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        grid-template-areas:
            "nav"
            "sidebar"
            "main"
            "content1"
            "content2"
            "content3"
            "ads"
            "footer";
    }
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  
  /* Responsive Container */
  .responsive-container {
    display: flex;
    flex-wrap: wrap; /* Allows mynavs to wrap to the next line */
    gap: 10px; /* Space between mynavs */
    justify-content: center; /* Centers mynavs horizontally */
    padding: 10px;
    color: #000;
    
  }
  
  /* Individual mynavs */
  .mynav {
    flex: 1 1 calc(100% / 4 - 20px); /* 4 mynavs per row on larger screens */
    text-align: center; /* Center text */
    font-size: 15pt;
    font-weight: bold;
    background-color: #fff; /* Default background color */
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 5px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    transition: background-color 0.3s ease; /* Smooth transition for hover effect */
  }
  
  /* Hover Effect for the mynav */
  .mynav:hover {
    background-color: #007BFF; /* Change background color on hover */
    color: #fff; /* Change text color to white */
  }
  
  /* Link Styling */
  .mynav a {
    text-decoration: none;
    color: #333; /* Default link color */
    transition: color 0.3s ease; /* Smooth transition for hover effect */
  }
  
  /* Hover Effect for the Link */
  .mynav:hover a {
    color: #fff; /* Change link color to white when the mynav is hovered */
  }
  
  /* Red Brackets Styling */
  .red-brackets {
    color: red; /* Make brackets red */
    font-weight: bold; /* Optional: Make brackets bold */
  }
  
  /* Responsive Breakpoints */
  @media (max-width: 768px) {
    .mynav {
      flex: 1 1 calc(100% / 3 - 20px); 
      justify-content: center;
    }
  }
  
  @media (max-width: 480px) {
    .mynav {
      flex: 1 1 calc(100% / 2 - 20px); 
      justify-content: center;
    }
  }


.divTable {
    display: table;
    width: 100%;
    border-collapse: collapse;
    text-align: center;
    
   
}

.divTableRow {
    display: table-row;
    text-decoration: none; 
    color: inherit; 
   
}

.divTableCell {
    display: flex;
    flex-direction: column; 
    padding: 10px;
    border: 1px solid #999999; 
    border-radius: 20px;
    margin: 5px;
}

.row-name {
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 5px;
    
}

.row-description {
    font-size: 20px;
    color: #000;
}


.divTableRow:hover .divTableCell {
    background-color: #007BFF;
    
    
    
}

/* Tablitsa tanasi */
.divTableBody {
    display: table-row-group;
}
/* DivTable.com */
.divTable{
	display: table;
	width: 100%;
}
.divTableRow {
	display: table-row;
}
.divTableHeading {
	background-color: #EEE;
	display: table-header-group;
}
.a13, .divTableHead {
	
	display: table-cell;
	padding: 3px 10px;
}
.divTableHeading {
	background-color: #EEE;
	display: table-header-group;
	font-weight: bold;
}
.divTableFoot {
	background-color: #EEE;
	display: table-footer-group;
	font-weight: bold;
}
.a11 {
	display: table-row-group;
}
/* DivTable.com */
.divTable{
	display: table;
	width: 100%;
}
.myrow {
	display: table-row;
    flex: 1 1 calc(25% - 10px); 
}
.divTableHeading {
	background-color: #EEE;
	display: table-header-group;
}
.mydiv, .divTableHead {

	display: table-cell;
	padding: 3px 10px;
}
.divTableHeading {
	background-color: #EEE;
	display: table-header-group;
	font-weight: bold;
}
.divTableFoot {
	background-color: #EEE;
	display: table-footer-group;
	font-weight: bold;
}
.abs {
	display: table-row-group;
    display: flex;
    flex-wrap: wrap;
}
.clock {
    color: red;
}