.roboto-medium{
    font-family: "Roboto", sans-serif;
    font-weight: 500;
    font-style: normal;
}
  
.roboto-bold{
    font-family: "Roboto", sans-serif;
    font-weight: 700;
    font-style: normal;
}

a{

    text-decoration: none;

}

/* a{
    text-underline-offset: 23px;
    text-decoration-line: underline;
    text-decoration-thickness: 5px;
}

a{
    text-decoration: none;
} */


html{
    /* background: rgb(217, 217, 201);  */
    background: #2e2e2e;
}

.buttonBox{
    max-width: 2500px;
    background-color: rgb(217, 217, 201);
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    text-align: center;
    margin-top: 30px;
    margin-bottom: 30px;
    margin-left: auto;
    margin-right: auto;
    padding: 20px 20px 100px 20px;
    border-style: outset;
    border-width: 35px;
    border-color: beige;
}

.innerFrame{

    background-color: rgb(217, 217, 201);
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    text-align: center;
    margin: 30px;
    padding: 20px 20px 100px 20px;
}

.banner{

    display: flex;
    justify-content: center;
    align-items: center;
    flex: 0 0 100%;
    margin-top: 25px;
    margin-bottom: 55px;
    margin-left: 700px;
    margin-right: 700px;
    padding: 25px;
    
}

.brand{
    font-style: italic;
    font-weight: bolder;
    font-size: 35px;
    letter-spacing: 3px;
    color: darkred;
    opacity: .6;
    /* color: rgb(119, 109, 90); */
    text-shadow: 0px 1px 1px rgb(119, 109, 90);
}

.bar{

    flex: 0 0 100%;
    color: rgb(0, 0, 0, 0);
    font-size: 1px;
    background-color: flasher;
    animation: flasher, barWobble;
    animation-iteration-count: infinite;
    animation-duration: 1s;
    padding: 30px 30px 30px 15px;
    margin: 5px 5px 5px 5px;
    border-style: outset;
    border-color: beige;
    border-radius: 10px;
    border-width: 25px;
    text-shadow: 0px 1px 1px rgb(58, 58, 38);
    box-shadow: 0px 5px 7.5px rgb(58, 58, 38);
    max-width: 40%;

}

.bar:hover{
    border-style: inset;
}

@keyframes barWobble{
    0% { transform: rotate(0deg); }
    15% { transform: rotate(-0.1deg); }
    30% { transform: rotate(0.1deg); }
    45% { transform: rotate(-0.1deg); }
    60% { transform: rotate(0.1deg); }
    75% { transform: rotate(-0.1deg); }
    90% { transform: rotate(0.1deg); }
    100% { transform: rotate(0deg); }
}

.mainButt{
    font-family: "roboto", sans-serif;
    color: rgb(58, 58, 38);
    font-weight: 500;
    font-size: 35px;
    padding: 5px 30px 30px 15px;
    margin: 5px 5px 5px 5px;
    border-style: outset;
    border-color: beige;
    border-radius: 10px;
    border-width: 25px;
    background-color: flasher;
    animation: flasher, wobble;
    animation-iteration-count: infinite;
    animation-duration: 1s;
    text-shadow: 0px 1px 1px rgb(58, 58, 38);
    box-shadow: 0px 5px 7.5px rgb(58, 58, 38);
}

.mainButt:hover{
    border-style: inset;
    color: red;
}

@keyframes flasher{
    0% {
      background-color: beige;
    }
  
    50% {
      background-color: rgb(218, 218, 193);
    }
  
    100% {
      background-color: beige;
    }
}

.greenButt{
    font-family: "roboto", sans-serif;
    color: rgb(61, 77, 34);
    font-weight: 500;
    font-size: 35px;
    padding: 5px 30px 30px 15px;
    margin: 5px 5px 5px 5px;
    border-style: outset;
    border-color: #abc799;
    border-radius: 10px;
    border-width: 25px;
    background-color: glasherGreen;
    animation: flasherGreen, wobble;
    animation-iteration-count: infinite;
    animation-duration: 1s;
    text-shadow: 0px 1px 1px rgb(58, 58, 38);
    box-shadow: 0px 5px 7.5px rgb(58, 58, 38);
}

@keyframes flasherGreen{
    0% {
        background-color: #abc799;
      }
    
      50% {
        background-color: #90b27c;
      }
    
      100% {
        background-color: #abc799;
      }
}

.greenButt:hover{
    border-style: inset;
    color: beige;
}

.greenButt.hovered{
    border-style: inset;
    color: beige;
  }

.yellowButt{
    font-family: "roboto", sans-serif;
    color: #52482d;
    font-weight: 500;
    font-size: 35px;
    padding: 5px 30px 30px 15px;
    margin: 5px 5px 5px 5px;
    border-style: outset;
    border-color: #e7cf8a;
    border-radius: 10px;
    border-width: 25px;
    background-color: flasherYellow;
    animation: flasherYellow, wobble;
    animation-iteration-count: infinite;
    animation-duration: 1s;
    text-shadow: 0px 1px 1px rgb(58, 58, 38);
    box-shadow: 0px 5px 7.5px rgb(58, 58, 38);
}

@keyframes flasherYellow{
    0% {
        background-color: #e7cf8a;
      }
    
      50% {
        background-color: #d3bb75;
      }
    
      100% {
        background-color: #e7cf8a;
      }
}

.yellowButt:hover{
    border-style: inset;
    color: beige;
}

