/*Tags*/
body {
  background: linear-gradient(to bottom, rgb(128, 228, 228) 0%, rgb(33, 43, 187) 85%), lightblue;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  gap: 40px;
}

h1 {
  text-align:center ;
  font: normal bold 13vw calligra, verdana ;
  padding: 3vw;
  border: 10px solid #d2c507;
  border-radius: 36%;
  /*width: 80%; 400px;*/
  background: #88FFFF;
}

h2 {
  flex: none;
  text-align:center ;
  font: normal bold 9vw calligra, verdana ;
  background: #88FFFF;
  border: 6px solid #cdcdcd;
  border-radius: 24%;
  padding: 2vw;
}

h3 { font: normal bold 7vw calligra, verdana ; }
h4 { font: normal bold 5vw calligra, verdana ; }

p {
  text-align:justify ;
  text-indent:18px ;
  margin:10px ;
}

a { color:blue ; }
a.dark { color:cyan ; }
a:link { text-decoration:blink ; color:blue ; }
a:visited { color:red ; text-decoration:through ; }
a:hover { color:blue ; background-color:silver ; }
a:active { color:red ; background-color:silver ; text-decoration:underline ; }


nav {
  background-color:#66FFCC ;
  width:25% ;
  float:left ;
  margin: 10px 20px 10px 5px;
}


nav.dark {
  background-color:#630e23 ;
  width:25% ;
  float:left ;
  margin: 10px 20px 10px 5px;
}

