@import url('https://fonts.googleapis.com/css2?family=Bodoni-Moda:ital,opsz,wght@0,6..96,400..900;1,6..96,400..900&display=swap');

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    overflow: hidden;
}

html {
    width: 100vw;
    height: 100vh;
    
    font-size: 100%;
    font-family: "Bodoni Moda", serif;
    color: rgb(46, 46, 46);
}

body {
    width: 100%;
    height: 100%;
}

main {
    width: 100%;
    height: 100%;

    display: flex;
    flex-flow: column;
    justify-content: center;
    align-items: center;
}

button {
    outline: none;
    border: none;
    cursor: pointer;
}

.dad_joke-container{
    width: 50%;
    height: 50%;
    border-radius: 40px;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    font-size: 3em ;
    font-weight: 400;
    text-align: center;
}

#dad_joke{
    width: fit-content;
    height: fit-content;
}

.dad_jokes-buttons-container{
    width: 70%;
    height: max-content;

    display: flex;
    justify-content: space-between;
    align-items: center;
}

.dad_joke-btn{
    visibility: visible;
    width: max-content;
    min-height: max-content;
    border: 2px solid;
    border-radius: 50px;

    font-size: 1.5em;
    
    transition-property: color, background-color;
    transition-duration: 200ms;
    position: relative;

}


.dad_joke-btn:hover{
    border-color: rgb(71, 71, 71);
    background-color: rgb(71, 71, 71);
    color: white;
}

.btn-change {
    padding: 1.5em 8em;
    
    align-self: center;
    justify-items: center;

    z-index: 10;
}

.btn-prev, .btn-next{
    width: 5.2em;
    min-height: max-content;
    padding-block: 0.5em;
    
    display: flex;
    align-items: center;
    justify-content: space-between;

    z-index: 0;
    
    transform: translateX(0);
    transition: transform 200ms ease-in-out;
}

.btn-next{
    padding-inline: 1em 0.5em;
    border-top-left-radius: 20px;
    border-bottom-left-radius: 20px;
    
    right: 27%;
}

.btn-prev{
    padding-inline: 0.5em  1em;
    border-top-right-radius: 20px;
    border-bottom-right-radius: 20px;
    
    left: 27%;
}

.btn-next:hover {
    transform: translateX(3em);
}

.btn-prev:hover {
    transform: translateX(-3em);
}

.material-icons{
    display: block; 
    width: fit-content;
    height: fit-content;
    
    font-size: 0.5em;
}

.btn--off{
    visibility: hidden;
}