Nie działa mi text-decoration: none;
Cały czas mam linie pod napisem.
<!DOCTYPE HTML>
<html lang="pl">
<head>
<meta charset="utf-8" />
<title>.io</title>
<meta name="description" content="" />
<meta name="keywords" content="io, io games, games, website games, game, bubble game, buggle, circle, eating other players," />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<link rel="stylesheet" href="style.css" type="text/css" />
<link rel="stylesheet" href="Fontello/css/fontello.css" type="text/css" />
<link href="https://fonts.googleapis.com/css2?family=Lato&family=Ubuntu&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Josefin+Sans:ital,wght@0,400;0,500;0,600;1,700&display=swap" rel="stylesheet">
<script src="https://code.iconify.design/1/1.0.7/iconify.min.js"></script>
</head>
<body onselectstart="return false;">
<div id="container">
<div id="main">
<div id="left"></div>
<!--MAIN-->
<div id="mid">
<input type="text" name="area1" maxlength="40" placeholder="Skin URL" />
<input type="text" name="area2" maxlength="20" placeholder="Nickname" />
<input type="text" name="area3" maxlength="20" placeholder="Tag" />
<input type="button" name="buttonplay">
<i class="icon-play"></i>
<div class="playins">Play</div>
</button></a>
<input type="button" name="buttonspectate">
<i class="icon-eye"></i>
</button></a>
<!--RIGHT------>
</div>
<div id="right">
<!--SETTINGS-->
<div id="settings">
<i class="settingsins"></i>
</div>
<!--SETTINGS-->
<div id="profile">
<div class="loginins">Login with your Discord account to save your progress in game.</div>
<a href="https://discord.gg/76dhzvEFGy" target="_blank">
<div id="buttonlogin">
<div class="loginbuttonins">Login with your Discord account</div>
</div>
</a>
</div>
</div>
<div style="clear:both;"></div>
</div>
<!--SOCIALS-->
<div id="socials">
<a href="https://discord.gg/76dhzvEFGy" target="_blank"><div class="dc">
<i class="iconify" data-icon="fa-brands:discord"></i>
<a href="https://discord.gg/76dhzvEFGy" target="_blank">
<div class="dcsub">
Official Discord
</div>
</a>
</a>
<a href="https://www.youtube.com/channel/UCRjwCE_lmKW2lxToBQso66A" target="_blank"><div class="yt">
<i class="icon-youtube-play"></i>
<div class="ytsub">
<a href="https://www.youtube.com/channel/UCRjwCE_lmKW2lxToBQso66A" target="_blank">
<div class="ytsub">
YouTube
</div>
</div>
</a>
</a>
</div>
</div>
</div>
</body>
</html>
body {
background-color: #2e2e2e;
color: #cecece;
}
#container {
width: 1700px;
height: 900px;
margin-left: auto;
margin-right: auto;
}
#main {
width: 1200px;
height: 580px;
top: 50%;
left: 50%;
transform: translate(20%, 40%);
}
#left {
float: left;
width: 380px;
min-height: 570px;
background-color: #1d1d1d;
border: 1px solid #0a0a0a; border-radius: 3px;
box-shadow: 0px 0px 7px #0a0a0a;
margin-right: 9px;
margin-left: 9px;
}
#mid {
float: left;
width: 370px;
min-height: 570px;
background-color: #1d1d1d;
border: 1px solid #0a0a0a; border-radius: 3px;
box-shadow: 0px 0px 7px #0a0a0a;
margin-right: 9px;
margin-left: 9px;
}
#right {
float: left;
width: 380px;
height: 570px;
}
#profile {
float: left;
width: 380px;
min-height: 210px;
background-color: #1d1d1d;
border: 1px solid #0a0a0a; border-radius: 3px;
box-shadow: 0px 0px 7px #0a0a0a;
margin-right: 9px;
margin-left: 9px;
margin-top: 9px;
}
#settings {
float: left;
width: 380px;
min-height: 340px;
background-color: #1d1d1d;
border: 1px solid #0a0a0a; border-radius: 3px;
box-shadow: 0px 0px 7px #0a0a0a;
margin-right: 9px;
margin-left: 9px;
margin-bottom: 9px;
font-family: 'Josefin Sans', sans-serif;
}
input[name="area1"] {
background-color: #272727;
color: #cecece;
outline: 1px;
border: 1px solid #272727;
border-radius: 3px;
transform: translate(5%, 1195%);
width: 324px;
height: 27px;
padding: 5px;
}
input[name="area2"] {
background-color: #272727;
color: #cecece;
outline: 1px;
border: 1px solid #272727;
border-radius: 3px;
transform: translate(8%, 965%);
width: 192px;
height: 27px;
padding: 5px;
}
input[name="area3"] {
background-color: #272727;
color: #cecece;
outline: 1px;
border: 1px solid #272727;
border-radius: 3px;
transform: translate(20%, 965%);
width: 108px;
height: 27px;
padding: 5px;
}
input[name="buttonplay"] {
background-color: #272727;
color: #cecece;
border: 1px solid #272727;
border-radius: 3px;
width: 280px;
height: 33px;
text-align: center;
font-family: 'Ubuntu', sans-serif;
font-size: 16px;
transform: translate(6%, 1350%);
outline: 1px;
text-decoration: none;
}
.playins {
width: 0px;
color: #ffffff;
text-decoration: none;
text-shadow: 0px 0px 2px black;
font-family: 'Ubuntu', sans-serif;
transform: translate(120%, 2210%);
margin-left: 153px;
}
.playins:hover {
background-color: #175cb8;
}
input:hover[name="buttonplay"] {
background-color: #175cb8;
box-shadow: 0px 1px 3px #175cb8;
}
input[name="buttonspectate"] {
background-color: #272727;
color: #cecece;
border: 1px solid #272727;
border-radius: 3px;
width: 45px;
height: 33px;
text-align: center;
font-family: 'Ubuntu', sans-serif;
transform: translate(680%, 1130%);
text-decoration: none;
outline: 1px;
}
input:hover[name="buttonspectate"] {
background-color: #d1b006;
box-shadow: 0px 1px 3px #d1b006;
}
.loginins {
font-size: 17px;
margin-left: 15px;
margin-top: 35px;
font-weight: 1px;
text-align: left;
color: #ffffff;
text-shadow: 1px 1px 2px black;
font-family: 'Roboto Mono', monospace;
}
.settingsins {
font-family: 'Josefin Sans', sans-serif;
}
#buttonlogin {
background-color: #131313;
border: 1px solid #000000;
width: 300px;
height: 50px;
border-radius: 8px;
margin-top: 35px;
margin-left: 35px;;
margin-right: auto;
font-size: 19px;
font-family: 'Josefin Sans', sans-serif;
}
.loginbuttonins {
color: #ffffff;
font-family: 'Josefin Sans', sans-serif;
color: #ffffff;
margin-top: 17px;
margin-left: 10px;
}
#socials {
margin-bottom: 50px;
width: 290px;
min-height: 30px;
position: absolute;
top: 50%;
left: 50%;
margin-right: 50%;
transform: translate(-100%, 1518%);
text-decoration: none;
color: #ffffff;
}
.dc {
float: left;
background-color: #738adb;
width: 160px;
height: 34px;
border-radius: 5px;
margin-right: 10px;
box-shadow: 1px 1px 3px #111111;
text-align: center;
font-family: 'Josefin Sans', sans-serif;
margin-top: -5px;
}
.dc:hover {
background-color: #5e75c2;;
}
.yt {
float: left;
background-color: #FF0000;
width: 120px;
height: 34px;
border-radius: 5px;
box-shadow: 1px 1px 3px #111111;
font-family: 'Josefin Sans', sans-serif;
text-decoration: none;
margin-top: -5px;
}
.yt:hover {
background-color: #be0202;
}
.iconify {
font-size: 25px;
margin-right: 120px;
margin-top: 5px;
text-decoration: none;
color: #ffffff;
text-shadow: 2px 2px 2px black;
}
.ytsub {
float: left;
width: 120px;
height: 35px;
border-radius: 5px;
font-family: 'Josefin Sans', sans-serif;
margin-top: -10px;
margin-left: 23px;
text-decoration: none;
color: #ffffff;
text-shadow: 2px 2px 2px black;
}
.dcsub {
float: left;
width: 120px;
height: 35px;
border-radius: 5px;
font-family: 'Josefin Sans', sans-serif;
margin-top: -20px;
margin-left: 35px;
text-decoration: none;
color: #ffffff;
text-shadow: 1px 1px 2px black;
}