@font-face{
    font-family: fredoka;
    src: url(Fredoka-VariableFont_wdth,wght.ttf);
}

html{
    background-color: black;
    font-family: fredoka;
}

.main{
    background-color: #ba0000;
    width: 50%;
    margin: auto;
    margin-top: 6%;
    text-align: center;
}
h1{
    font-size: 45px;
    margin: 4.25% 0 7% 0;
}
.innermain{
    border: white 5px dashed;
    margin: 1% 2%;
    padding-bottom: 2%;
}
.buttonsection{
    text-align: center;
    display: flex;
        margin: -2.5% 35% 0 5%;
}
button{
    background-color: white;
    border: black 5px solid;
    width: 250%;
    height: 20%;
    padding: 1% 2% 3% 2%;
    margin: 5% 0;
    font-family: fredoka;
    font-size: 18px;
    transition:
        background-color 0.5s;
        border-color 0.5s;
        color 0.5s;
}
button:hover{
    background-color: #ed0000;
    border-color: #4a0000;
    color: white;
}
#buttons{
    margin-top: 3.5%;
    margin-left: -17%
}
img{
    outline: black 6px solid;
}

@media (max-width: 430px){
    .main{
    width: 100%;
    margin: auto;
    margin-top: 4%;
    }
    h1{
    font-size: 40px;
    margin: 4.25% 0 7% 0;
}
    .buttonsection{
    text-align: center;
    display: block;
    margin: 0% 0% 0 0;
    }
    button{
    background-color: white;
    border: black 5px solid;
    width: 75%;
    height: 9%;
    padding: 0%;
    margin: 3% 0%;
    font-family: fredoka;
    font-size: 18px;
    }
    #buttons{
    margin-top: 0%;
    margin-left: 0%
    }
    img{
    margin-bottom: 6%;
    width: 65%;
    }

}