@font-face {
    font-family: "MagicCards";
    src: url('../Lesson4/media/MagicCards.ttf') format('truetype');
}
@font-face {
    font-family: "AndyBold";
    src: url('media/AndyBold.ttf') format('truetype');
}
body{
    font-family:AndyBold;
    font-size:1.5em;
    color:#fff000;
    background-color:black;
}
h1{
    font-family:MagicCards;
    font-size:2em;
    background-color:black;
    opacity:.8;
    padding:10px;
    border-radius:5px;
    border-color:#F2A900;
    border-style:solid;
    border-width:10px;
    width:50%;
    margin:auto;
    text-align:center;
    animation-duration:3s;
    animation-name:spin;
}
@keyframes spin{
    from{transform:rotate(0deg);}
    to{transform:rotate(360deg);}
}
h2{
    position:relative;
    font-family:MagicCards;
    background-color:black;
    opacity:.8;
    padding:10px;
    border-radius:5px;
    border-color:#F2A900;
    border-style:solid;
    border-width:5px;
    width:50%;
    margin:auto;
    text-align:center;
    animation-duration: 1s;
    animation-name:slidein;
}
@keyframes slidein{
    from{margin-left:100%; width:50%;}
    to{margin-left:25%; width:50%;}
}
h3{
    font-Family:MagicCards;
    background-color:black;
    opacity:.8;
    padding:10px;
    border-radius:5px;
    border-color:#F2A900;
    border-style:solid;
    border-width:5px;
    text-align:left;
    width:25%;
    animation-duration:2s;
    animation-name:slidein;
}
hr{
    background-color:grey;
    color:black;
    height:5px;
}
section{
    background-color:black;
    padding:10px;
    border-radius:5px;
    border-color:#ffc100;
    border-style:solid;
    border-width:10px;
    text-align:left;
}
li{
    margin-left:10px;
    background-color:grey;
    width:30%;
    border-radius:5px;
    border-style:solid;
    border-color:#ffc100;
    padding:5px;
}

/*a:link, a:visited{
    color:orangered;
    text-decoration:none;
}
a:hover, a:active{
    color:#31ff00;
}*/
footer{
    color:grey;
}
nav {
    text-align: center;
}

nav ul {
    border-radius:5px;
    border-color:#ffc100;
    border-style:solid;
    border-width:10px;
    padding: 0 20px;
    list-style: none;
    position: relative;
    color:black;
    font-weight:900;
    width:90%;
    display:inline-table;
}
nav ul li {
    display:inline-table;
}
nav ul li a {
    display: block;
    padding: 10px 10px;
    color:orangered;
    text-decoration: none;
}
nav ul li:hover {
    background-color:orangered;
}
nav ul li:hover a {
    color:white;
}
nav ul li:hover > ul {
    display:flex;
    flex-direction:column;
    width:30%
}

nav ul ul {
    display: none;
    background-color: grey;
    color:orangered;
    border-width:5px;
    border-radius: 5px;
    position: absolute;
    z-index:10;
}
nav ul ul li {
    display:block;
    position: relative;
    color:orangered;
    border-radius:5px;
    border-color:#ffc100;
    border-style:solid;
    border-width:5px;
    list-style: none;
    position: relative;
    font-weight:900;
    width:90%;
    display:inline-table;
    z-index:9;
}
nav ul ul li a:link {
    color:orangered;
}

nav ul ul li a:visited {
    color:orangered;
}
nav ul ul li a:hover {
    background: orangered;
    color:white;
}
.icon-bar {
    background-color: black;
    border-radius:5px;
    border-color:#ffc100;
    border-style:solid;
    border-width:10px;
    overflow: auto; /* Overflow due to float */
}

.icon-bar a {
    float: left; /* Float links side by side */
    text-align: center; /* Center-align text */
    width: 33%; /* Equal width (5 icons with 20% width each = 100%) */
    padding: 12px 0; /* Some top and bottom padding */
    transition: all 0.3s ease; /* Add transition for hover effects */
    color: white; /* White text color */
    font-size: 36px; /* Increased font size */
}

.icon-bar a:hover {
    background-color:white;
    color:black;/* Add a hover color */