@import url(style.scss);
@import url('https://fonts.googleapis.com/css2?family=Acme&display=swap');
body {
    background: #A2D2EC;
    color: #A2D2EC;
    color: black;
    text-transform: uppercase;
    font-family: 'Acme', sans-serif;
    text-align:center;
}

a:link {
  
    color: #A2D2EC;
      text-decoration:none;
  }
a:hover {
   
    color:#fff;
    text-decoration:none;
    font-weight: bold;
  }

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

    }
.container {
    grid-gap:0.3rem;
    display: grid;
  
	 grid-template-columns:1fr 1fr 1fr;
 grid-template-rows: 0.1fr 0.1fr 0.1fr 0.1fr 0.1fr ;
 grid-template-areas:
    "header  header header header "
    "bigtext bigtext bigtext bigtext"
    "Left center right right  "
    "bigtext2 bigtext2 bigtext2 bigtext2"
    "key key key key "
    "bigtext3 bigtext3 bigtext3 bigtext3"
    "toplist toplist toplist toplist ";
    font-size: 25px;
 text-align: center;
 border-radius:var(--main-radius);
 padding-top: var(--main-padding);
 border:var(--border);
 text-transform: uppercase;
 
}

#header {
	background:#292B2E;
    border: 1px solid #000;
    grid-area: header;
    border-radius:var(--main-radius);
    padding-top: var(--main-padding);
    border:var(--border) ;
    color: #A2D2EC;
    font-size: 12px;
    display: block;
    opacity: inherit;

    
    

}
#Left {
    
   background:#292B2E;
    
    grid-area: Left;
    border-radius:var(--main-radius);
    padding-top: var(--main-padding);
    color: #A2D2EC;
    font-size: 10px;
}
#center {

   color: #A2D2EC;
    grid-area: center;
    border-radius:var(--main-radius);
    padding-top: var(--main-padding);
  
}
#right {
   background:#292B2E;
    grid-area: right;
    border-radius:var(--main-radius);
    padding-top: var(--main-padding);
    color: #A2D2EC;
    font-size: 12px;
    display:block;
  
}
#key {
   background:#292B2E;
    grid-area: key;
    border-radius:var(--main-radius);
    padding-top: var(--main-padding);
    color: #A2D2EC;
    
    font-size: 15px;
}
#toplist {
   background:#292B2E;
    grid-area: toplist;
    border-radius:var(--main-radius);
    padding-top: var(--main-padding);
    color: #A2D2EC;
    font-size: 12px;
   
   
}
#bigtext {
    border: 2px solid rgb(238, 230, 230); 
    grid-area: bigtext;
    border-radius:var(--main-radius);
    padding-top: var(--main-padding);
    
    color: #000;
    
   
}
#bigtext2 {
   
    grid-area: bigtext2;
    border-radius:var(--main-radius);
    padding-top: var(--main-padding);
    border: 2px solid rgb(238, 230, 230);  
    color: #000;
   
   
}
#bigtext3 {
    border: 2px solid rgb(238, 230, 230); 
    grid-area: bigtext3;
    border-radius:var(--main-radius);
    padding-top: var(--main-padding);
    border: 2px solid rgb(238, 230, 230);  
    color: #000;
}
.mycol {
  
}

.junior {
    font-size: 30px;
    color: black;
}
h1 {
    text-align: center;
    color:#FD006B;
}
@media only screen and (max-width:550px) {
    .container {
        grid-template-columns:1fr;
        grid-template-rows: 0.1fr 0.1fr 0.1fr 0.1fr 0.1fr ;
        grid-template-areas:
           "header"
           "bigtext "
           "Left"
           "center"
           "right"
           "bigtext2"
           "key "
           "bigtext3 "
           "toplist";
    }    
    }
   /* DivTable.com */
.divTable{
	display: table;
	width: 100%;
    font-size: 25px;
}
.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;
}
.minilogo {
    width: 50px;
}
.mylogo {
    margin-bottom: -82px;
}
.top { width: 100%; float: left; }
.toplist { width: 98%; padding: 1%; border-bottom: 1px dashed rgb(241, 212, 212); line-height: 150%; float: left; }
.toprank { width: 8%; color: #A2D2EC; font-size: 150%; font-weight: bold; text-align: left; float: left; }
.topname { width: 17%; color: #A2D2EC; font-size: 150%; font-weight: bold; text-align: left; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; float: left; }
.topname a:link { color:  #FD006B;; text-decoration: underline; }
.topname a:active { color: #FFF; text-decoration: underline; }
.topname a:visited { color: #FFF; text-decoration: underline; }
.topname a:hover { color: #A2D2EC; text-decoration: none; }
.toprating { width: 75%; color: #A2D2EC; font-size: 150%; font-weight: bold; text-align: left; float: left; }

@media only screen and (max-width:992px) {
    .container {
        grid-template-columns:1fr;
        grid-template-rows: 0.1fr 0.1fr 0.1fr 0.1fr 0.1fr ;
        grid-template-areas:
           "header"
           "bigtext "
           "Left"
           "center"
           "right"
           "bigtext2"
           "key "
           "bigtext3 "
           "toplist";
    }    
    }