:root{
    --main-radius:5px;
    --main-padding:5px;

    }
    body {
        background: #FF512F;
        background: -webkit-linear-gradient(to right, #DD2476, #FF512F); 
        background: linear-gradient(to right, #DD2476, #FF512F); 
        
    }
.container {
    display: grid;
   
    grid-template-columns:1fr 1fr 1fr 1fr;
    grid-template-rows: 0.2fr 0.2fr 0.2fr 0.2fr;
    grid-template-areas: "nav nav nav nav"
    "main toplists toplists tittle"    
    "main forads forads tittle"
    "main footer footer tittle";
    grid-gap:0.4rem;
    font-size: 12px;
    font-weight: bold;
    margin-bottom: 50px;
    text-transform: uppercase;
    text-align:center;
}
nav {
    border: 3px solid white;
    grid-area: nav;
    border-radius:var(--main-radius);
    padding-top: var(--main-padding);
    margin-top: 10%;
    padding: 2%;
    width: 400px;
    margin-left: auto;
    margin-right: auto;
    box-shadow: 0 0 20px white;
    
}
main {
    border: 3px solid white;
    grid-area: main;
    border-radius:var(--main-radius);
    padding-top: var(--main-padding);
    box-shadow: 0 0 20px white;
    margin-left: auto;
    margin-right: auto;
    opacity: 0.8;
    height:1050px;
    
    font-size: 13px;
}
#tittle {
    border: 3px solid white;
    grid-area: tittle;
    border-radius:var(--main-radius);
    padding-top: var(--main-padding);
    box-shadow: 0 0 20px white;
    text-align: center;
    font-size: 15px;
 
    
}
#toplists {
    border: 3px solid white;
    grid-area: toplists;
    border-radius:var(--main-radius);
    padding-top: var(--main-padding);
    box-shadow: 0 0 30px black;
    text-align: center;
}


#forads {
    border: 3px solid white;
    grid-area: forads;
    border-radius:var(--main-radius);
    padding-top: var(--main-padding);
    box-shadow: 0 0 30px black;
}
footer {
    border: 3px solid white;
    grid-area: footer;
    border-radius:var(--main-radius);
    padding-top: var(--main-padding);
    font-size: 15px;
    box-shadow: 0 0 30px black;
}


.col{
    border: 3px solid white;
   text-align: center;
    width: 95%;
    margin-left: auto;
    margin-right: auto;
    background: #000;
    color: #DD2476;
    border-radius: 10px;
} 
.myads {
    height: 250px;
    border: 1px solid white;
}
img {
    border-radius: 25px;


  }
  a:link {
    color: #fff;
    text-decoration: none;
  }
  
  /* visited link */
  a:visited {
    color: green;
  }
  
  /* mouse over link */
  a:hover {
    color: #DD2476;
    text-decoration:none;
  }
  
  /* selected link */
  a:active {
    color: blue;
  }
  /* DivTable.com */
.divTable{
	display: table;
	width: 100%;
}
.divTableRow {
	display: table-row;
}
.divTableHeading {
	background-color: #EEE;
	display: table-header-group;
}
.divTableCell, .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;
}
.divTableBody {
	display: table-row-group;
}
@media only screen and (max-width:960px) {
    .container {
        grid-template-columns:2fr;
        grid-template-rows: 0.1fr 0.1fr 0.1fr 0.1fr 0.1fr 0.1fr 0.1fr 0.1fr;
        grid-template-areas: 
        "nav"
        "toplists"
        "main"
        "forads"
        "tittle"
        "footer"
        ;
    }    
    }
    .favicon {
        width: 40px;
    }