/* ########## GLOBAL ########## */

:root {
    --background: #FFC303;
    --background-2: #303030;
    --mobile-background: #FFA101;
    --mobile-background-2: #FBC900;
    --main-color: #303030;
    --button-color-1: #FFC303;
    --button-color-2: #282828bf;
    --button-border-1: #282828bf;
    --button-hovered-color: #1E1E1E;
    --button-selected: #1E1E1E;
    --loader-1: #3c3c3c;
    --loader-2: #ffb700;
    --button-border: #ffd038;
    --gradient-5: #000000;
    --main_section: #323232;
    --border-color: #28282869;
    --text-color-1: #323232;
    --text-color-2: #FFFFFF;
    --text-shadow: 0 0 32px black, 0 0 1.5px black, 0 0 1.5px black, 0 0 1.5px black, 0 0 1.5px black;
    --input-form: #1E1E1E;
    --panel-border: #ffd038;
}

body {
    background: var(--background);
    background-image: url('../../resources/bg/bg_wave.svg');
    background-repeat: no-repeat;
    background-size: cover;
    background-position-y: 85px;
    background-position-x: 0px;
}

footer {
    background: var(--main-color);
    border-top: 2px solid var(--gradient-5);
    text-align: center;
}

button, input[type="submit"], input[type="reset"], select, option, select option {
    background: transparent;
    color: var(--text-color-1);
    border: 1px solid var(--button-border-1);
}

button:hover:not(:focus) {
    color: var(--text-color-2);
    background-color: var(--button-hovered-color);
}

button:focus {
    color: var(--text-color-2);
    background-color: var(--button-hovered-color);
}

button:active {
    color: var(--text-color-2);
    background-color: var(--button-hovered-color);
}

.button:active {
    box-shadow: inset var(--standard-shadow);
}

.button-text, .reverse-button-text, button {
    font-size: var(--button-text-size);
}

.text-box {
    background-color: var(--input-form);
}

input::placeholder {
    color: var(--grey);
}

.input-form {
    color: var(--white);
}

.input-form:hover {
    background-color: var(--input-form);
}

.input-form:focus-within {
    background-color: var(--input-form);
}

select {
    background: var(--input-form);
    color: var(--text-color-2);
}

select:hover {
    background-color: var(--input-form);
}

select option {
    color: var(--text-color-2);
}

.loader {
    border: 5px solid var(--loader-1);
    border-top: 5px solid var(--loader-2);
}


/* ########## SPECIFIC ########## */

.logo-container {
    background-image: url(../resources/logo/logo-desktop.svg);
    background-repeat: no-repeat;
}

#page-main-section {
    color: var(--text-color-2);
    margin-top: 5%;
}

.op-title {
    color: var(--text-color-2);
}

.font-color-2 {
    color: var(--text-color-2);
}

.copy-frame {
    background-color: var(--input-form);
    color: var(--text-color-2) !important;
}

.wrap-button {
    color: var(--text-color-2);
    border: 1px solid var(--text-color-2);
}

.connection-indicator {
    background: var(--main-color);
}

.contract-address {
    color: var(--text-color-2);
}

.gui-button {
    color: var(--text-color-2);
    border: 1px solid var(--text-color-2);
}


/* ########## STATUS ########## */

.section-check-operation {
    color: var(--text-color-2) !important;
}

.check-wraps-frame {
    color: var(--text-color-2) !important;
}

.check-unwraps-frame {
    color: var(--text-color-2) !important;
}

.wrap-status {
    border: 1px solid var(--input-form);
}

.wrap-status:hover {
    background-color: var(--input-form);
}

.header-row {
    background-color: var(--input-form);
}

.header-row:hover {
    background-color: var(--input-form);
}


/* ########## PANEL ########## */

.op-selector {
    color: var(--text-color-1);
}

.op-selector:hover:not(:focus) {
    color: var(--text-color-2);
    background-color: var(--input-form);
}

.op-selector:active {
    color: var(--text-color-2);
    background-color: var(--input-form);
}

.op-selected {
    color: var(--text-color-2);
    background-color: var(--button-selected);
}

.active-frame {
    background: var(--background);
}


/* ########## SCROLLBAR ########## */
  
  /* Track */
::-webkit-scrollbar-track {
background: var(--button-hovered-color);
}
  
  /* Handle */
::-webkit-scrollbar-thumb {
    background: #444;
}
  
  /* Handle on hover */
::-webkit-scrollbar-thumb:hover {
background: #555555;
}


/* ########## MEDIA QUERIES ########## */

/* UP TO SMARTPHONES */
@media screen and (max-width: 480px) {

    body {
        background: linear-gradient(90deg, var(--mobile-background) 0%, var(--mobile-background-2) 100%);
    }

    .logo-container {
        background-image: url(../../resources/logo/logo-mobile.svg);
    }

    #connectWallet {
        background-image: url(../../resources/icons/metamask.svg);
        background-repeat: no-repeat;
        background-position: center;
    }

    .selector-frame {
        background: linear-gradient(90deg, var(--mobile-background) 0%, var(--mobile-background-2) 100%);
    }

    #page-main-section {
        background: var(--background-2);
    }
}

/* TABLETS: */
@media screen and (min-width: 481px) and (max-width: 768px) {

    body {
        background: linear-gradient(90deg, var(--mobile-background) 0%, var(--mobile-background-2) 100%);
    }

    header {
        background: linear-gradient(90deg, var(--mobile-background) 0%, var(--mobile-background-2) 100%);
    }

    .logo-container {
        background-image: url(../../resources/logo/logo-mobile.svg);
    }

    #connectWallet {
        background-image: url(../../resources/icons/metamask.svg);
        background-repeat: no-repeat;
        background-position: center;
    }

    #page-main-section {
        background: linear-gradient(90deg, var(--mobile-background) 0%, var(--mobile-background-2) 100%);
        background-image: url('../../resources/bg/bg_wave_mobile.svg');
        background-repeat: no-repeat;
        background-size: cover;
        background-position-y: 0px;
        background-position-x: 0px;
    }

}

/* NETBOOKS/VERTICAL TABLETS: */
@media screen and (min-width: 769px) and (max-width: 1024px) {

    body {
        background-position-x: 40%;
    }

}

/* UP TO TABLETS */
@media screen and (max-width: 768px) {

    body {
        background: linear-gradient(90deg, var(--mobile-background) 0%, var(--mobile-background-2) 100%);
    }

    header {
        background: linear-gradient(90deg, var(--mobile-background) 0%, var(--mobile-background-2) 100%);
    }

    .logo-container {
        background-image: url(../../resources/logo/logo-mobile.svg);
    }

    #connectWallet {
        background-image: url(../../resources/icons/metamask.svg);
        background-repeat: no-repeat;
        background-position: center;
    }
}

/* FROM TABLETS ON */
@media only screen and (min-width: 769px) {

    .logo-container {
        background: url(../../resources/logo/logo-desktop.svg);
    }

    .active-header {
        background: var(--background);
    }
}


/* ########## GENERIC ########## */

.pressed {
    color: var(--text-color-2);
    background-color: var(--button-hovered-color);
}

.alert {
    border: 0.2em solid var(--background);
}

.alert a {
    color: var(--background);
}