.blueButt{
    font-family: "roboto", sans-serif;
    color: rgb(39, 39, 93);
    font-weight: 500;
    font-size: 35px;
    padding: 5px 30px 30px 15px;
    margin: 5px 5px 5px 5px;
    border-style: outset;
    border-color: #4b71be;
    border-radius: 10px;
    border-width: 25px;
    background-color: flasherBlue;
    animation: flasherBlue, wobble;
    animation-iteration-count: infinite;
    animation-duration: 1s;
    text-shadow: 0px 1px 1px rgb(58, 58, 38);
    box-shadow: 0px 5px 7.5px rgb(58, 58, 38);
}

@keyframes flasherBlue{
    0% {
        background-color: #4b71be;
      }
    
      50% {
        background-color: #36589b;
      }
    
      100% {
        background-color: #4b71be;
      }
}

.blueButt:hover{
    border-style: inset;
    color: beige;
}


.topButt{
    font-family: "roboto", sans-serif;
    color: rgb(32, 32, 21);
    font-weight: 500;
    font-size: 35px;
    padding: 5px 30px 30px 15px;
    margin: 5px 5px 5px 5px;
    border-style: outset;
    border-color: rgb(184, 184, 167);
    border-radius: 10px;
    border-width: 25px;
    background-color: flasherTop;
    text-shadow: 0px 1px 1px rgb(58, 58, 38);
    box-shadow: 0px 5px 7.5px rgb(58, 58, 38);
    animation: wobble, flasherTop;
    animation-iteration-count: infinite;
    animation-duration: 1s;
}

@keyframes flasherTop{
    0% {
        background-color: rgb(184, 184, 167);
      }
    
      50% {
        background-color: rgb(149, 149, 136);
      }
    
      100% {
        background-color: rgb(184, 184, 167);
      }
}

.topButt:hover{
    border-style: inset;
    color: beige;
}

.mainButtRed{
    font-family: "roboto", sans-serif;
    color: darkred;
    font-weight: 500;
    font-size: 35px;
    padding: 5px 30px 30px 15px;
    margin: 5px 5px 5px 5px;
    border-style: outset;
    border-color: salmon;
    border-radius: 10px;
    border-width: 25px;
    background-color: flasherRed;
    animation: flasherRed, wobble;
    animation-iteration-count: infinite;
    animation-duration: 1s;
    text-shadow: 0px 1px 1px rgb(58, 58, 38);
    box-shadow: 0px 5px 7.5px rgb(58, 58, 38);
}

.mainButtRed:hover{
    border-style: inset;
    color: beige;
}

@keyframes flasherRed{
    0% {
        background-color: salmon;
    }
    
    50% {
        background-color: tomato;
    }
    
    100% {
        background-color: salmon;
    }
}

.semiButt{
    font-family: "roboto", sans-serif;
    color: rgb(57, 0, 57);
    font-weight: 500;
    font-size: 35px;
    padding: 5px 30px 30px 15px;
    margin: 5px 5px 5px 5px;
    border-style: outset;
    border-color: rgb(179, 144, 179);
    border-radius: 10px;
    border-width: 25px;
    background-color: flasherSemi;
    animation: flasherSemi, wobble;
    animation-iteration-count: infinite;
    animation-duration: 1s;
    text-shadow: 0px 1px 1px rgb(58, 58, 38);
    box-shadow: 0px 5px 7.5px rgb(58, 58, 38);
}

.semiButt:hover{
    border-style: inset;
    color: beige;
}

@keyframes flasherSemi{
    0% {
        background-color: rgb(179, 144, 179);
    }
    
    50% {
        background-color: rgb(161, 126, 161);
    }
    
    100% {
        background-color: rgb(179, 144, 179);
    }
}

/* .markButt{
    font-family: "roboto", sans-serif;
    font-weight: 500;
    font-size: 35px;
    color: #4b71be;
    padding: 5px 30px 30px 15px;
    margin: 5px 5px 5px 5px;
    border-style: outset;
    border-color: #e7cf8a;
    border-radius: 10px;
    border-width: 25px;
    background-color: flasherMark;
    animation: flasherMark, wobble;
    animation-iteration-count: infinite;
    animation-duration: 1s;
    animation: flasherMark 2s linear infinite alternate;
    text-shadow: 0px 1px 1px rgb(58, 58, 38);
    box-shadow: 0px 5px 7.5px rgb(58, 58, 38);  
}

@keyframes flasherMark{
    0% {
        background-color: #e7cf8a;
    }

    25% {
        background-color: salmon;
    }
    
    50% {
        background-color: #4b71be;
    }

    75% {
        background-color: salmon;
    }
    
    100% {
        background-color: #e7cf8a;
    }
} */

@keyframes wobble{
    0% { transform: rotate(0deg); }
    15% { transform: rotate(-0.5deg); }
    30% { transform: rotate(0.5deg); }
    45% { transform: rotate(-0.5deg); }
    60% { transform: rotate(0.5deg); }
    75% { transform: rotate(-0.5deg); }
    90% { transform: rotate(0.5deg); }
    100% { transform: rotate(0deg); }
}


/* @media (max-width: 860px){

    html{
        background-color: rgb(192, 192, 173);
    }

    .buttonBox{
        max-width: 1710px;
        background-color: #444141;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        text-align: center;
        margin-top: 30px;
        margin-bottom: 30px;
        margin-left: auto;
        margin-right: auto;
        padding: 20px 20px 100px 20px;
        border-style: outset;
        border-width: 35px;
        border-color: #2e2e2e;
    }

    .brand{
    color: beige;
    text-shadow: 0px 1px 2px beige;
    }

    .innerFrame{
        background-color: #444141;
    }

    .brandSmall{
         display: inline-block; 
    }
        
    .full-text{ 
        display: none; 
    }

} */