.role-button {
    background:none;
    border:none;

    width: 100%;
    height: 100%;
    border-radius: 4px;
    transition: 0.3s;
    color: black;
;
    display: inline-block;
    text-align: center;
} 
.role-button:hover {
    opacity: .8;
}
.role-button {
    width: 40%;
    height: inherit;
    margin: 3px;
    cursor: pointer;
}
.role-button p {
    color: #fedb00;
    font-size:2em;
    margin: 0;
}
.role-button img{
    width: 100%;
    display: block;
}
.centered-box{
    margin: auto;
    width: 80%;
    padding: 10px;
    display: flex;
    justify-content: center;
    gap: 10%;
}

.levi-info {
    margin: 5%;
    overflow: auto;
}

.levi-info img{
    float:right;
    width: 50%;
}

.loadout img{
    float:right;
    height: 15vw;
}
.outline-img{
    border: #fedb00 .5vw solid;
}
.outline-img-white{
    border: #fefce7 .5vw solid;
}
.loadout {
    display: block;
    margin: auto;
    padding-left: 2%;
    overflow: auto;
    
}
.sop-video {
    aspect-ratio: 16/  9;
    width: 30vw;
    margin: auto;
    display: block;
    border: #fedb00 .2vw solid;
    float: right;
}
.video-text {
    margin: 3% auto;
    width: 90%;
    text-align: left;
    padding: 1%;
    clear: both;
}


@media (max-width: 500px) {
    .loadout {font-size: .6em; }  
    .loadout img{height: 20vw;}
    .sop-video {float: none; width: 70vw;}
}