@font-face {

	font-family: "Moon";
	src: url("fonts/SofiaProRegularAz.woff2") format("woff2");
	font-weight: normal;

}

@font-face {

	font-family: "Moon";
	src: url("fonts/SofiaProBlackAz.woff2") format("woff2");
	font-weight: bold;

}

body{
    background: rgb(255,113,0);
    background: linear-gradient(90deg, rgba(255,113,0,1) 0%, rgba(199,11,111,1) 100%); 
    min-height: 100vh;
    color:white;
    font-family: Moon;
}
.answer{
    background-color:#666b6e;
    color:white;
    font-size: 2em;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 120px;
    border-radius: 10px;
    margin-bottom: 10px;
    /* transform: skewX(-25deg); */
    padding:10px 20px 10px 100px;
    line-height: 1.2em;
    position: relative;
    /* overflow: hidden; */
    user-select: none;
}
.letter{
    position: absolute;
    top: 0px;
    left: -30px;
    font-size: 3em;
    
    background-color: white;
    border-radius:40px;
    height: 120px;
    width: 120px;
    color:#FF7100;
    text-align: right;
    line-height: 120px;
    transform: rotate(45deg);
    text-align: center;
}
.letter span{
    transform: rotate(-45deg) translateX(-5px);
    display: block;
    line-height: 110px;
}
.answer span{

    /* transform: skewX(25deg); */
}
.answer.correct{
    /* background-color:rgb(140 208 0);
    color:black; */
}
.answer.iscorrect{
    animation: backgroundChange 1s forwards;

    color:black;
}
.answer.iswrong{
     background-color:#E4002B;
     color:white;
     border: 1px solid white;
}
@keyframes backgroundChange {
    0%{    background-color:rgb(231, 255, 183);}
    10%{    background-color:rgb(40 208 0);}
    20%{    background-color:rgb(231, 255, 183);}
    30%{    background-color:rgb(40 208 0);}
    100%{    background-color:rgb(140 208 0);}
}
.cursor-pointer{
    cursor: pointer;
}
.em{
    width: 100%;
    aspect-ratio: 1 / 1;
    height: auto;
}