@import url('https://fonts.googleapis.com/css2?family=Rowdies:wght@300;400;700&display=swap');

:root {
    --specs-wrap-left-default: 25%;
    --specs-wrap-right-default: 25%;
    --specs-wrap-width-default: 50%;

    --specs-wrap-left-mobile: 0%;
    --specs-wrap-right-mobile: 0%;
    --specs-wrap-width-mobile: 90%;

    --specs-text-margin-right-mobile: 5%;
    --specs-text-margin-right-default: 7%;
}

body {
    overflow-y: scroll;
}

.panel {
    border-radius: 12px;
    background-color: rgba(62, 0, 74, 0.786);
    border: 2px solid rgba(255, 255, 255, 0.298);
    width: 75%;
    left: 12.5%;
    padding: 12px;
    position: relative;
}

.panel .panel-toggle {
    user-select: none;
    height: 50px;
    width: 50px;
    position: absolute;
    cursor: pointer;
    stroke: white;
    right: 12px;
    top: 20px;
}

#exodius-panel-area, #proletris-panel-area, .panel-area {
    overflow: hidden;
    max-height: 0px;
    transition: max-height 450ms ease-out;
}

.exodius-panel-closed-text, .proletris-panel-closed-text,  .panel-closed-text {
    color: white;
    font-size: 25px;
    width: fit-content;
    text-align:center;
    margin-left: auto;
    margin-right: auto;
    user-select: none;
}

#exodius-panel-area:hover, #proletris-panel-area:hover, .panel-area:hover {
    clip: rect(auto, auto, 0, auto);
  }

.exodius .title, .proletris .title, .panel .title {
    font-family: "Rowdies", sans-serif;
    font-weight: 300;
}

.exodius .sub-title, .proletris .sub-title, .panel .subtitle {
    font-family: "Rowdies", sans-serif;
    font-weight: 300;
    position: relative;
    bottom: 33px;
}

.exodius .seperator, .proletris .seperator, .panel .seperator {
    height: 2px;
    bottom: 33px;
    position: relative;
    background-color: rgb(117, 2, 92);
    border: 4px solid rgb(59, 9, 70);
    border-radius: 5px;
    -webkit-box-shadow: 0px 0px 23px 0px rgba(145, 20, 207, 0.8);
    -moz-box-shadow: 0px 0px 23px 0px rgba(145, 20, 207, 0.8);
    box-shadow: 0px 0px 23px 0px rgba(145, 20, 207, 0.8);
}

.exodius .textarea, .proletris .textarea, .panel .textarea {
    font-family: "Nerko One", cursive;
    position: relative;
    bottom: 33px;
    text-shadow: var(--text-stroke);
    word-spacing: 3px;
    font-size: 25px;
    line-height: 40px;
    letter-spacing: 1px;
}

.exodius .specs-wrap, .proletris .specs-wrap, .panel .specs-wrap  {
    border-radius: 4px;
    background-color: rgba(31, 0, 37, 0.786);
    border: 2px solid rgba(209, 209, 209, 0.87);
    width: var(--specs-wrap-width-default);
    left: var(--specs-wrap-left-default);
    right: var(--specs-wrap-right-default);
    margin: unset;
    bottom: 33px;
    padding: 12px;
    position: relative;
}

.specs-wrap .specs-text, .proletris .specs-text, .panel .specs-text   {
    font-size: 35px;
    margin-left: var(--specs-text-margin-right-default);
}