aside { background-color:#FFE4B5 ; width:20% ; float:right ; text-align:center ; margin: 10px 5px 10px 20px; position:relative; }
aside.dark { background-color:#054d52 ; width:20% ; float:right ; text-align:center ; margin: 10px 5px 10px 20px; position:relative; }

section { border:4px double orange ; margin: 10px 5px 10px 5px; }
section.dark { border:4px double rgb(112, 209, 136) ; margin: 10px 5px 10px 5px; }

header { background-color:lime ; }
header.dark { background-color:rgb(75, 38, 124) ; }

footer { background-color:#DEB887 ; text-align:center ; }
footer.dark { background-color:#0b2d44 ; text-align:center ; }

article { background-color:rgba(224, 255, 255, 0.92) ; }
article.dark { background-color:rgba(82, 52, 47, 0.92) ; }

form { text-align:center ; }
article, aside, figure, footer, header, hgroup, nav, section { display:block ; }
td { border:3px groove #22BC30 ; }
img { position:relative ; }




/********* Boxes **********/
.links-container {
  width: 95%;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: center; /*flex-start;*/
  gap: 2vw;
  /*max-width: 400px; /* Maxwidth for bigscreens */
}


.links-container h2 {
  margin-bottom: 0vw;
}



.link-box {
  background: linear-gradient(to right, rgb(255, 255, 228) 0%, rgb(218, 218, 32) 66%, rgb(255, 255, 228) 99%);
  color: rgba(255,255,120,1); /* Text color */
  position: relative;
  overflow: hidden;
  width: 100%; /* Fullwidth */
  padding: 0px; /* Intern spacing */
  border: none; /* No border */
  border-radius: 20px; /* Rounded corners */
  font-size: 7vw; /* Font size */
  font-family: EB Garamond, Verdana, Arial;
  text-align: center;
}


.link-box a {
  display: flex;
  height: 100%;
  width: 100%;
  text-align: left;
  align-items: center;
  padding: 1vw 3% 1vw 3%; /* URDL */
}


/*Used for multiline wrap in big texts*/
.big-text {
  width: 65%;
  font-size: 6vw;
  word-wrap: break-word; /* Allows line adjustment */
  overflow-wrap: break-word; /* For more compatibility with navigators */
}



/****Responsive design in function of scree-width****/
@media (min-width: 540px) {

.link-box a {
  padding: 1vw 15% 1vw 23%; /* URDL */
}


.big-text {
  width: 45%;
  font-size: 6vw;
  word-wrap: break-word; /* Allows line adjustment */
  overflow-wrap: break-word; /* For more compatibility with navigators */
}


}




/***** FA ******/
.fab {
  padding: 4vw;/*20px;*/
  margin-right: 3vw; /*20px;*/
  font-size: 12vw; /*60px;*/
  width: 11vw; /*50px;*/
  text-align: center;
  text-decoration: none;
  border-radius: 20%;
}

/* Add a hover effect if you want */
.fab:hover {
  opacity: 0.7;
}


/*For SVG generated FA incons*/
.svg-fa {
  width: 11vw; /*74px;*/
  height: 11vw;
  padding: 4vw; /*10px;*/
  background-size: 62%;
  background-position: center;
  background-repeat: no-repeat;
  margin-right: 3vw; /*20px;*/
  border-radius: 20%;
}



/*A sign when a text is copied*/
.copy-sign {
  position: absolute;
  top: 35%;
  left: 35%;
  width: 24vw;
  z-index: 1;
  font: normal normal 5vw Courier New, Arial;
  background: black;
  color: white;
  text-align: center;
  border-radius: 2vw;
}



/* Set a specific color for each brand */

/* Facebook */
.fa-facebook {
  background: #3B5998;
  color: white;
}


/* Twitter (old)*/
.fa-twitter {
  background: #55ACEE;
  color: white;
  /*padding-right: 25px;*/
}


/* X/Twitter (new)*/
.svg-x-twitter {
  background-color: black;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path fill="white" d="M389.2 48h70.6L305.6 224.2 487 464H345L233.7 318.6 106.5 464H35.8L200.7 275.5 26.8 48H172.4L272.9 180.9 389.2 48zM364.4 421.8h39.1L151.1 88h-42L364.4 421.8z"/></svg>');
  
}


/* Instagram */
.fa-instagram {
  background: radial-gradient(
  circle at 30% 107%,
  #fdf497 5%,
  #fd5949 45%,
  #d6249f 60%,
  #285aeb 90%
  );
  color: white;
}


/*Telegram*/
.fa-telegram {
  background: linear-gradient(#36AEE0,#1C96D1);
  color: white;
  /*padding-right: 25px;*/
}

/*YouTube*/
.fa-youtube {
  background: rgb(201,0,0);
  color: white;
  /*padding-left: 15px;
  padding-right: 27px;*/
}

.fa-youtube::before {
  margin-left: -1vw;
  /*padding-right: 27px;*/
}


/*VK*/
.fa-vk {
  background: linear-gradient(#36AEE0,#1C96D1);
  color: white;
  /*padding-left: 15px;
  padding-right: 30px;*/
}

.fa-vk::before {
  margin-left: -1.5vw;
}


/*Reddit*/
.fa-reddit-alien {
  background: #ff7800;
  color: white;
  /*padding-right: 27px;*/
}


/*Discord*/
.svg-discord {
  background-color: blue;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path fill="white" d="M524.5 69.8a1.5 1.5 0 0 0 -.8-.7A485.1 485.1 0 0 0 404.1 32a1.8 1.8 0 0 0 -1.9 .9 337.5 337.5 0 0 0 -14.9 30.6 447.8 447.8 0 0 0 -134.4 0 309.5 309.5 0 0 0 -15.1-30.6 1.9 1.9 0 0 0 -1.9-.9A483.7 483.7 0 0 0 116.1 69.1a1.7 1.7 0 0 0 -.8 .7C39.1 183.7 18.2 294.7 28.4 404.4a2 2 0 0 0 .8 1.4A487.7 487.7 0 0 0 176 479.9a1.9 1.9 0 0 0 2.1-.7A348.2 348.2 0 0 0 208.1 430.4a1.9 1.9 0 0 0 -1-2.6 321.2 321.2 0 0 1 -45.9-21.9 1.9 1.9 0 0 1 -.2-3.1c3.1-2.3 6.2-4.7 9.1-7.1a1.8 1.8 0 0 1 1.9-.3c96.2 43.9 200.4 43.9 295.5 0a1.8 1.8 0 0 1 1.9 .2c2.9 2.4 6 4.9 9.1 7.2a1.9 1.9 0 0 1 -.2 3.1 301.4 301.4 0 0 1 -45.9 21.8 1.9 1.9 0 0 0 -1 2.6 391.1 391.1 0 0 0 30 48.8 1.9 1.9 0 0 0 2.1 .7A486 486 0 0 0 610.7 405.7a1.9 1.9 0 0 0 .8-1.4C623.7 277.6 590.9 167.5 524.5 69.8zM222.5 337.6c-29 0-52.8-26.6-52.8-59.2S193.1 219.1 222.5 219.1c29.7 0 53.3 26.8 52.8 59.2C275.3 311 251.9 337.6 222.5 337.6zm195.4 0c-29 0-52.8-26.6-52.8-59.2S388.4 219.1 417.9 219.1c29.7 0 53.3 26.8 52.8 59.2C470.7 311 447.5 337.6 417.9 337.6z"/></svg>');
}


/*Tiktok*/
.svg-tiktok {
  background-color: black;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path d="M448 209.9a210.1 210.1 0 0 1 -122.8-39.3V349.4A162.6 162.6 0 1 1 185 188.3V278.2a74.6 74.6 0 1 0 52.2 71.2V0l88 0a121.2 121.2 0 0 0 1.9 22.2h0A122.2 122.2 0 0 0 381 102.4a121.4 121.4 0 0 0 67 20.1z" fill="white"/></svg>');
}


/*GitHub*/
.fa-github {
  background: black;
  color: white;
  /*padding-right: 27px;*/
}


/*Patreon (old)*/
.fa-patreon {
  color: rgb(255, 66, 77);
}

/*(new)*/
.svg-patreon {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path d="M489.7 153.8c-.1-65.4-51-119-110.7-138.3C304.8-8.5 207-5 136.1 28.4C50.3 68.9 23.3 157.7 22.3 246.2C21.5 319 28.7 510.6 136.9 512c80.3 1 92.3-102.5 129.5-152.3c26.4-35.5 60.5-45.5 102.4-55.9c72-17.8 121.1-74.7 121-150z"/></svg>');
}


/*Paypal*/
.fa-paypal {
  padding: 2vw 4vw;
  color: rgb(30, 48, 80);
  font-size: 15vw;
}


/*Bitcoin*/
.fa-bitcoin {
  padding: 1vw 4vw;
  font-size: 15vw;
  color: black;
}

.fa-bitcoin::before {
  margin-left: -1vw;
}


/*Ethereum*/
.fa-ethereum {
  padding: 2vw;
  border-radius: 50%;
  background: #4A7FF2;
  color: #e1fdff;
  margin-left: 3vw;
}


/*TonCoin*/
.svg-toncoin {
  /*padding: 1vw 3vw;
  margin-right: 0vw;
  width: 15vw;*/
  background-size: 81%;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="50" cy="50" r="50" fill="rgb(30,144,255)" /><!--Circle color: 0x1E90FF--><path d="M34 25 L66 25 c8 2 8 4 7 12.12 L57 72.87 c-2.27 7.93 -11.54 8.93 -14 0 L27 37.124 c-1-8.12 -1-10.12 7 -12.12 Z" fill="none" stroke="white" stroke-width="5"/><!-- -14 units for the rounded caps--><path d="M50 25 L50 78.8" fill="none" stroke="white" stroke-width="5" /></svg>');
}