*{
    box-sizing: border-box;
}
body{
    margin: auto;
    background-color: hsl(0, 2%, 39%);
    font-family: Arial, sans-Serif;

}
header{
    background-color: hsl(0, 0%, 67%);
    text-align: center;
    padding: 25px;

}
.navbar {
    background-color: hsl(0, 0%, 9%);
    height: 50px;
}
aside {
    width: 20%;
    float: left;
    padding: 10px;
}
section {
    width: 40%;
    float: left;
    padding: 10px;
}
article {
    width: 40%;
    float: left;
    padding: 10px;
}
footer{
    display: block;
    clear: both;
    background-color: hsl(0, 0%, 67%);
    text-align: center;
    padding: 25px;
}
@media screen and (max-width: 600px){
    aside, section, article{
        width: 100%;
    }
}

.gallery {
    display: inline-block;
    border: 1px solid hsl(0, 1%, 31%);
    margin: 5px;
    width: 200px
}
.gallery .description {
    padding: 10px;
    text-align: center;
}
.gallery:hover {
    border: 1px solid rgb(76, 75, 75)
}
.gallery img {
    width: 100%;
    height: 200px;
}
.icons {
    text-align: center;
}
.icons a {
    text-decoration: none;
    margin-right: 20px;
}
.fa-solid.fa-house.fa-5x {
    color: hsl(0, 0%, 76%)
}
.fa-solid.fa-house.fa-5x:hover {
    color: hsl(0, 1%, 59%)
}
.fa-brands.fa-youtube.fa-5x {
    color: hsl(0, 74%, 48%);
}
.fa-brands.fa-youtube.fa-5x:hover {
    color: hsl(0, 78%, 40%);
}
.fa-brands.fa-facebook.fa-5x {
    color: hsl(240, 86%, 58%);
}
.fa-brands.fa-facebook.fa-5x:hover {
    color: hsl(240, 86%, 25%);
}
.fa-brands.fa-tiktok.fa-5x {
    color: hsl(240, 6%, 6%);
}
.fa-brands.fa-tiktok.fa-5x:hover {
    color: hsl(240, 15%, 27%);
}
.container {
    display: block;
    border: 10px solid hsl(0, 0%, 0%);
    height: 90vh;

}
.box {
    width: 150px;
    height: 150px;
    font-size: 8em;
    text-align: center;
    border-radius: 15px;
    

}
img {
animation-name: ikot;
    animation-duration: 2s;
    animation-iteration-count: 1;
    animation-direction: normal;
    animation-play-state: running;
    animation-timing-function: cubic-bezier(1, 1.12, 0,-0.97);
}
#box1 {
    background-color: hsl(239, 78%, 31%);
}
@keyframes slideLeft{
    from{transform: translateX(500%)}
}
@keyframes slideRight {
    to{transform: translateX(500%)}
}
@keyframes slideUp {
    from{transform: translateY(500%)}
}
@keyframes slideDown {
    to{transform: translateY(500%)}
}
@keyframes ikot {
    50%{transform: rotateZ(360deg)}
}
@keyframes grow {
    50%{transform: scale(2, 2)}
}
@keyframes shrink {
    50%{transform: scale(0.5, 0.5)}
}
@keyframes fade {
    50%{opacity: 0.5}
}
@keyframes colorChange {
    0%{background-color: hsl(239, 78%, 31%)}
    20%{background-color: hsl(0, 76%, 45%)}
    40%{background-color: hsl(68, 78%, 57%)}
    60%{background-color: hsl(117, 89%, 41%)}
    80%{background-color: hsl(0, 0%, 44%)}
    100%{background-color: hsl(0, 3%, 6%)}
}
@keyframes glow {
    50%{box-shadow: 0px 0px 50px hsl(60, 100%, 56%)}
}

h1 {
    color: hsl(236, 90%, 16%);
}
form {
    background-color: hsl(0, 0%, 76%);
    text-align: center;
    max-width: 300px;
    margin: auto;
    padding: 40px;
    border-radius: 15px;
    box-shadow: 5px 5px 15px hsla(0, 0%, 0%, 0.3)
}

#textBox {
    width: 50%;
    text-align: center;
    font-size: 2em;
    border: 2px solid hsl(0, 0%, 0%, 0.8);
    border-radius: 5px;
    margin-bottom: 20px;
}
label {
    font-size: 1.2em;
    font-weight: bold;
}

button {
    margin-top: 20px;
    font-size: 1.4rem;
    color: hsl(0, 0%, 95%);
    background-color: hsl(274, 66%, 56%);
    border-radius: 10px;
    border: none;
    padding: 10px 15px;
    cursor: pointer;
    font-weight: bold;
}

button:hover {
    background-color:hsl(274, 66%, 46%);
}

#result {
    font-size: 1.5em;
    font-weight: bold;
}

#container {
    font-family: Arial, sans-serif;
    text-align: center;
    font-size: 2em;
    font-weight: bold;
}
button:active {
    background-color:hsl(271, 92%, 36%);
}
input {
    width: 100px;
    height: 30px;
    text-align: center;
    font-size: 2rem;
    font-weight:bold;
    border-radius: 5px;
    border: none;
}
#diceResult{
    margin: 20px;
}
#diceImages img{
    width: 200px;
    height: 200px;
}