#linkinstructcont {
        background-image:
        linear-gradient(rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.3)),
        url("/assets/grass.png");
        background-size: 48px;
        display: flex;
        flex-direction: column;
        align-items:center;
        gap:16px;
        color:white;
}
.instructionswrapper {
    display: flex;
    flex-direction: column;
    align-items:center;
    background: rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(12px);
    border-radius: 4px;
    margin: 0 auto;
    box-shadow: inset 4px 4px 2px rgba(0, 0, 0, 0.5),
                inset -4px -4px 2px rgba(0, 0, 0, 0.3);
    height: fit-content;
    width: 100%;
    color:#222;
}
.instructions {
        display: flex;
        flex-direction: column;
        align-items:left;
        margin:16px;
}

.titlewrapper {
    border-width: 3px;
    border-color: white;
    border-style: solid;
    border-radius: 6px;
    box-shadow: 0px 0px 8px #777777;
    background-image: linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.0));
    background-color: #ec7e2f;
    width: fit-content;
    text-align: center;
    text-shadow: 1px 1px 4px #222;
}

h1{
    font-size: 48px;
    margin:2px 20px;
    padding:0;
}

h3{
    font-size:28px;
    text-align:center;
    padding:0;
    margin:0;
}
p {
    font-size:28px;
    text-align:center;
}
h2{
    font-size:32px;
    padding:2px 20px;
    margin:0;
    color:white;
    text-shadow: 1px 1px 4px #222;
}
.stepcard1 h2{
    background-image: linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.0));
}
.stepcard2 h2{
    background-image: linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.0));
}
li{
    list-style-position: inside;
    list-style-image: url("/assets/ktrico.png");
    font-size:24px;
    margin:6px 8px;
}
.stepcard1{
    border-width: 3px;
    border-color: white;
    border-style: solid;
    border-radius: 6px;
    box-shadow: 0px 0px 8px #777777;
    background-color: #ec7e2f;
    width: fit-content;
    text-align: left;
    margin-bottom:16px;
    max-width:900px;
}
.stepcard2{
    border-width: 3px;
    border-color: white;
    border-style: solid;
    border-radius: 6px;
    box-shadow: 0px 0px 8px #777777;
    background-color: #24a387;
    width: fit-content;
    text-align: left;
    margin-bottom:16px;
    max-width:900px;
}
.cardbody{
    background-color:white;
    margin:8px;
    padding:4px 12px;
    border-radius:4px;
    
}

span{
    color:red;
}

.img-wrapper{
    max-height: fit-content;
    padding: 8px;
    box-shadow: inset 4px 4px 2px rgba(0, 0, 0, 0.5),
                inset -4px -4px 2px rgba(0, 0, 0, 0.3);
                width:fit-content;
}

img{
    max-width:800px;
    
}

.Q{
    color:white;
    text-shadow: 1px 1px 4px #222;
    list-style-image: url("/assets/linktutorial/qtora.png");
}
.A{
    color:white;
    text-shadow: 1px 1px 4px #222;
    list-style-image: url("/assets/linktutorial/atora.png");
}