@import url('https://fonts.googleapis.com/css2?family=Patrick+Hand&display=swap');
body {
    background-image: url(img/logo.jpg);
    opacity: 0.9;
    text-align:justify; 
    font-family: 'Patrick Hand', cursive;
}

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

    }
.container-xl {
    display: grid;
	 height: auto;
	 grid-template-columns:0.3fr 1fr 1fr ;
 grid-template-rows: 0.1fr 0.1fr 0.1fr 0.1fr 1fr 0.1fr ;
 grid-template-areas:
    "logo  toplist toplist toplist "
    "tittle tittle tittle tittle"
    "decs decs gif gif"
    "text1 text1 text1 text1 "
    "content content content content"
    "bigtoplist bigtoplist bigtoplist bigtoplist";
 grid-gap:0.1rem;
color: red;
font-size: 25px;
 text-align: center;
 border-radius:var(--main-radius);
 padding-top: var(--main-padding);
 border:var(--border) ;
 box-shadow: 0px 0px 15px 5px #3B3B3B;
 background-color: #fff;
 text-transform: uppercase;
}

#logo {
	background:#292B2E;
   
    grid-area: logo;
    border-radius:var(--main-radius);
    padding-top: var(--main-padding);
    border:var(--border) ;
    

}
#toplist {
   
   background:#292B2E;
    border: 2px solid rgb(238, 230, 230);
    grid-area: toplist;
    border-radius:var(--main-radius);
    padding-top: var(--main-padding);
}
#tittle {
   background:#292B2E;
    
    grid-area: tittle;
    border-radius:var(--main-radius);
    padding-top: var(--main-padding);
    text-align: left;
}
#gif {
   background:#292B2E;
    grid-area: gif;
    border-radius:var(--main-radius);
    padding-top: var(--main-padding);
   
}
#decs {

   background:#292B2E;
    grid-area: decs;
    border-radius:var(--main-radius);
    padding-top: var(--main-padding);
    word-spacing: 15px;
}


#text1 {
   background:#292B2E;
    grid-area: text1;
    border-radius:var(--main-radius);
    padding-top: var(--main-padding);
    width:100%;


}
#text2 {
   background:#292B2E;
    grid-area: text2;
    border-radius:var(--main-radius);
    padding-top: var(--main-padding);
    width:100%;


}
#text3 {
   background:#292B2E;
    grid-area: text3;
    border-radius:var(--main-radius);
    padding-top: var(--main-padding);
    width:100%;

}
#text4 {
   background:#292B2E;
    grid-area: text4;
    border-radius:var(--main-radius);
    padding-top: var(--main-padding);
    width:100%;

}
#content {
    background:#292B2E;
    grid-area: content;
    border-radius:var(--main-radius);
    padding-top: var(--main-padding);
    font-size: 15px;
}
#bigtoplist {
    background:#292B2E;
    grid-area: bigtoplist;
    border-radius:var(--main-radius);
    padding-top: var(--main-padding);
    font-size: 15px;
}

#content2 a:link {
    color: black;	 
 }
 
 #content2 a:hover {
 
        color:#fff; 
        box-shadow: brown;
 }
 .col
{ border:1px dashed #fff;  
    word-spacing: 10px;
    font-size: 15px;
}
.mybg {
   
    border:1px dashed #fff;  
    color: #fff;
    width:100% ;
    border-radius: 70px;
}
.mydesc {
    font-size: 15px;
   text-align: left;
   font-weight: bold;
}

.mybg1 {
    background:#D9457F;
    border:1px dashed #fff;  
    color: #fff;
    width:100% ;
    border-radius: 70px;
}
a:link {
	
    color:#D9457F;
  }
  
  /* visited link */
  a:visited {
	color: yellow;
  }
  
  /* mouse over link */
  a:hover {
	color: #fff;
  }
  
  /* selected link */
  a:active {
	color: blue;
  }
  .col-2
  { 
     
      font-size: 12px;
  }
  .col-11
  { 
     
      font-size: 25px;
  }
  @media only screen and (max-width:550px) {
    .container-xl {

       grid-gap:0.4rem;
       font-size: 15px;
        grid-template-columns:3fr;
        grid-template-rows:0fr 0.1fr 0.1fr 0.1fr 0.1fr 0.1fr ;
        grid-template-areas: 
        "logo"
        "toplist"
        "gif"
        "tittle"
        "text1"
        "decs"
        "content"
        "bigtoplist";
    }    
    }
  @media only screen and (max-width:720px) {
    .container-xl {

       grid-gap:0.4rem;
       font-size: 15px;
        grid-template-columns:3fr;
        grid-template-rows:0fr 0.1fr 0.1fr 0.1fr 0.1fr 0.1fr ;
        grid-template-areas: 
        "logo"
        "toplist"
        "gif"
        "tittle"
        "text1"
        "decs"
        "content"
        "bigtoplist";
    }    
    }